Cara Membuat Sitemap Ala Zkrip

Pada kesempatan ini admin Zkrip akan meberikan tutorial Cara Membuat Sitemap Ala Zkrip . Seperti biasanya, admin mendapatkan kode-kodenya dari hasil inspect sana-sini. Sitemap yang unik dan tentunya responsive menjadi salah satu fitur unggulan sitemap buatan Zkrip kali ini.Buat anda yang memiliki tampilan blog yang cantik tidak ada salahnya untuk menambahkan pula sitemap cantik ini.Untuk demo atau previewnya bisa ilihat langsung di blog ini.

Langsung saja kita simak tutorialnya.

• Copy kode HTML berikut ini di atas kode </head>

<style type='text/css'>
.zkrip-sitemap { border-bottom: 4px solid #444; }
.zkrip-toc-wrap { display: inline-block; font-family: &quot;Century Gothic&quot;,sans-serif; width: 100%; }
.zkrip-toc-wrap .zkrip-cat { background: #444; border-radius: 2px; color: #fff; font-size: 15px; font-weight: bold; padding: 10px 20px; text-transform: capitalize; }
.zkrip-toc::before { background: #444; bottom: 0; content: &quot;&quot;; left: 20%; margin-left: -10px; position: absolute; top: 0; width: 4px; }
.zkrip-toc { margin: 0; padding: 30px 20px; position: relative; }
.zkrip-toc li { list-style: none; margin: 0; padding: 0; position: relative; }
.zkrip-toc &gt; li .toc-date { color: #999; display: block; font-size: 14px; font-weight: bold; position: absolute; text-transform: uppercase; top: 25px; width: 15%; }
.zkrip-toc &gt; li .zkrip-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: 20%; line-height: 10px; margin: 0 0 0 -25px; position: absolute; text-align: center; text-transform: none; top: 30px; width: 10px; }
.zkrip-toc &gt; li .zkrip-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; }
.zkrip-toc &gt; li .zkrip-post { border: 2px solid #444;background: #f5f5f5; border-radius: 5px; display: block; font-size: 15px; line-height: 15px; margin: 0 0 15px 23%; padding: 25px 30px; position: relative; }
.zkrip-toc &gt; li .zkrip-post a { color: #444; font-weight: bold; }
.zkrip-toc &gt; li .zkrip-post a:hover { color: #999; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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="zkrip-sitemap"></div>');$(".post-body .zkrip-sitemap").text(t);var r=$(".zkrip-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".zkrip-sitemap").html(i);$(".zkrip-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="zkrip-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="zkrip-icon"></div><span class="zkrip-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="zkrip-toc-wrap"><div class="zkrip-cat">'+t+'</div>'+i+"</div>")}})})}})}});
  /*]]>*/
</script>
</b:if>

• Untuk menerapkan kedalam halaman blog silahkan copy kode berikut ke dalam mode HTML

[sitemap]

• Save

Demikian postingan dari saya, semoga bisa membantu sobat blogger.

Tweet

Postingan terkait:

Ditulis Tarsisius — Februari 01, 2017 — Add Comment — Tutorial