Tutorial Cara Membuat Sitemap Static Responsive Pada Blog

Cara Merubah sitemap blog dari default menjadi sebuah halaman yang dapat memunculkan isi dari semua konten pada blog sangatlah baik untuk pembaca maupun robot crawler selain itu menggunakan sitemap dengan tampilan yang bagus juga dapat mempercantik blog sendiri dan lebih responsive tentunya.


Nah sekedar informasi mengenai Sitempas, merupakan salah satu alat bantu untuk para webmaster dalam mempermudah pengenalan peta situs di dalam website/blog dan dengan begitu mesin pencari/ robot crawler dapat dengan mudah menjelajah halaman-halaman yang ada di dalamnnya (sumber : wikipedia)


Sitemaps sendiri ada dua jenis dalam pemformatan yakni HTML dan XML, Perbedaan pada sitempas tersebut adalah sebagai berikut ini :


• Sitemaps HTML : Merupakan sebuah sitemaps yang menjadikan sebuah rujukan atas link-link postingan yang ada, gunanya adalah sebagai petunjuk kepada visitor tentang postingan apa saja yang ada pada blog.


• Sitempas XML : Merupakan sebuah sitemaps yang bertujuan sebagai petunjuk atas robot crawler dalam memberitahukan link post, label, dan data-data lainnya di blog dengan begini robot pencari/crawler dapat lebih mudah menemukan link-link yang ada pada blog.


Nah pada postingan saya akan membagikan sebuah cara membuat Sitemaps HTML yang bertujuan sebagai petunjuk kepada visitor tentang postingan yang ada simak baik-baik di bawah ini :

Langkah Pertama #1
Buka Blog kalian > Masuk Menu Tema > dan Edit HTML
Lalu cari kode berikut ini </style> atau ]]></b:skin> menggunakan CTRL + F  lalu pastekan kode berikut ini diatas kode tersebut:

/* Sitemap Blogger Responsive */ #sitemap .title {background-color:#448ccb; color:#fff; font-size:150%; font-weight:400; text-align:center; margin-bottom:20px; padding:15px;} #sitemap a {color:#212121; text-decoration:none; transition:all .3s ease;} #sitemap a:hover {color:#000;} #sitemap ol {margin:0px; padding:0px;} #sitemap ol li {color:#212121; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}

Lalu klik simpan

Langkah Kedua #2

Buka Blog > Halaman > Buat Halaman Baru dan Berikan Judul "Peta Situs" atau bebas seterah kalian mau diberi judul apa, lalu masuk dalam mode HTML Seperti gambar berikut ini :

lalu copy dan paste kode berikut ini dalam halaman tersebut :

<div id="sitemap">Loading...</div>

<script> //<![CDATA[

var start=1;var max=150;var sitemapArr=new Array();function runsitemap(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap(root){var elem=document.getElementById('sitemap');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemapArr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runsitemap()} else{var print='',a=sitemapArr.sort(function(a,b){return a.judul>b.judul?1:-1});for(var x=0;x<a.length;x++){print+='<li><a href=\"'+a[x].url+'\" title=\"'+a[x].judul+'\">'+a[x].judul+'</a></li>'} elem.innerHTML='<div class=\"judul\">Total Post: '+a.length+'</div><ol>'+print+'</ol>'}}} runsitemap();

//]]> </script>

dan klik publikasikan dan lihat maka akan tampil halaman sitemaps seperti gambar berikut ini :

Sitemaps tersebut akan tampil berdasarkan huruf abjad pada blog kalian namun jika kalian ingin mengubah sitemaps tersebut menjadi urutan sesuai tanggal publish di urutan pertama maka kode pada halaman sebelumnya diganti dengan kode berikut di bawah ini :

<div id="sitemap">Loading...</div>

<script> //<![CDATA[

var start=1;var max=150;var sitemapArr=new Array();function runsitemap(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap(root){var elem=document.getElementById('sitemap');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemapArr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runsitemap()} else{var print='';for(var x=0;x<sitemapArr.length;x++){print+='<li><a href=\"'+sitemapArr[x].url+'\" title=\"'+sitemapArr[x].judul+'\">'+sitemapArr[x].judul+'</a></li>'}

elem.innerHTML='<div class=\"title\">Total Post: '+sitemapArr.length+'</div><ol>'+print+'</ol>'}}} runsitemap();

//]]> </script>

Lalu publishkan kembali maka hasil nya akan terlihat seperti gambar berikut di bawah ini :

Bagaimana menurutmu cantik bukan, sitemaps diatas dan sangat mudah dibuatnya bukan. terimakasih telah berkunjung jika kalian suka dengan postingan ini kalian dapat membagikan ke sosial media yang anda gunakan agar menjadi pengetahuan seksama.