Monday, 18 November 2013

Cara Membuat Simple Sitemap/ Daftar Isi - Setelah lama saya tidak post kini saya kembali untuk postingan tentang blogger lagi, apa lagi dihari minggu saya gak ada buat artikel. Penyebab saya tidak posting artikel karena sibuk mendesain template blog ini agar lebih simpel, full color dan Fast loading. Kembali ke pembahasan kita kali ini saya akan berbagi Cara Membuat Simple Sitemap/ Daftar Isi Di Blog. Jika sobat belum tau apa Sitemap itu sobat bisa klik menu "Sitemap" Nah jika berminat tetap simak artikel ini.

  • Login Blogger
  • Masuk Dashboard lalu klik Laman.
  • Buat Laman baru.
  • Masukkan Script dibawah ini di Html (Ingat Bukan Compose)


<style 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:#d80556;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:12px}
#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}
#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.g-bloog.com/';cat_numb=10;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">'+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">'+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">'+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">';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>


Keterangan

Tulisan yang berwarna Merah ganti dengan url blog sobat.
Tulisan yang berwarna Kuning adalah jumlah artikel yang akan muncul per label dan next.

Sekian artikel yang dapat saya sampaikan artikel hari ini, semoga artikel yang dapat saya sampaikan bermanfaat untuk sobat. Jika ada pertanyaan sobat dapat mengajukan pertanyaan dikomentar bawah ini.



Sumber Script: http://blog.duypham.info/2013/01/sitemap-for-blogger.html
Sumber Bacaan: http://www.kompiajaib.com/2013/11/simple-sitemaps-untuk-blogger.html

Share artikel ke: Facebook Twitter Google+ Linkedin Digg

17 comments

Pertamaxx ^_^
http://belajar-css3.blogspot.com/2013/11/css3-blockquote-bergambar.html

Seperti judulnya, sitemap ini simple tapi keren :-d

keren nehk , di coba dulu sitemap nya , sayang nya saya dah punya sitemap , di pasang di blog baru aja deh :)

wiiih antri sono di SPBU :D

Izin Nyoba gan

mancap rul jadi tau dah buat nambah ilmu tentang blog

makasih gan atas infonya, saya langsung coba yaa :D
maju terus GoBlog

mas nih scriptnya gk bisa di copy , kalau dicopy Musti gk muncul scriptnya , malah Muncul Link Blog Ente

owh iya saya baru nyadar bentar ya sob saya perbaiki

sudah diperbaiki sob! Terima kasih atas laporannya

This comment has been removed by the author.

Rul Pas Gua Coba KEnapa Gk Bisa Rul ??

buat langsung disini aj sob http://blog.duypham.info/2013/01/sitemap-for-blogger.html

Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
Konvert KodeMember AktifJoin This Blog

Copyright © 2013 - Ori By Djogz - All Rights Reserved

close