Master Kine Hidup Tanpa Tujuan seperti Orang yang Kebelet Tapi Tidak Menemukan WC

Cara Membuat Daftar Isi (Sitemap) Responsive di Blogger

2 min read

kinemaster.co.id – Pada kesempatan kali ini saya akan membagikan tutorial bagaimana Cara Membuat Daftar Isi (Sitemap) Responsive di Blogger, tepatnya di Halaman statistik blogger, Sitemap ini cukup keren dan pastinya simple yang sudah saya terapkan di blog saya ini, membuat blog kamu menjadi elegan untuk dilihat dan pastinya membuat Google memberikan nilai plus untuk blog kamu. Sebelum memasuki tutorialnya pastikan kamu sudah mengetahui apa itu sitemap.

Apa Itu Sitemap ?

Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya.

Manfaat Sitemap untuk Blogger

Dapat kita simpulkan bahwa manfaat sitemap adalah untuk mempermudahkan kemudahan Search Engine Google untuk mengindex setiap halaman dan memberikan suatu kemudahan bagi Customer untuk mendapatkan informasi terbaru dari link sitemap.

Cara Membuat Daftar Isi (Sitemap) Responsive di Blogger

1. Silahkan kamu login terlebih dahulu ke blogger.com dengan menggunakan Gmail kamu.
2. Selanjutnya silahkan kamu masuk ke menu TEMA > Edit HTML.
3. Cari kode </head> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* Sitemap by kinemaster.co.id */
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.namina-sitemap{position:relative;margin:30px auto}
.namina-toc-wrap{display:inline-block;width:100%}
.namina-toc-wrap .namina-cat{background:#fff;border-radius:2px;color:#333;font-size:15px;font-weight:700;padding:10px 20px;border:4px solid #333;text-transform:capitalize}
.namina-toc::before{background:#333;bottom:0;content:&quot;&quot;;left:20%;margin-left:-10px;position:absolute;top:0;width:4px}
.namina-toc{margin:0;padding:30px 20px;position:relative}
.namina-sitemap ul.namina-toc{margin:0;padding:30px 0;list-style-type:none}
.namina-toc li{list-style:none;margin:0;padding:0;position:relative}
.namina-toc &gt; li .toc-date{color:#000;display:block;font-size:14px;font-weight:bold;position:absolute;text-transform:uppercase;top:25px;width:15%}
.namina-toc &gt; li .namina-icon{background:#fff;border-radius:50%;box-shadow:0 0 0 4px #333;color:#fff;font-size:1.4em;font-style:normal;font-variant:normal;font-weight:normal;height:10px;left:22%;line-height:10px;margin:0 0 0 -25px;position:absolute;text-align:center;text-transform:none;top:30px;width:10px}
.namina-toc &gt; li .namina-post::after{border-color:transparent #009688 transparent transparent;border-style:solid;border-width:10px;content:&quot;&quot;;height:0;pointer-events:none;position:absolute;right:100%;top:auto;width:0}
.namina-toc &gt; li .namina-post{background:#009688;border-radius:5px;display:block;font-size:15px;margin:0 0 15px 23%;padding:25px 30px;position:relative}
.namina-toc &gt; li .namina-post a{color:#333;font-weight:700}
.namina-toc &gt; li:last-child .namina-post{margin:0 0 0 23%}
.namina-toc &gt; li .namina-post a:hover{color:#999}
</style>
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=[,"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var t=[];for(var n=0;n<e.feed.category.length;n++){t.push(e.feed.category[n].term)}var t=t.join("/");postbody.html('<div class="namina-sitemap"></div>');$(".post-body .namina-sitemap").text(t);var r=$(".namina-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".namina-sitemap").html(i);$(".namina-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="namina-toc">';for(var s=0;s<n.feed.entry.length;s++){for(var o=0;o<n.feed.entry[s].link.length;o++){if(n.feed.entry[s].link[o].rel=="alternate"){r=n.feed.entry[s].link[o].href;break}}var u=n.feed.entry[s].title.$t;var a=n.feed.entry[s].published.$t,f=a.substring(0,4),l=a.substring(5,7),c=a.substring(8,10),h='<span class="day">'+c.replace(/^0+/,"")+'</span><span class="month">'+text_month[parseInt(l,10)]+' </span><span class="year">'+f+"</span>";i+='<li><div class="toc-date">'+h+'</div><div class="namina-icon"></div><span class="namina-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="namina-toc-wrap"><div class="namina-cat">'+t+'</div>'+i+"</div>")}})})}})}});
/*]]>*/
</script>
</b:if>

4. Kalau sudah klik SIMPAN.
5. Masuk ke menu HALAMAN > Buat HALAMAN BARU, dan masukkan judul halaman tersebut “SITEMAP”.
6. Masuk ke menu HTML bukan COMPOSE, Pastekan kode dibawah ini di halaman HTML.

[sitemap]

7. Selanjutnya silahkan klik PUBLIKASIKAN dan Selesai.

Begitulah cara membuat halaman sitemap responsive, apabila kamu ada kendala atau error silahkan komen di kolom komentar dibawah artikel ini, terima kasih.

Master Kine
Master Kine Hidup Tanpa Tujuan seperti Orang yang Kebelet Tapi Tidak Menemukan WC

Cara Membuat Schema QAPage Tanya Jawab Manual di Blogger

kinemaster.co.id – Pada kesempatan kali ini saya akan memberikan sebuah tutorial menarik bagaimana Cara membuat Schema QAPage (Halaman Tanya Jawab) Manual di Blogger dengan...
Master Kine Master Kine
1 min read

Cara Mudah Menggunakan Google Question Hub di Blogger

kinemaster.co.id – Kamu sudah taukah fitur terbaru dari Google Question Hub yang baru dirilis oleh Google baru-baru ini. Sebenarnya saya baru mendapatkan notifikasi pagi...
Master Kine Master Kine
1 min read

Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #2

kinemaster.co.id – Setelah kita membahas versi pertama yaitu Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #1 yang hanya memberikan CSS dan HTML saja,...
Master Kine Master Kine
2 min read