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+=' – '+(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
Sumber Bacaan: http://www.kompiajaib.com/2013/11/simple-sitemaps-untuk-blogger.html
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 :)
siip
bener skali ^_^
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
sip
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
Rul Pas Gua Coba KEnapa Gk Bisa Rul ??
buat langsung disini aj sob http://blog.duypham.info/2013/01/sitemap-for-blogger.html
Ok Rul :)
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