Kebanyakan Blogger pasti sudah tahu apa itu sitemap, dimana halaman sitemap akan mempermudah para pengunjung untuk menelusuri label demi label yang ada di seluruh isi blog atau website. karena banyak manfaatnya yang begitu besar maka hampir sebagian besar para blogger menanamkan halaman sitemap di halaman kesayangannya. macam corak dan bentuk Membuat sitemap indah SEO friendly bertebaran di internet, ada yang kesan minimalis sampai yang beraneka warna hiasan di sana-sini.
Sitemap ini sangat indah menurut saya, tentunya dengan tampil cantik akan semakin membuat kerasan tamu di blog kita. Contoh hasil sitemap ini ada pada halaman sitemap di blog ini , langsung saja prakteknya....
1. Masuk ke akun blogger sobat dulu
2. Masuk ke menu halaman dan buat halaman baru3. Silahkan kasih judul SiteMap atau terserah sobat saja :)
4. Kemudian dalam keadaan mode edit html silahkan copy paste script di bawah ini :
= = = = = =
<div 1px="1px" solid="solid" style="height: 1200px; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;">
<style type="text/css"> /*Outer Border ------------------*/ #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);} /*Label Color and Background ------------------*/ .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{text-transform:uppercase;} /*Latest Post Info ------------------*/ .new{color:#FF5F00;font-weight:bold;font-style:italic} /*Post Title List ------------------*/ .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 /> <br /><br /> <div id="toc">
<script src="http://dvslabs.googlecode.com/files/customizable-TOC.js" type="text/javascript"> </script><br /> <script src="http://seorealita.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div>
</div>
6. Simpan perubahan
<div 1px="1px" solid="solid" style="height: 1200px; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;">
<style type="text/css"> /*Outer Border ------------------*/ #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);} /*Label Color and Background ------------------*/ .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{text-transform:uppercase;} /*Latest Post Info ------------------*/ .new{color:#FF5F00;font-weight:bold;font-style:italic} /*Post Title List ------------------*/ .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 /> <br /><br /> <div id="toc">
<script src="http://dvslabs.googlecode.com/files/customizable-TOC.js" type="text/javascript"> </script><br /> <script src="http://seorealita.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div>
</div>
= = = = = ==
5. Untuk setting lebar dan tingginya silahkan ubah script nilai height dan width-nya. dibawah ini contoh tinggi saya buat 1200px dan lebar saya buat auto alias menyesuaikan lebar halaman sitemap
5. Untuk setting lebar dan tingginya silahkan ubah script nilai height dan width-nya. dibawah ini contoh tinggi saya buat 1200px dan lebar saya buat auto alias menyesuaikan lebar halaman sitemap
= = = =
<div 1px="1px" solid="solid" style="height: 1200px; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;">
<div 1px="1px" solid="solid" style="height: 1200px; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;">
= = = =
6. Simpan perubahan
