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.
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&max-results=9999&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, jika kamu seorang pemula ikuti langkah-langkah berikut ini untuk membuat halaman sitemap blog.- Masuk ke Dashboard Blogger Anda.
- Klik Menu Halaman (Pages).
- Buat Halaman Baru Dan Tambahkan Judul, ex:Sitemap Page
- Kemudian Melalui HTML View Masukkan Script Sitemap yang saya bagikan di atas.
- Lanjutkan Dengan Menambahkan Kode Css Sitemap, dan
- Tambahkan juga script pemanggil sitemap.
- Publikasikan Halaman Sitemap Blog Anda.
Keunggulan
Ada beberapa kelebihan jika anda menggunakan sitemap ini untuk halaman sitemap di blog anda, diantaranya adalah sebagai berikut.- Halaman Sitemap Ringan (Fast Loading).
- Tidak ada credit link.
- Mudah di pasang, responsive dan support di banyak browser.
- Desain Halaman Sitemap Keren Dan Artistik.
- Lebih oke jika dilihat melalui seluler (Smartphone).
- Tidak membebani halaman lain di blog 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.