Template Kompi Ajaib Gratis: #MODUL 8 TUTORIAL MEMBUAT SITEMAPS GAYA TIMELINE DI BLOG

Hai sobat MD, jumpa lagi bareng mimin disini. Oke kali ini kita akan bahas #modul 8 tentang tutorial membuat sitemaps gaya timeline di blog untuk meningkatkan traffic dan SEO Optimization tentunya. Bagi sobat yang belum tau apa itu sitemaps, jadi sitemaps adalah halaman khusus yang terdiri atas kumpulan artikel atau postingan yang mana sudah tersusun secara sistematis.

Lalu, fungsinya untuk apa sih? Sitemaps berfungsi untuk memudahkan pengunjung atau visitor blog dalam menelusuri postingan-postingan yang ada pada situs/blog sobat, atau kami sebutnya safari post.

Seperti biasa, jika sobat belum membaca ulasan pada modul sebelumnya bisa lihat dulu di : SITEMAPS. Baca secara urut dan jangan diloncati agar memudahkan dalam proses memahami konsep atau materi.

Sebenarnya tidak sulit untuk membuat sitemaps otomatis dengan tampilan yang elegan, minimalis, dan kekinian. Sobat hanya perlu mengikuti step by step dengan cermat, dijamin 100% bisa mengaplikasikannya secara mandiri. Baiklah langsung saja simak ulasan berikut ini.

1. Pertama, login ke dashboard blogger

2. Kedua, klik menu TEMA lalu klik EDIT HTML, kemudian klik CTRL+F cari kode </head> dan paste kan kode berikut ini tepat di atas kode </head> tersebut, lalu klik SIMPAN TEMA

 <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>

3. Ketiga, klik menu HALAMAN kemudian pilih HALAMAN BARU, selanjutnya paste-kan kode berikut pada mode HTML bukan COMPOSE

 
[sitemap]

4. Keempat, silahkan klik PUBLIKASIKAN lalu lihat hasilnya. Jika berhasil maka tampilannya akan seperti gambar berikut, apabila sesuai dengan gambar artinya sobat sudah menuntaskan modul 8 ini

Sekian pemaparan materi untuk #modul 8 terkait tutorial membuat sitemaps, apabila ada yang ingin ditanyakan bisa melalui kolom komentar di bawah. Untuk selanjutnya yaitu #modul 9 tentang tutorial membuat kolom komentar disqus di blog. Bisa lihat di : SITEMAPS

Terima kasih sudah berkunjung, semoga bisa bermanfaat. Selamat belajar dan jangan lupa tetap #dirumahaja. Btw bentar lagi mimin mau ngadain give away 500+ template blog premium khusus bagi pengunjung setia website master dzgn. Nantikan info selanjutnya ya, dan selalu update informasi terbaru dari web master dzgn.

Halaman

#MODUL 8 TUTORIAL MEMBUAT SITEMAPS GAYA TIMELINE DI BLOG