Cara Mudah Membuat Daftar isi (Sitemap) Blog Keren

Kali ini saya akan memberikan informasi tentang bagaimana cara membuat Daftar Isi Blog atau yang biasa disebut dengan Sitemap Blog, banyak blogger yang memasang Sitemap untuk memudahkan pengunjung blog dalam mencari informasi yang ada dalam suatu blog.

Daftar Isi atau Sitemap adalah sebuah halaman berupa daftar artikel yang telah diterbitkan oleh blog teraebut untuk memudahkan pengunjung dalam merayapi atau menelusuri seluruh artikel dalam suatu blog.

Jadi jika anda memasang Daftar Isi atau Sitemap bisa memberikan layanan terbaik untuk pengunjung yang memerlukan informasi tanpa harus menelusuri blog halaman per halaman.

Manfaat Memasang Daftar Isi atau Sitemap

Adapun manfaat jika kita memasang Daftar Isi atau Sitemap adalah sebagai berikut :
  • Memudahkan pengunjung menelusuri seluruh artikel yang sudah kita terbitkan.
  • Bisa membuat nyaman pengunjung agar lebih berlama-lama berada di blog kita.
  • Blog akan terlihat lebih professional. 
  • Akan mudah terindeks oleh Search Engine Google, karena menurut ahli internet marketing jika website atau Blog memiliki Daftar Isi atau Sitemap yang tersusun rapi semua artikel yang ada akan mempercepat terindek Search Engine Google.

2 Syarat untuk Memasang Daftar Isi atau Sitemap Blog

  • Telah memiliki beberapa artikel, lebih banyak lebih baik. 
  • Setiap artikel yang telah diterbitkan harus memiliki label agar bisa masuk ke Daftar Isi.

Langkah-langkah Membuat Daftar Isi atau Sitemap

Jika kedua (2) syarat diatas telah terpenuhi maka kita akan langsung saja ke pembahasan bagaimana langkah-langkah dalam membuat Daftar Isi atau Sitemap blog. Untuk silahkan ikuti langkah-langkah di bawah ini :
1. Masuk dahulu ke Blogger.
2. Buat dahulu halaman dengan judul Daftar Isi atau bisa juga dengan Sitemap.
3. Pilih dan klik mode HTML (ingat jangan Compose).
4. Copy kode HTML dibawah ini dan paste pada halaman  saldan pilih salah satu versi yang ingin anda gunakan

Daftar Isi atau Sitemap versi pertama (1)

Cara Mudah Membuat Daftar isi (Sitemap) Blog Keren

<style type="text/css">

#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}

.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;

padding:1px 0 2px 11px;background: #3498DB;

border:1px solid #2D96DF;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;

-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}

.labl a{color:#fff;}

.labl:first-letter{text-transform:uppercase;}

.new{color:#FF5F00;font-weight:bold;font-style:italic;}

.postname{font-weight:normal;background:#fff;margin-left: 35px;}

.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}

</style>



<br />

<div id="toc">

<script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>

<script src="https://www.afaizan.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

Daftar Isi atau Sitemap versi kedua (2)

Cara Mudah Membuat Daftar isi (Sitemap) Blog Keren

<style>

#show-cat{float:left;margin-right:20px;width:30%;height:auto;overflow-x:hidden;overflow-y:auto;line-height:15px}

#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}

#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}

#show-cat ul li a{display:block;padding:10px} #show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none}

#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:15px}

#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}

#show-post{float:left;width:65%}

#show-post ul li{list-style-type:none;padding-bottom:15px}

#navi-cat{padding:20px 0}

#navi-cat a{margin-right:10px;border:1px solid #ccc}

#navi-cat a,#navi-cat span{padding:5px 10px}

#navi-cat span{float:right}

</style>

<div id='show-cat'></div>

<div id='show-post'>

<script type='text/javaScript'> var cat_home='https://www.afaizan.com/';cat_numb=11;cat_pre='Prev';cat_nex='Next'; var cat_name;var cat_start;var cat_class; function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>'); </script> </div>

<div style='clear:both'>

</div>

5. Silahkan ganti URL https://www.afaizan.com yang berwarna merah dengan alamat blog anda.
6. Klik Simpan dan kemudian klik Pratinjau untuk melihat hasilnya. Jika menurut anda sudah terlihat bagus dan rapi pada blog anda maka ikuti langkah selanjutnya. 
7. Klik Publikasikan dan selesai.

Apabila pemasangan Daftar Isi atau Sitemap telah selesai, agar bisa diakses oleh pengunjung maka Daftar Isi atau Sitemap blog anda harus di pasang menu blog, atau jika anda memasang halaman statis di footer maka segeralah untuk memasangnya.
Baca juga : Cara Membuat dan Memasang Halaman Statis di Blog

Demikian artikel tentang cara mudah membuat Daftar Isi atau Sitemap yang keren untuk blog anda. Semoga artikel ini bisa bermanfaat untuk anda dan selamat mencoba memasang daftar isi atau sitemap.

0 Response to "Cara Mudah Membuat Daftar isi (Sitemap) Blog Keren"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel