19 January 2016

Memasang Responsive Sitemap With Selected Label di Halaman Statis Blog

Responsive Sitemap With Selected Label

Memasang Responsive Sitemap With Selected Label - Pada tutorial kali ini saya akan membagikan sitemap keren, simple dan pastinya responsive. Model sitemap ini tidak langsung menampilkan postingan blog, postingan akan muncul ketika ada perintah klik pada labelnya.

Postingan yang ditampilkan juga bisa sobat ubah sebanyak jumlah yang sobat tentukan. Sitemap ini simple dan responsive di tambah scroll bar keren pada list label atau kategori. Sitemap sangat di butuhkan dan wajib ada di blog sobat karena memudahkan pengunjung mencari artikel yang mereka inginkan. Otomatis pengunjung akan merasa nyaman dan akan kembali mengunjungi blog sobat.
Sebuah sitemap juga berguna agar postingan sobat yang sudah lama bisa terbaca lagi oleh pengunjung. Apalagi sitemap yang satu ini sangatlah memudahkan pengunjung untuk memilih kategori artikel yang mereka inginkan.

Tutorial Memasang Responsive Sitemap With Selected Label

1. Buka Blogger > Laman > Laman Baru atau Edit Halaman sitemap yang sudah ada.
2. Pada Toolbar di samping kiri ada 2 pilihan mode yaitu Compose dan HTML, pilih HTML
3. Masukan Script di bawah ini pada kolom halaman tersebut.

<style type='text/css' scoped='scoped'>
#sidebar-wrapper{display:none!important}#main-wrapper{width:100%!important}#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:0 solid #ccc;padding:0}#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0 solid #ccc;border-left:0 solid #ccc;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc}#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:14px}#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 ul li{list-style-type:none;margin:10px 0 0 -40px;padding:10px;border:1px solid #ddd}#show-post a:hover{color:#07ACEC}#show-post a{color:#333;font-weight:bold}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:1px solid #ccc}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{border-radius:2px;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>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://www.idblanter.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>

Ganti www.idblanter.com dengan link blog sobat.
Ganti 11 dengan jumlah postingan yang diinginkan.

Lalu Simpan.


Itulah tutorial "Memasang Responsive Sitemap With Selected Label" yang bisa saya bagikan kali ini, Selamat Mencoba dan Terima kasih..

Referensi : http://www.kompiajaib.com/2013/11/simple-sitemaps-untuk-blogger.html
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic