Cara Membuat Sitemap Responsive keren di blog

Cara Membuat Sitemap Responsive keren di blog

Jalak Ikal 29 September 3 komentar
Sitemap Responsive-Sitemap atau sering di sebut oleh kita yaitu daftar isi,sitemap ini label -label yang ada di blog yang dimana label tersebut di klik maka akan keluar judul dari postingan postingan yang sudah anda buat terdahulu,sitemap ini di bilang Responsive karena bisa menyesuaikan dengan ruang yang ada sehingga tampilan nya akan tetap keren,selain itu juga tampilan sitemap ini dibilang simple sehingga meringankan kepada loading page pada blog anda.
 Demo
Namun keunikan dari Sitemap ini beda dari sitemap yang lain nya,yang dimana sitemap ini mempunyai Navigasi sehingga memudahkan kita untuk mengaturan jumlah postingan yang akan di tampilkan di laman sitemap tersebut,namun walaupun sitemap ini mempunyai navigasi tetapi tetap loading nya tetap ringan.

Cara penerapan nya pun sangatlah mudah seperti hal nya anda memasang sitemap sitemap yang lain nya,untuk membuat sitemap tersebut langkah pertama yang harus anda lakukan adalah membuat laman di blog anda dengan judul Sitemap atau apa saja tergantung kepada anda,kemudian letakan kode di bawah ini di daerah Html nya yang berada di samping Compose.
<style type='text/css' scoped='scoped'>
#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:15px}
#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;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://infotrens.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>

- Untuk Url yang berwarna merah silahkan anda ganti dengan nama Url Blog anda
- Dan ketika anda berada di laman Html setelah memasang kode tersebut sebaik nya anda Publish langsung,karena apabila anda setelah memasang kode tersebut lalu kembali dengan mengklik Compose takut nya sitemap tersebut tidak tampil,hanya laman kosong saja yang ada.
- Sedangkan yang cat_numb=11 itu adalah jumlah postingan yang akan di tampilkan di sitemap tersebut

loading...
Ratings: 
Posted by Jalak Ikal, Published at 29 September and have 3 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

3 komentar

keren gannnn ini yang gue cari cari dari kemaren akhirnya nemu juga :D thankss

Balas

Thanks gun, berhasil keren

Balas

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi