×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Sitemap Seperti Median UI di Blogger

Jagoan Redesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Sitemap Seperti Median UI di Bloggerkelebihannya sitemap ini adalah tampilannya keren dan responsive tentunya fast loading. sitemap adalah komponen penting dalam sebuah blogger sebagai navigasi halaman yang dapat menampilkan semua daftar artikel yang di bahas dalam blog anda.


Sitemap sangat berpengaruh pada blog, selain untuk membuat halaman sitemap juga berpengaruh pada SEO blog anda. Karena sitemap (daftar isi) sangat di sarankan oleh google untuk mempermudah pengunjung mencari artikel yang ada di blog anda.

Cara Membuat Sitemap Seperti Median UI di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.
/* Blogger Sitemap Jagoan Redesign */
.jagoanredesignsitemap .sitemap-box{font-size:14px;line-height:1.58em}
.jagoanredesignsitemap .sitemap-box:not(:last-child){margin-bottom:35px;padding-bottom:25px;border-bottom:2px solid #ebeced}
.jagoanredesignsitemap .judul{margin-top:0;font-size:14px;color:#505050}
.jagoanredesignsitemap .judul:before{content:'Label: ';margin-right:5px}
.jagoanredesignsitemap ol{list-style:none;margin:0;padding:0;counter-reset:panduan-count}
.jagoanredesignsitemap li:not(:last-child){margin-bottom:10px}
.jagoanredesignsitemap li{display:flex}
.jagoanredesignsitemap li:before{content:counter(panduan-count) '.';counter-increment:panduan-count;flex-shrink:0;width:40px;font-size:22px;font-family:'PT Sans', sans-serif;line-height:normal;color:rgba(0,0,0,.15);}
.jagoanredesignsitemap li a{color:#09204C;font-size:90%;font-weight:700;font-family:'PT Sans', sans-serif}
.jagoanredesignsitemap li a:after{content:'Read more';display:block;margin-top:2px;color:#505050;font-size:11px;font-family:'PT Sans', sans-serif;font-weight:400;line-height:1.58em}
.jagoanredesignsitemap li a:hover:after{text-decoration:underline}
4. Setelah itu Simpan Tema.
5. Selanjutnya masuk ke menu HALAMAN > Buat HALAMAN BARU, dan masukkan judul halaman tersebut "SITEMAP".
6. Kemudian masuk ke menu HTML bukan COMPOSE, Pastekan kode dibawah ini di halaman HTML.
<div id='jagoanredesignsitemap' class='jagoanredesignsitemap'>

  <div class='loading'>Loading....</div>

</div>

<script>/*<![CDATA[*/

/* Blogger Sitemap Jagoan Redesign */

var toc_config = {containerId:'jagoanredesignsitemap', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'jagoanredesignsitemap',delayLoading: 0};

window.onload = function(){

!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemap-box\"><h4 class=\"judul\">'+n[g]+'</h4>',l+='<div class=\"konten\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://www.jagoanredesign.eu.org/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);

}

/*]]>*/</script>
Silahkan anda ganti www.jagoanredesign.eu.org dengan url blog anda.
7. Silahkan anda klik PUBLIKASIKAN dan Selesai.
Nah, itu adalah tutorial Cara Membuat Sitemap Seperti Median UI di Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

0

Post a Comment

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel