Memasang Responsive Sitemap With Selected Label - Pada tutorial kali ini aku akan membagikan sitemap keren, simple dan pastinya responsive. Model sitemap ini tidak pribadi menampilkan postingan blog, postingan akan muncul dikala ada perintah klik pada labelnya.
Postingan yang ditampilkan juga dapat teman ubah sebanyak jumlah yang teman tentukan. Sitemap ini simple dan responsive di tambah scroll kafe keren pada list label atau kategori. Sitemap sangat di butuhkan dan wajib ada di blog teman karena memudahkan pengunjung mencari artikel yang mereka inginkan. Otomatis pengunjung akan merasa nyaman dan akan kembali mengunjungi blog sobat.
Postingan yang ditampilkan juga dapat teman ubah sebanyak jumlah yang teman tentukan. Sitemap ini simple dan responsive di tambah scroll kafe keren pada list label atau kategori. Sitemap sangat di butuhkan dan wajib ada di blog teman karena memudahkan pengunjung mencari artikel yang mereka inginkan. Otomatis pengunjung akan merasa nyaman dan akan kembali mengunjungi blog sobat.
Sebuah sitemap juga berkhasiat supaya postingan teman yang sudah usang dapat terbaca lagi oleh pengunjung. Apalagi sitemap yang satu ini sangatlah memudahkan pengunjung untuk menentukan 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 ialah 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="Memasang Responsive Sitemap With Selected Label di Halaman Statis 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="Memasang Responsive Sitemap With Selected Label di Halaman Statis 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="Memasang Responsive Sitemap With Selected Label di Halaman Statis Blog">'+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" title="Memasang Responsive Sitemap With Selected Label di Halaman Statis 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> <div style='clear:both'></div> Ganti www.idblanter.com dengan link blog sobat.
Ganti 11 dengan jumlah postingan yang diinginkan.
Ganti 11 dengan jumlah postingan yang diinginkan.
Itulah tutorial "Memasang Responsive Sitemap With Selected Label" yang dapat aku bagikan kali ini, Selamat Mencoba dan Terima kasih..
Referensi : https://jalantikusgo.blogspot.com/search?q=cara-memasang-related-post-di-dalam-postingan
