Cara Membuat Responsive Simple Sitemap di Blogger

Cara Membuat Responsive Simple Sitemap di Blogger - Sekarang saya akan share bagaimana cara membuat sitemap di blogger, dengan simple sitemap ini sobat tidak menampilkan semua link postingan blog dalam satu halaman, sehingga akses untuk membuka laman sitemap cukup ringan, jadi hanya akan muncul judul artikel dari tiap label yang di klik. Jumlah postingan yang muncul pada saat label di klik jumlahnya dapat di atur sehingga link postingan dari label tidak akan langsung di tampilkan semua, untuk lebih jelasnya silahkan lihat Disini.

Sitemap yang akan kita buat ini sudah responsive karena jika lebar device kecil maka link postingan yang ditampilkan akan ada di bawah labelnya, sehingga tampilannya lebih rapi.

Cara Membuat Responsive Simple Sitemap di Blogger

Pertama silahkan buka blogger > Buat Laman baru > Copy-Paste kode di bawah.

<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://www.script-sampah.com';cat_numb=12;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>

Ganti http://www.script-sampah.com/ dengan http://www.namablogsobat.com/

Sekarang buka Editor Template, Copy-Paste kode di bawah ini tepat di atas kode </style> atau ]]></b:skin>

#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}
#show-cat ul{margin:0;border-top:0px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc;}
#show-cat ul li:last-child a{border-bottom:none;}
#show-cat ul li a,#navi-cat a{background:#fff;color:#4d90f0;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:69%;line-height:1.6em}
#show-post ul li{list-style-type:none;margin-left:-40px}
#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}

@media screen and (max-width:768px){
    #show-cat{width:35%;}
    #show-post{width:59%;}
}
@media screen and (max-width:480px){
    #show-cat{width:100%;margin:20px 0}
    #show-post{width:100%;}
}

Silahkan simpan dan lihat hasilnya pada laman Sitemap.

• CodePen

Kalau link postingannya terlalu ke kiri ketika di tampilkan (label di klik) silahkan kurangi margin kirinya pada kode margin-left:-40 pada kode CSS #show-post ul li misalnya menjadi margin-left:-20px intinya untuk ukuran lebih bagus harus disesuaikan dengan template blog sobat.

Demikian tutorial Cara Membuat Responsive Simple Sitemap di Blogger, selamat mencoba.

Artikel Terkait

Cara Membuat Responsive Simple Sitemap di Blogger

4/ 5

Oleh Unknown

Unknown 10:59 AM