Cara Membuat Sitemap Yang Responsive Pada Blogger - Sahabatku pembaca Setia Blakkotang, Saat ini anda sedang membaca pembahasan tentang Cara Membuat Sitemap Yang Responsive Pada Blogger, saya hanya seorang newbie yang berbagi, dan mudah mudahan artikel ini bisa membantu sahabat semua dan tentunya anda bisa memahami dan menerapkanya ,bila ada kekurangan atau kesalahan harap di maklumi dan di beri saran ya... .

Judul : Cara Membuat Sitemap Yang Responsive Pada Blogger
Membahas artikel tentang : Cara Membuat Sitemap Yang Responsive Pada Blogger

Cara Membuat Sitemap Yang Responsive Pada Blogger

Artikel Blogging,

Cara Membuat Sitemap Yang Responsive Pada Blogger

Sitemap adalah Peta untuk situs, yang bertujuan mempermudah pengunjung menemukan dan mengetahui di mana letak letak
artikel yang ada di situs blogger tersebut, selain itu Sitemap juga sangat penting sekali karena di artikel yang sebelumnya sudah di sebutkan beberapa syarat agar cepet di terima oleh adsense salah satunya situs tersebut harus ada sitemapnya

Cara Membuat Sitemap Yang Responsive Pada Blogger 

Sebelumnya juga sudah ada artikel yang membahas cara membuat sitemap dengan mudah , kali ini kita membuat sitemap yang responsif di mana sitemap ini  cukup ringan karena  Sitemap ini tidak menampakkan semua link postingan pada satu halaman. hanya muncul pada artikel pada label yang di inginkan. jumlah artikel yang di tampilkan juga bisa di atus sesuai keinginan kita.

Sitemap Sitemap responsive yang ini sudah di atur untuk menyesuaikan dengan device yang di pakai . jika lebar device kecul maka link  yang di tampilkan berada di bwah label yang pastinya akan terlihat lebih rapi

Pertama masuk pada dasbord blog  dan buat Laman baru beri judul Sitemap / peta situs atau lainya beralih ke mode HTML dan paste kode scrip di bawah ini

<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://www.nama situsmu.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&amp;&amp;i&lt;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>

Pada kode di atas saya tandai warna biru silahkan ganti nama situs atau blg kamu, Jika sudah selesei Simpan

Kedua masuk ke editor template, dari dasbord blog pilih template pilih edit HTML dan letakan kode di bawah ini pas di atas  </style>  atau ]]></b:skin> untuk mempercepat mencarinya telan Ctrl + F


#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%;}

}

Simpan dan lihat hasilnya pada halaman sitemap anda.

Jika  ketika di klik ling posnya terlalu ke kiri silahkan kurangi margin kirinya seperti di atas warna biru bisa di ganti 30px atau menyesuaikan dengan tampilanya mau seperti apa, sesuaikan dengan ukuran template blog anda.   sumber Scriptsampah.com

Begitulah Pembahasan tentang artikel ini Cara Membuat Sitemap Yang Responsive Pada Blogger

Mungkin itu saja yang bisa saya jelaskan Cara Membuat Sitemap Yang Responsive Pada Blogger, Dan semoga artikel ini bisa sedikit membantu untuk para sahabat blakkotang .

Sahabat sedang membaca pembahasan tentang Cara Membuat Sitemap Yang Responsive Pada Blogger Pembahasan ini url permalinknya adalah http://blakkotang.blogspot.com/2016/01/cara-membuat-sitemap-yang-responsive.html Dan semoga pembahasan Mengenai Cara Membuat Sitemap Yang Responsive Pada Blogger, Bisa Membantu Dan semoga juga artikel ini bisa bermanfaat, dan bila arikel ini menurut sahabat blakkotang bermanfaat silahkan di bagikan kepada teman atau sahabat-sahabat lainya, terimakasih ,

ARTIKEL BERIKUTNYA :

.

Tweet