Tips Triks Membuat SiteMap ala JQuery

Hallo sobat semuanya, pada kesempatan kali ini saya akan share sedikit tentang cara membuat Sitemap dengan JQuery,. Dulu saya pernah share mengenai Cara Membuat SiteMap di Blog. Sitemap ini berguna baget buat pengunjung karena memberi kemudahan kepada pengunjung blog untuk melihat semua postingan kita sob. Nah kali ini saya akan membahas tentang Sitemap juga, tapi yang ini beda sob, yaitu menggunakan JQuery., Langsung aja dibaca sob.,

Ini dia sob langkah langkah membuat SiteMap dengan JQuery

Pertama Login dulu ke blogger sobat
Masuk Desain > Edit HTML [Tampilan blogger Lawas]
Masuk Template > Edit HTML [Tampilan Blogger Baru]
Beri tanda centang pada Expand.... lalu Cari kode ]]></b:skin>
Gunakan CTRL+F ato F3 untuk memudahkan pencarian.
Copy dan Paste kan Script CSS dibawah ini tepat diatas kode ]]></b:skin>

#dafis-acc {
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
.dafis-label {
background: rgb(125,126,125);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #A1A1A1;
text-transform:uppercase;
font-weight: bold;
line-height: 2em;
margin: 1px 3px;
cursor: pointer;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-align: center;
}
.dafis-label:hover {
color: #F2F2F2;
}
.dafis-daf ol {
margin: 0 0 0 30px !important;
padding: 0 !important;
}
.dafis-daf ol li {
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
line-height: 1.3em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-top:5px;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
color:f2f2f2;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

Selanjutnya cari kode </head> dan letakan Script dibawah ini, tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Ingat!!! Cek dulu apakah ditemplate sobat sudah ada script tersebut belum, jika sudah ada tidak perlu di Copy ulang.
Setelah itu Save Template
Pasang script sitemap dibawah ini di laman, postingan ato widget sobat. Saya sarankan letakkan di Laman aja.

<script type="text/javascript" src="http://boncelizmeblog.googlecode.com/files/site-map.js"></script><script src="http://boncelizme.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

*Ganti Link berwarna merah dengan alamat site sobat.
Dan yang terakhir adalah Simpan dan lihat hasilnya.