√ Cara Membuat Sitemap dengan Gaya Timeline

Cara Membuat Sitemap dengan Gaya Timeline

5/20/2018

Kali ini Namina akan membahas dan menjelaskan bagaimana cara-cara atau langkah-langkah yang dapat Anda ikuti dan lakukan dalam Cara Membuat Sitemap dengan Gaya Timeline.

Pembuatan sitemap bertujuan untuk mempermudah navigasi pengunjung dalam menelusuri postingan-postingan dalam suatu blog. Selain itu, sitemap juga memudahkan robot crawler mesin pencari dalam menjelajahi blog. Blog akan dinilai lebih terstruktur apabila memiliki halaman sitemap khusus.

Cara Membuat Sitemap dengan Gaya Timeline

Oke, langsung saja silakan ikuti langkah-langkah di bawah ini

Buka halaman Blogger Anda, klik menu Tema, klik tombol Edit HTML dan tambahkan kode ini sebelum </head>

<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:#999;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 #f5f5f5 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:#f5f5f5;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>

Setelah selesai, klik tombol Simpan tema

Selanjutnya pilih menu Halaman kemudian klik tombol Halaman baru