Cara Membuat Sitemap/Daftar Isi Sesuai Label Pada Blog - BelajarNyata

    Social Items

belajarnyata.com - Berbicara dengan sitemap ? Hmmm, pasti semua blogger pasti tahu fungsi dan kegunaan dari sitemap tersebut. Lantas yang belum tahu buat apa ? Kita ulas sedikit tentang sitemap atau daftar isi sesuai laber pada blog tersebut.

Sitemap atau peta situs merupakan kumpulan semua artikel yang mempunyai label setiap postingannya. Sitemap ini hanya berlaku untuk blogger saja dan tidak bisa digunakan pada wordpress.


Tampilan sitemap ini akan seperti gambar diatas, yang tampil secara kategori pada postingan anda. Jadi, bila mana anda mengklik sitemap label yang anda maksud maka akan muncul link artikel dari label tersebut.

Fungsi Sitemap

Penjelasan dari sitemap sudah mengerti, nah kalau fungsi nya buat apa min? Lihat saja seperti buku-buku paket atau apalah seperti semacamnya ada daftar isi yang menunjukan bab materi dengan halaman tertentu.

Dengan adanya daftar isi tersebut memudahkan pembaca untuk mengetahui isi buku tersebut.Seperti halnya pada blogger tidak jauh berbeda dengan fungsi daftar isi tersebut.

Struktur sitemap pada blogger memudahkan robot dan pengunjung untuk mengetahui isi blog kita. Jadi sangat penting bila anda untuk memasangnya pada blog masing-masing bila ingin memenuhi syarat mendaftar adsense.



Sitemap terpasang dalam blog kita akan bermanfaat untuk menstrukturkan artikel kita ketika dikunjungi oleh orang-orang. Tidak hanya itu, blog kita akan terasa rapi dan tersusun dengan baik bila menggunakan sitemap tersebut.

Kode sitemap yang saya bagikan sudah otomatis update bila anda mempnyai postingan dan laber terbaru. Tidak perlu khawatir bila anda ingin merubah warna pada tabel tersebut juga bisa mengubahnya.

Untuk kelanjutanya anda tinggal mengikuti langkah-langkah berikut :

Langkah Pertama
Masuk kedalam blog kalian > Laman > Buat Laman Baru > Rubah mode Composed menjadi HTML.

Langkah Kedua
Tulis judul dengan Sitemap ( Tidak di isi juga tidak apa-apa). Lalu salin kode berikut

<style scoped="scoped" type="text/css">
#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:#0f4290;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:#2467ce;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://www.belajarnyata.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>

Langkah Ketiga
Rubah link blog dengan blog anda 

Langkah Kelima

Simpan Halaman anda 
Simpan halaman anda dengan Mode HTML jangan dirubah ke mode COMPOSED, karena semua kasus akan tidak muncul bila anda simpan dalam mode COMPOSED.

Nah, begitu cara memasang sitemap dengan mudah, begitu mengasyikan kan? Ketika kita senang dan membangun blog untuk mengubah tampilan semenarik mungkin. Sekian dari mimin terima kasih dan semoga bermanfaat.

Selamat mencoba!

Cara Membuat Sitemap/Daftar Isi Sesuai Label Pada Blog

belajarnyata.com - Berbicara dengan sitemap ? Hmmm, pasti semua blogger pasti tahu fungsi dan kegunaan dari sitemap tersebut. Lantas yang belum tahu buat apa ? Kita ulas sedikit tentang sitemap atau daftar isi sesuai laber pada blog tersebut.

Sitemap atau peta situs merupakan kumpulan semua artikel yang mempunyai label setiap postingannya. Sitemap ini hanya berlaku untuk blogger saja dan tidak bisa digunakan pada wordpress.


Tampilan sitemap ini akan seperti gambar diatas, yang tampil secara kategori pada postingan anda. Jadi, bila mana anda mengklik sitemap label yang anda maksud maka akan muncul link artikel dari label tersebut.

Fungsi Sitemap

Penjelasan dari sitemap sudah mengerti, nah kalau fungsi nya buat apa min? Lihat saja seperti buku-buku paket atau apalah seperti semacamnya ada daftar isi yang menunjukan bab materi dengan halaman tertentu.

Dengan adanya daftar isi tersebut memudahkan pembaca untuk mengetahui isi buku tersebut.Seperti halnya pada blogger tidak jauh berbeda dengan fungsi daftar isi tersebut.

Struktur sitemap pada blogger memudahkan robot dan pengunjung untuk mengetahui isi blog kita. Jadi sangat penting bila anda untuk memasangnya pada blog masing-masing bila ingin memenuhi syarat mendaftar adsense.



Sitemap terpasang dalam blog kita akan bermanfaat untuk menstrukturkan artikel kita ketika dikunjungi oleh orang-orang. Tidak hanya itu, blog kita akan terasa rapi dan tersusun dengan baik bila menggunakan sitemap tersebut.

Kode sitemap yang saya bagikan sudah otomatis update bila anda mempnyai postingan dan laber terbaru. Tidak perlu khawatir bila anda ingin merubah warna pada tabel tersebut juga bisa mengubahnya.

Untuk kelanjutanya anda tinggal mengikuti langkah-langkah berikut :

Langkah Pertama
Masuk kedalam blog kalian > Laman > Buat Laman Baru > Rubah mode Composed menjadi HTML.

Langkah Kedua
Tulis judul dengan Sitemap ( Tidak di isi juga tidak apa-apa). Lalu salin kode berikut

<style scoped="scoped" type="text/css">
#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:#0f4290;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:#2467ce;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://www.belajarnyata.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>

Langkah Ketiga
Rubah link blog dengan blog anda 

Langkah Kelima

Simpan Halaman anda 
Simpan halaman anda dengan Mode HTML jangan dirubah ke mode COMPOSED, karena semua kasus akan tidak muncul bila anda simpan dalam mode COMPOSED.

Nah, begitu cara memasang sitemap dengan mudah, begitu mengasyikan kan? Ketika kita senang dan membangun blog untuk mengubah tampilan semenarik mungkin. Sekian dari mimin terima kasih dan semoga bermanfaat.

Selamat mencoba!