Buat Sitemap Dengan Gaya Timeline

Sitemap merupakan kumpulan informasi yang berada pada situs yang memuat banyak URL atau daftar semua link / URL yang ada disitus kamu, sitemap sendiri berfungsi sebagai peta untuk search engine agar cepat mengindex url baru yang ada didalam website kamu. Jadi fungsi sitemap ini bertujuan mempermudah navigasi pengunjung dalam menelusuri postingan dalam sebuah blog. Jadi kali ini saya akan memberikan tutorial membuat sitemap bergaya timeline.

Berikut tutorial membuat sitemap dengan gaya timeline

Pertama kita harus membuka Blogger anda, lalu kemudian kalian klik Tema. Klik tombol Edit HTML lalu tambahkan kode dibawah ini sebelum </head>

<b:if cond='data:blog.pageType == "static_page"'>
<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:"";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 > li .toc-date{color:#999;display:block;font-size:14px;font-weight:bold;position:absolute;text-transform:uppercase;top:25px;width:15%}
.namina-toc > 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 > li .namina-post::after{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:10px;content:"";height:0;pointer-events:none;position:absolute;right:100%;top:auto;width:0}
.namina-toc > 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 > li .namina-post a{color:#333;font-weight:700}
.namina-toc > li:last-child .namina-post{margin:0 0 0 23%}
.namina-toc > li .namina-post a:hover{color:#999}
style>
<script type='text/javascript'>
/*
$(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;nvar t=t.join("/");postbody.html('
');$(".post-body .namina-sitemap").text(t);var r=$(".namina-sitemap").text().split("/");var i="";for(get=0;get""+r[get]+""}$(".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='
';for(var s=0;sfor(var o=0;oif(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=''+c.replace(/^0+/,"")+''+text_month[parseInt(l,10)]+' '+f+"";i+='
'+h+'
+u+"
"}i+="
";e.replaceWith('
'+t+'
'+i+"
")}})})}})}});
/*]]>*/
script>
b:if>

Setelah selesai, Klik Simpan Tema.

Lalu setelah itu kita klik menu Halaman dan setelah itu pilih Halaman Baru. 

Kemudian klik tombol HTML lalu tambahkan kode pemanggil dibawah ini

[sitemap]

Setelah itu klik Publikasikan sob, selesai untuk hasilnya sobat bisa melihatnya di bawah ini.

Demo Click here

Oke cukup sekian tutorial kali ini terima kasih kepada sobat online yang telah membaca artikel kali ini mohon maaf jika ada kesalahan dalam artikel ini, yang mempunyai saran dan masukan silahkan tinggalkan di kolom komentar ya sob. Terima kasih dan sampai jumpa di artikel selanjutnya.