Daftar isi blog atau sering juga disebut sitemap merupakan salah satu komponen yang sangat penting keberadaannya pada blog. Sitemap merupakan suatu media yang memberikan informasi secara garis besar kepada para pengunjung blog tentang isi blog yang anda kelola.
Dalam postingan kali ini saya akan memberikan tutorial singkat tentang cara membuat sitemap yang fast loading, responsive dan tentu saja SEO friendly. Sebenarnya sitemap default bawaan dari blogger sudah tersedia namun sitemap tersebut kurang menarik dan terlihat biasa biasa saja.
Adapun sitemap atau daftar isi yang saya bagikan tutorialnya ini merupakan sitemap otomatis yang menampilkan judul postingan yang sesuai dengan label yang anda buat pada blog. Artikel-artikel atau postingan postingan terbaru pada blog pun akan terindex secara otomatis jadi tidak perlu ribet memasukan satu persatu lagi pada sitemap.
Contoh sitemap atau daftar isi yang saya bagikan pada artikel kali ini
Adapun sitemap atau daftar isi yang saya bagikan tutorialnya ini merupakan sitemap otomatis yang menampilkan judul postingan yang sesuai dengan label yang anda buat pada blog. Artikel-artikel atau postingan postingan terbaru pada blog pun akan terindex secara otomatis jadi tidak perlu ribet memasukan satu persatu lagi pada sitemap.
Contoh sitemap atau daftar isi yang saya bagikan pada artikel kali ini
Tertarik??...silahkan langsung saja ikuti langkah langkahnya, pertama silahkan log in ke akun blogger anda dan seterusnya pilih "Laman" kemudian klik pada "laman baru"
Langkah berikutnya, 1. isi pada kolom judul laman dengan "sitemap" atau "daftar isi" terserah anda enaknya apa... 2. kemudian pilih atau klik kolom HTML lalu 3. copy paste kode berikut ini
#show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#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:60%}
#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='http://jadulation.blogspot.co.id/';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+=' – '+(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>
dan langkah ke empatnya setelah copy paste kode diatas klik publikasikan maka selesai sitemap atau daftar isi blog anda sudah jadi dan silahkan lihat hasilnya...
Untuk lebih jelasnya silahkan lihat pict berikut ini...
catatan : ganti http://jadulation.blogspot.co.id/ dengan url blog anda dan setelah anda copy paste kode script diatas jangan klik kolom compose (disebelah kolom HTML tadi) karena bisa jadi sitemap yang anda buat tadi tidak akan muncul atau hanya ada halaman kosong.
Nah begitulah langkah langkah membuat Daftar Isi atau Sitemap yang fast loading, responsive dan SEO friendly dari saya semoga membantu dan bermanfaat untuk ada...wassalam...
Untuk lebih jelasnya silahkan lihat pict berikut ini...
catatan : ganti http://jadulation.blogspot.co.id/ dengan url blog anda dan setelah anda copy paste kode script diatas jangan klik kolom compose (disebelah kolom HTML tadi) karena bisa jadi sitemap yang anda buat tadi tidak akan muncul atau hanya ada halaman kosong.
Nah begitulah langkah langkah membuat Daftar Isi atau Sitemap yang fast loading, responsive dan SEO friendly dari saya semoga membantu dan bermanfaat untuk ada...wassalam...
Label:
Blogging,
Tips & Trik,
Tutorial Blog
