cara membuat sitemap blog

Jumpa lagi nih di blog albabbarrosa.com, Kali ini saya akan membagikan sedikit tutorial yaitu cara membuat sitemap di blog, beserta gaya sitemap nya.

Sitemap merupakan sebuah navigasi yang memudahkan pengunjung blog untuk melihat daftar artikel yang sudah kita buat. Meski pengunjung bisa menggunakan menu navigasi untuk melihat daftar artikel kita, namun penggunaan sitemap dirasa masih penting karena bisa memperlihatkan daftar artikel secara utuh dan gamblang. Bisa kita lihat dengan masih banyaknya blogger professional ataupun website besar yang masih menyediakan fitur sitemap dengan gaya sitemap nya masing masing.

Google pun masih menganggap penting sitemap, buktinya ketika kita mendaftarkan situs kita ke adsense ada surun untuk melengkapi privacy, disclaimer dan sitemap. Hal tersebut karena google memang sangat peduli dengan pengunjung.

Keberadaan sitemap juga memperlihatkan bahwa kita benar benar serius membangun sebuah blog atau situs. Kalau mereka yang sudah pada sukses aja masih menggunakan sitemap, kenapa kita yang berjuang tidak mengikuti saja jejak mereka, benerkan?!.

Yaudah, prolognya ga usah terlalu lama, karena ga ada juga yang baca prolog, kita langsung masuk ke tutorialnya.

Cara membuat sitemap Style 1, Keren Responsive

 

 
Ini merupakan sitemap yang cukup keren, dan cara pemasangannya pun cukup simpel. Tinggal copy paste code yang ada.
 
  • Pertama, kamu buat halaman baru pada blog kamu.
  • Jangan lupa kasih nama sitemap.
  • Ganti tampilan compose dengan tampilan html
  • Kemudian masukkan script dibawah ini.
 
 
<style type=”text/css”>
#toc{width:99%;margin:5px auto;border:1px solid #6edabd;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#6edabd;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #6edabd;
border:1px solid #fc4f69;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#6edabd;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>

 

<br />
<div id=”toc”>
<script src=”https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js” type=”text/javascript”></script>
<script src=”/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc”>
</script></div>

  • Simpan halaman tersebut.
  • Kamu bisa mengatur warna pada sitemap tersebut sesukamu, bisa kamu sesuaikan dengan warna blog kamu.
  • Untuk mengatur warna judul label dan background label ganti pada code berikut;  .labl{color:#6edabd;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background: #6edabd;
  • Code dengan blok warna merah untuk judul label, dan kode dengan blok warna hijau untuk background label.

Cara Membuat Sitemap Style 2, Simpel Responsive

 
Pada style ke dua ini, meskipun tampilan sangat simpel fast loading, tetapi pemasangannya tidak sesimpel pada style yang pertama.
  • Pertama kamu bikin halaman baru pada blog kamu
  • Kasih judul sitemap jangan lupa
  • Ubah tampilan compose dengan tampilan html
  • Pastekan code berikut
 
<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>
  • Save kalau sudah
  • Disini langkah belum selesai ya.
  • Masuk ke pengaturan > edit html
  • Kemudian pastekan code berikut diatas kode ]]></b:skin>
 
/* Sitemap Blogger Sederhana */
#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;}
  • Save, dan coba lihat sitemap yang sudah kamu buat
  • Style diatas urut berdasarkan waktu postingan, jika kamu ingin membuat sitemap urut berdasarkan abjad ganti code pada halaman sitemap dengan code dibawah
 
<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>

 

  • Save, dan kemudian lihat hasilnya.

Cara Membuat Sitemap Style 3, Keren Responsive

untuk style yang ke-3 ini sangat mudah sekali pemasangannya sama seperti pada style 1, hanya saja dengan tampilan yang agak berbeda.

  • Buat halaman baru
  • Kasih nama sitemap
  • Ganti tampilan compose dengan html
  • dan pastekan kode di bawah ini
<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #275827;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Kelebihan Memasang Sitemap

  • Artikel cepat terindeks oleh google, kata kebanyakan blogger sih begitu
  • Memberikan layanan daftar isi atau archive untuk pengunjung blog
  • Blog lebih kelihatan berkualitas, tergantung artikelnya juga sih
Mungkin cukup sekian tutorial kali ini. Cukup mudah bukan. Semoga tutorial mudah dipahami dan di aplikasikan. Silahkan berkomentar jika ada sesuatu yang mau ditanyakan. Sampai jumpa di tutorial berikutnya. . . .

 

2 comments
  1. Bagus nih tampilan sitemapnya, selain simple tampilan oke dan nyaman untuk dibaca dan dicek pun gampang banget … Oia udah aku terapin loh di blog ku sitemap dengan model yang kedua. Nama blognya Blog Kang Yusuf.. Saling dukung dan support terus yaa mas Albab. Terima kasih atas script kode sitemapnya…

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

You May Also Like

Membuat Subdomain free Gratis Tanpa hosting Dengan Domain Utama

Halo sobat blogger Indonesia, sebelumnya saya ucapin dulu “Selamat Hari Blogger Nasional…

Saran Template Untuk Blog Toko Online Responsive

Akhir akhir ini banyak blogger ataupun marketing online yang mencoba menjual produknya…

Pilih Template Blogger Gratis Legal Atau Gratis Tapi Ilegal

Selain artikel berkualitas, hal yang sangat diperhatikan oleh blogger adalah template yang…

Cara Membuat Menu Scroll Ke Samping Simpel di Blog

Cara Membuat Menu Scroll Ke Samping – albabbarrosa.com Halo sobat blogger semua,…