Cara Membuat Sitemap Keren di Blog - Beberapa waktu yang lalu saya sempat membagikan cara membuat atau memasang sitemap di blog. Oh, iya. Sitemap dapat dikatakan sebagai daftar isinya sebuah blog. Sitemap memegang peranan yang penting dalam hal SEO. Dimana, mesin pencari menggunakan sitemap untuk mengindeks post - post pada blog. Tutorial yang dibahas kali ini sebenarnya tidak jauh berbeda dengan tutorial sitemap yang dibahas sebelumnya. Hanya saja, sitemap yang dibahas kali ini telah dikustomisasi, sehingga terlihat lebih keren dan menarik. Cara memasangnya pun sama mudahnya dengan sitemap yang pernah dibahas sebelumnya. Untuk previewnya, silahkan lihat gambar dibawah. Atau, jika mau melihat previewnya langsung, klik disini.
Oke, to the point. Berikut ini cara memasang atau membuat sitemap keren di blog.
1. Buka Blogger, dan masuk ke Laman.
3. Klik tombol HTML yang berada di pojok kiri atas. (disebelah tombol Compose).
4. Copy dan pastekan kode panjang (hehehe) berikut.
<style type="text/css">#tabbed-toc {margin:0 auto;background-color:#8A94F0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#000;}#tabbed-toc .loading {display:block;padding:5px 10px;font:normal bold 12px Tahoma,Sans-Serif;color:white;}#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {margin:0 0;padding:0 0;list-style:none;}#tabbed-toc .toc-tabs {width:20%;float:left;}#tabbed-toc .toc-tabs li a {display:block;font:normal bold 10px/28px Tahoma,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#000;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer;}#tabbed-toc .toc-tabs li a:hover {background-color:#C4C9F8;color:black;}#tabbed-toc .toc-tabs li a.active-tab {background-color:#181D67;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text; */}#tabbed-toc .toc-content,#tabbed-toc .divider-layer {width:80%;float:right;background-color:white;border-left:5px solid #181D67;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}#tabbed-toc .divider-layer {float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7);}#tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px Tahoma,Sans-Serif;}#tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:11px;color:#051466;line-height:20px;height:20px;padding:0 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 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}#tabbed-toc .panel li:nth-child(even) {background-color:#eee;}#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:#999;color:none;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:#224C19;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);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 .divider-layer,#tabbed-toc .panel li time {display:none;}}</style><br /><div id="tabbed-toc"><span class="loading">Memuat Sitemap... :)</span></div><script type="text/javascript">var tabbedTOC = {blogUrl: "http://xxpc123xx.blogspot.com",containerId: "tabbed-toc",activeTab: 1,showDates: false,showSummaries: false,numChars: 200,showThumbnails: false,monthNames: ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink: true,maxResults: 9999,preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")};</script><script src="https://iwan-namikaze.googlecode.com/files/sitemapkeren.js" type="text/javascript"></script>
Keterangan :
Ganti tulisan Memuat Sitemap...:) menjadi tulisan yang diinginkan. Tulisan ini akan muncul apabila browser memuat sitemap.
Tulisan yang berwarna merah merupakan alamat blog Anda (http://xxpc123xx.blogspot.com). Ganti sesuai dengan judul blog Anda.
showDates: false, ganti nilainya menjadi true apabila ingin menampilkan tanggal posting
showSummaries: false, ganti nilainya menjadi true apabila Anda ingin menampilkan ringkasan dari posting Anda.
showThumbnails: false, fungsinya untuk menampilkan Thumbnail (gambar dari posting Anda) dari posting Anda. Jika Anda ingin menampilkan thumbnail, ganti menjadi true.
newTabLink: true, ganti nilainya menjadi false untuk membuat link tidak membuka di laman / tab baru.
5. Jangan lupa, isikan juga isian Judul laman sesuai dengan keinginan Anda. Misalnya: Daftar Isi (Sitemap). Berikut ini contoh peletakkan kode HTML-nya:
6. Terakhir, klik Publikasikan.
Untuk menambahkan tulisan Sitemap pada menu bar Anda, silahkan klik disini. Atau, jika Anda menggunakan menu bar tanpa HTML yang pernah saya bahas sebelumnya, klik disana. Selamat mencoba! Bantu saya dengan men-Share artikel ini (berikan pula Google +!), dan tolong tinggalkan komentar! Terima kasih, dan salam blogger!
