Cara Membuat SiteMap efek jquery

SiteMap,satu wideget atau efek diblog kita yang menghimpunkan segala artikel kita yang lalu
Dengan adanya SiteMap diblog kita,memberi satu kemudahan kepada pengunjung blog untuk melihat artikel kita yang lalu berdasarkan lebel yang dibuat.

Jika artikel lalu kita  Membuat SiteMap mengikut Haribulan,kini kita membuat sitemap dengan efek jquery dimana ia memberi penampilan yang lebih menawan.

Script SiteMap efek jquery ini saya perolehi dari blogger Indonesia Hendriono,seorang pereka cipta berbagai-bagai script jquery untuk template.

Untuk membuatnya,seperti biasa,Masuk Design - Edit HTML

Seterusnya cari code ]]></b:skin> dan letakan code css dibawah ini 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);
}

Cari code </head> dan letakan code dibawah ini diatas code </head>

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

PERINGATAN:Jika didalam template sudah ada script seperti ini,jangan diletakkan lagi.
Cukup dengan satu Script seperti ini.

Save template.

Script dibawah ini untuk menampilkan sitemap,boleh diletakkan pada posting, widget atau pada halaman statis.

<script type="text/javascript" src="https://sites.google.com/site/listblogtutorial/sitemap/site-map.js"></script>
<script src="http://listblog-tutorial.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Penting: Ganti url dengan url blog anda.(warna biru)