Cara Menciptakan Sitemap Responsive Dan Simple Di Blog

Sebuah keterbatasan pada halaman utama tidak dapat menampilkan semua index post pada halaman utama, maka disinilah kegunaan sitemap.

Sitemap ini berkhasiat untuk memudahkan pengunjung blog melihat semua post yang ada pada blog. Selain untuk memudahkan pengunjung sitemap ini juga berkhasiat supaya blog dapat dirayapi secara keseluruhan oleh robot google.

Cara kerja sitemap ini ialah menampilkan seluruh post yang ada pada sebuah blog menurut label, jadi dikala kita mengklik satu label maka akan terlihat semua post yang ada pada label tesebut.

Sitemap ada banyak sekali macam tampilannya, namun kebanyakan tidak Responsive dan SEO Friendly, maka kali ini saya post sitemap dengan tampilan Responsive, SEO Friendly dengan design yang simple.

Cara Membuat/Menambahkan Sitemap
1. Buka blogger dan login dengan akun bloggrr kamu
2. Tekan hidangan laman
3. Setelah masuk bab laman, selanjutnya tekan "buat laman baru"
4. Gunakan mode HTML
5. Copy dan pastekan arahan dibawah ini pada mode HTML

<div id='show-cat'> </div> <div id='show-post'> <script type='text/javaScript'> var cat_home='http://abrarkun.blogspot.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="Cara Membuat Sitemap Responsive Dan Simple Di Blog">'+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="Cara Membuat Sitemap Responsive Dan Simple Di Blog">'+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="Cara Membuat Sitemap Responsive Dan Simple Di Blog">'+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="Cara Membuat Sitemap Responsive Dan Simple Di Blog">';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> <style scoped="" type="text/css"> #show-cat{float:left;margin:20px 2% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:normal;border:1px solid rgba(0,0,0,0.1)} #show-cat ul{margin:0;border-top:0 solid rgba(0,0,0,0.1);padding:0} #show-post ul li{list-style-type:none;margin:0 0 0 -25px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.1)} #show-post ul li:hover{margin-right:10px;border-color:#fcd3d3} #show-cat ul li a{display:block;padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);transition:initial} #navi-cat a:hover{color:#fff!important} #show-cat ul li:last-child a{border-bottom:none} #show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none} #show-cat ul li a,#navi-cat a,#navi-cat span{font-size:13px} #show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff} #show-post{float:left;width:69%;line-height:1.6em} #show-post a{color:#333;font-size:14px} #show-post a:hover{color:#f14b4b} #navi-cat{padding:20px 0} #navi-cat a{padding:5px 10px;background:rgba(0,0,0,0.7);margin:0 5px 0 0;color:#fff;border-radius:3px;} #navi-cat a:nth-child(2){background:#f14b4b;margin:0 10px 0 0;color:#fff} #navi-cat span{float:right;padding:5px 0;font-size:12px;color:rgba(0,0,0,0.5);font-weight:700} #show-cat::-webkit-scrollbar{width:8px;height:8px} #show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);} #show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)} #show-cat::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out} @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%}} </style> 

Kurang lebih, begitulah cara menciptakan sitemap dengan tampilan Responsive dan SEO Friendly.

Share this post