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
- Pertama, kamu buat halaman baru pada blog kamu.
- Jangan lupa kasih nama sitemap.
- Ganti tampilan compose dengan tampilan html
- Kemudian masukkan script dibawah ini.
#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&alt=json-in-script&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.
- Pertama kamu bikin halaman baru pada blog kamu
- Kasih judul sitemap jangan lupa
- Ubah tampilan compose dengan tampilan html
- Pastekan code berikut
<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 .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
<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: ' – <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
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…
wah langsung di terapkan nih. gaya sitemap style 2 memang sang fast dan responsif mas. makasih supportnya mas. langsung meluncur ke blog kang yusuf.