> Update >>
Home » » Cara Membuat SiteMap efek jquery

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)

2 comments:

PPOB BII said...

Colom pencarian artikel saya cari tidak ada, apa tersembunyi? kalau ada lebih Mantab sob


Salam,
Hari
PPOB

arie said...

Good article, thank's bro

Post a Comment

 
list blog tutorial
Ambil banner

Template

More on this category »
Submit ExpressSEO Tools My Ping in TotalPing.com

tutorial

© All Rights Reserved | Best View With Google Chrome