Cara Membuat Sitemap Blog Dengan Tampilan Yang Keren

Hai Blogger, Saya baru saja membuat halaman sitemap di blog ini dengan desain yang sederhana namun tampilan-nya juga cukup keren terlebih ketika dilihat melalu smartphone. Desain sitemap yang saya buat mengadopsi style card dengan tata letak zigzag namun tetap rapi dan indah dilihat.

Saya fikir mungkin teman-teman blogger juga ingin membuat halaman sitemap yang serupa dengan sitemap blog saya, oleh karena itu saya putuskan untuk berbagi tutorial dan script sitemap yang saya gunakan.

Sebelum ke tutorial nya mungkin teman-teman blogger ingin melihat terlebih dahulu halaman sitemap blog yang saya buat, jadi silahkan buka halaman atau klik url sitemap blog saya.
Sitemap Page
Jika anda tertarik dengan desain sitemap blog yang saya buat silahkan lanjutkan membaca, dan saya akan mulai dengan membagikan script sitemap dan kode cssnya kepada teman-teman blogger, ini 100% geratis,tanpa credit link dan dapat memuat lebih banyak posts blog anda.[ads id="ads1"]

Script Untuk Membuat Sitemap

<script>
var postTitle=new Array,postUrl=new Array,postPublished=new Array,postDate=new Array,postLabels=new Array,postRecent=new Array,sortBy="titleasc",numberfeed=0;function cordialbloggersitemap(t){!function(){if("entry"in t.feed){var e=t.feed.entry.length;numberfeed=e,ii=0;for(var s=0;s<e;s++){for(var o,i=t.feed.entry[s],p=i.title.$t,l=i.published.$t.substring(0,10),r=0;r<i.link.length;r++)if("alternate"==i.link[r].rel){o=i.link[r].href;break}var a="";for(r=0;r<i.link.length;r++)if("enclosure"==i.link[r].rel){a=i.link[r].href;break}var n="";if("category"in i)for(r=0;r<i.category.length;r++){var b=(n=i.category[r].term).lastIndexOf(";");-1!=b&&(n=n.substring(0,b)),postLabels[ii]=n,postTitle[ii]=p,postDate[ii]=l,postUrl[ii]=o,postPublished[ii]=a,postRecent[ii]=s<10,ii+=1}}}}(),sortPosts(sortBy="titledesc"),sortlabel(),displayToc()}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s;s=postPublished[t];postPublished[t]=postPublished[e],postPublished[e]=s;s=postRecent[t];postRecent[t]=postRecent[e],postRecent[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o),"orderlabel"==t&&postLabels[s]>postLabels[o]&&e(s,o)}function sortlabel(){sortPosts(sortBy="orderlabel");for(var t=0,e=0;e<postTitle.length;){temp1=postLabels[e],firsti=t;do{t+=1}while(postLabels[t]==temp1);if(e=t,sortPosts2(firsti,t),e>postTitle.length)break}}function sortPosts2(t,e){function s(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s;s=postPublished[t];postPublished[t]=postPublished[e],postPublished[e]=s;s=postRecent[t];postRecent[t]=postRecent[e],postRecent[e]=s}for(var o=t;o<e-1;o++)for(var i=o+1;i<e;i++)postTitle[o]>postTitle[i]&&s(o,i)}function displayToc(){for(var t=0,e=0;e<postTitle.length;){temp1=postLabels[e],document.write(""),document.write('<div class="sitemap-cordialbloger"><h5>'+temp1+'</h5><div class="sitemap-wrap">'),firsti=t;do{document.write("<p>"),document.write('<a " href="'+postUrl[t]+'">'+postTitle[t]),1==postRecent[t]&&document.write(" - <strong><span>New!</span></strong>"),document.write("</a></p>"),t+=1}while(postLabels[t]==temp1);if(e=t,document.write("</div></div>"),sortPosts2(firsti,t),e>postTitle.length)break}}
</script>

Kode CSS

<style>
.sitemap-cordialbloger{position:relative;display:block;margin:14px 0 20px;}
.sitemap-cordialbloger h5{font-size:16px;background:-webkit-linear-gradient(left,#ad39e4 0%,#3f59d7 100%);color:#fff;padding:4px 12px;border-radius:5px;line-height:80px;width:250px}
.sitemap-cordialbloger h5:before{content:"Category -";float:left;padding-right:4px}
.sitemap-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;border-radius:5px}
.sitemap-wrap p{width:calc((100% - 10px) / 2);margin:3px 0;background-color:#1f2024;border-radius:5px}
.sitemap-wrap p a{position:relative;font-size:15px;line-height:30px;display:block;margin:0 auto;padding:14px;font-weight:bold;color:#fff}}
</style>

Script Pemanggil

<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=cordialbloggersitemap" type="text/javascript">

Tutorial Membuat Halaman Sitemap Di Blogspot

Instal kode atau script sitemap, css dan script pemanggil sitemap secara beruntun ke halaman sitemap anda melalui edit html, ikuti langkah-langkah untuk membuat halaman sitemap berikut ini.
  1. Masuk ke Dashboard Blogger Anda.
  2. Klik Menu Halaman (Pages).
  3. Buat Halaman Baru Dan Tambahkan Judul, ex:Sitemap Page
  4. Kemudian Melalui HTML View Masukkan Script Sitemap yang saya bagikan di atas.
  5. Lanjutkan Dengan Menambahkan Kode Css Sitemap, dan
  6. Tambahkan juga script pemanggil sitemap.
  7. Publikasikan Halaman Sitemap Blog Anda.
Selesai...! Akan lebih baik jika sebelum halaman sitemap dipublikasikan, pada bagian deskripsi diisi dengan teks yang menjelaskan secara ringkas tentang halaman sitemap blog anda.

Keunggulan

Ada beberapa kelebihan jika anda menggunakan sitemap ini untuk halaman sitemap di blog anda, diantaranya adalah sebagai berikut.
  1. Halaman Sitemap Ringan (Fast Loading).
  2. Tidak ada credit link.
  3. Mudah di pasang, responsive dan support di banyak browser.
  4. Desain Halaman Sitemap Keren Dan Artistik.
  5. Lebih oke jika dilihat melalui seluler (Smartphone).
  6. Tidak membebani halaman lain di blog anda.
Nah, jika blog blog anda belum memiliki halaman sitemap atau ingin mengganti halaman sitemap dengan desain ini silahkan comot script sitemap dan kode css-nya kemudian pasang dihalaman sitemap anda.

Ini geratis dan tidak mengandung spam yang meresahkan, plugin sitemap page ini tidak bergantung pada situs lain kecuali blogger, dan tentunya itu akan memberikan kesan bahwa blog anda cukup profesional dan berdiri sendiri di blogger.com.
Lebih baru Lebih lama
Close