Cara Membuat Sitemap Otomatis Keren dan Respondsive di Blog

Cara Syarif - Membuat sitemap otomatis keren dan respondsive di blog, sebelumnya apakah Anda tau apa sih sebenarnya sitemap itu ? Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. 

Jadi intinya sitemap itu adalah peta situs web/blog, tujuannya membuat sitemap selain mempermudah mesin pencari google mengindex isi suatu web/blog, berguna juga untuk pengunjung web/blog karena dengan adanya sitemap akan mempermudah pengunjung mengexplore isi dari blog anda.

Cara membuat sitemap sebenarnya cukup beragam. Jika Anda menggunakan blog platform Blogger/Blogspot, sebagian besar sitemap dibuat dengan menggunakan kode Javascript. Membuat sitemap menggunakan Javascript memang lebih mudah dan cepat. Dan jika Anda pengguna platform Wordpress (self hosted), maka Anda cukup menggunakan plugin untuk membuat sebuah daftar isi/sitemap.

Disini saya sediakan 2 variant sitemap yang berbeda, anda tinggal memilih lebih suka yang mana untuk diaplikasikan ke blog anda nanti.

Variant ke-1

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-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:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
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{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<br />
<div id="toc">
<script src="http://yourjavascript.com/10414791501/kabarlangit-sitemap.js" type="text/javascript"></script>
<script src="ALAMAT BLOG ANDA/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Variant ke-2

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzlM2FMZ39Yk5SSWoEmQrBoGBk9vG9VhCq5g0-hYfeaOSHZMpyxliIvbaJTo-WEoUJBXO5BN9saPd-pb7RTeX45wYtg-aT1TyKX6oDtJURXSJeJ9lnhPFHC2DNvXuApbO5OUfWjOjZ3II/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYJL0cdqYJnW5T7pVVG64oxuWs3oID4e7bt5BhqVa1q4cuCF_N4vjhfYXaXhL7p_rzCNLKAfVmBR1eqBkT6Na3_JWf5U4vKrpR1dJpyzNw5Hj2EFDAaZ-xEc8RfDqBwXRPSpgievkDo5Q/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDLYNjWdA7ilYfRioEQqYiLbIt_mtVn7r4Qy6bqKUeecBQFiTHYBRn4Atnr9kNx05y5G_pQ5S_FB2rpRUouOuo0CUFhfpyWEm0uSBpXZwwNQ_RIL7wsb4nfwjV1t7F-da4wBJyAqN0Iio/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }</style><script src="https://farhanshare-blogspot-com.googlecode.com/files/sitemap%20%281%29.js" type="text/javascript"></script><script src="ALAMAT BLOG ANDA/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Baca : Cara Submit Sitemap Ke Google Webmaster Tool

Langkah - Langkah Cara Membuat Sitemapnya :

1. Pastikan Anda sudah login ke Blogger
2. Copy code HTML sitemap yang anda suka
3. Masuk ke menu Laman, letaknya ada disamping kiri dashboard, lalu klik Laman baru.
4. Pastekan code HTML sitemapnya, ingat rubah dulu ke mode HTML yah jangan compose.
5. Ubah tulisan yang di block merah dengan alamat blog Anda, beri judul halamannya dengan nama Sitemap atau sesuka Anda , lalu klik Publikasikan.

Penting : Bila anda ingin sitemapnya berscroll, untuk lebih mempermudah pengunjung anda tinggal menambahkan kode HTML berikut, sesuaikan sendiri ukuran width dan height iframenya dengan template anda.

Sitemap berscroll

<div style="border: 1px solid #eee; height: 300px; overflow: auto; padding: 10px; width: autopx;">
TARUH DISINI KODE SITEMAP ANDA
</div>

Tweet

Subscribe to receive free email updates: