Tutorial Membuat SiteMap Mirip IDNTHEME

Tutorial Membuat SiteMap Mirip IDNTHEME

Tutorial Membuat SiteMap Mirip IDNTHEME - Seperti yang kita ketahui bahwa fungsi sitemap blog adalah sebuah peta situs yang berisikan seluruh isi blog. Dimana dengan adanya sitemap ini, mesin pencari seperti Google, Bing, ataupun Yahoo akan dapat mengcrawl setiap URL yang ada di suatu situs dengan mudah, yang akhirnya akan berdampak pada cepatnya pengindeksan konten di halaman pencarian.

Cara membuat sitemap ala idntheme ini adalah hasil Request dari Forum/Group Facebook Blogger Indonesia, dimana ada salah satu anggota nya yang ingin membuat sitemap seperti yang dipakai IDNTHEME milik mbak Arlina. Tapi mungkin masih kesulitan, dan tak perlu waktu lama saya segera membuatkan tutorial ini.


Jangan lupa untuk check2 artikel sebelum ini yaa Cara Membuat Slider Recent Post by Label di Blog

Cara Membuat Sitemap Ala IDNTheme

    • Pertama Copy dan terapak CSS berikut, dan letakkan sebelum tag ;/style> atau tepat di atas </b:skin>
    • /* Sitemap - Codepelajar.com */
      .pelajar-sitemap{position:relative;margin:30px auto}
      .pelajar-toc-wrap{display:inline-block;width:100%}
      .pelajar-toc-wrap .pelajar-cat{background:#333;border-radius:2px;color:#fff;font-size:16px;font-weight:700;padding:10px 20px;border-radius:3px;text-transform:capitalize}
      .pelajar-toc::before{background:#333;bottom:0;content:"";left:20%;margin-left:-10px;position:absolute;top:0;width:4px}
      .pelajar-toc{margin:0;padding:30px 20px;position:relative}
      .pelajar-sitemap ul.pelajar-toc{margin:0;padding:30px 0;list-style-type:none}
      .pelajar-toc li{list-style:none;margin:0;padding:0;position:relative}
      .pelajar-toc > li .toc-date{color:#999;display:block;font-size:14px;font-weight:bold;position:absolute;text-transform:uppercase;top:25px;width:15%}
      .pelajar-toc > li .pelajar-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:21.2%;line-height:10px;margin:0 0 0 -25px;position:absolute;text-align:center;text-transform:none;top:30px;width:10px}
      .pelajar-toc > li .pelajar-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}
      .pelajar-toc > li .pelajar-post{background:#f5f5f5;border-radius:5px;display:block;font-size:15px;margin:0 0 15px 23%;padding:25px 30px;position:relative}
      .pelajar-toc > li .pelajar-post a{color:#333;font-weight:700}
      .pelajar-toc > li:last-child .pelajar-post{margin:0 0 0 23%}
      .pelajar-toc > li .pelajar-post a:hover{color:#999}
      @media (max-width:768px){.pelajar-toc > li .pelajar-icon{display:none}}
        
    • Lalu Copy dan terapkan Script Berikut sebelum tag </head>, dan jika sudah Save Template.
    • <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="pelajar-sitemap"></div>');$(".post-body .pelajar-sitemap").text(t);var r=$(".pelajar-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".pelajar-sitemap").html(i);$(".pelajar-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="pelajar-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="pelajar-icon"></div><span class="pelajar-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="pelajar-toc-wrap"><div class="pelajar-cat">'+t+'</div>'+i+"</div>")}})})}})}});
      /*]]>*/</script>
        
  1. selanjutnya, buatlah sebuah halaman baru berikan judul Sitemap. Dan setelah itu buka Tab HTML lalu tuliskan [sitemap] seperti gambar di bawah.
  2. Jika sudah Publishlah halaman tersbut dan lihat hasilnya.

Mungkin cukup sekian tutorial kali semoga bermanfaat sob, jangan lupa jika ingin menulis ulang artikel2 Codepelajar sertakan sumber ya, bijaklah dalam menulis konten jika karya tulisan mu ingin di hargai.


Jika ada kesulitan bisa coba hubungi kami dengan klik tombol berikut ini:




Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel