JQuery Slider untuk blogger :

Hi, sobat-sabat blogger sekalian. Setelah saya mejelajah antara blog satu ke blog lainnya. Aq tertarik dengan suatu gambar-gambar yang bergerak secara otomatis disebelah atas pada suatu blog. JQueri Slider lah namanya.
Kemudian aku berusaha mempelajarinya dan mencoba menerapkannya di blogku sendiri.

Mungkin sebagian dari anda bertanya-tanya. Seperti apa JQuer Slider itu. Sebagai contoh kalian dapat melihatnya di bagian atas blogku.

Penjelasan :
Slider ato JQuerySlider adalah slide-slide berisi berbagai gambar beserta link pada setiap gambarnya, yang secara otomatis berganti-ganti sendiri layaknya slide gambar yg diset automatic.

Langsung saja bagaimana penerapannya di dalam blog :
1. Login ke blog.
2. Klik Layout > Edit HTML
3. Masukkan script ini sebelum </head>

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

4. Masukan javascript jQuery Slider dibawah ini, dibawah script tadi.

<!-- Javascript div#slide-holder -->

<script type='text/javascript'>var _siteRoot='index.html',_root='index.html';</script>

<script src='http://blogspot-choen.googlecode.com/files/scriptsSlider.js' type='text/javascript'/>

<script type='text/javascript'>
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"Code-code-an","desc":"Media Dokumentasi Tutorial dan Desain "},

{"id":"slide-img-2","client":"sIFR 02","desc":"Free Blogger Template"},

{"id":"slide-img-3","client":" ","desc":"Bukan CoklatFree Blogger Template"},

{"id":"slide-img-4","client":"Ini Minimaliskah ?","desc":"Free Blogger Template"},

{"id":"slide-img-5","client":"Cufon","desc":"Free Blogger Template"},

{"id":"slide-img-6","client":"jQuery 2","desc":"Free Blogger Template"},

{"id":"slide-img-7","client":"jQuery 1","desc":"Free Blogger Template"}];

</script>

<!-- End Javascript div#slide-holder -->

Nb: kata-kata berwarna merah diatas adalah deskripsi tiap gambar, kalian dapat merrubahnya sesuai keinginan anda.

5. Masukan kode dibawah ini, diatas kode <div id='content-wrapper'>

<!--HTML div#slide-holder-->

<div id='headerSlider'><div class='wrapSlider'>
<div id='slide-holder'>
<div id='slide-runner'>
<a href='http://deconstructioncode.blogspot.com/'><img alt='code-code-an' class='slide' id='slide-img-1' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SpPsZSrB6OI/AAAAAAAACKY/i80SCyD44BI/deconstructioncode2.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/08/nge-grunge-dengan-sifr-20-free-blogger.html'><img alt='sIFR in Blogger Template' class='slide' id='slide-img-2' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpPuiTccecI/AAAAAAAACKc/KwKDFX51CnM/sifr2bloggertemplate.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/07/bukan-template-coklat.html'><img alt='Free Blogger Template' class='slide' id='slide-img-3' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SpPwKSdCtVI/AAAAAAAACKg/7gFw2HZFlaE/CoklatBloggertemplate.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/07/ini-minimal-kah-free-blogger-template.html'><img alt='Free Blogger Template' class='slide' id='slide-img-4' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUi5ovp8xI/AAAAAAAACLA/4XpsH63UaMk/iniminimal.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/07/free-blogger-template-cufon-sifr.html'><img alt='Free Blogger Template' class='slide' id='slide-img-5' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUkbuipkAI/AAAAAAAACLE/2327FKbifQE/cufontypo.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/06/free-blogger-templates-dengan-sentuhan.html'><img alt='Free Blogger Template' class='slide' id='slide-img-6' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUlomDRo6I/AAAAAAAACLI/PYsLvvqqenE/jQ2.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/05/free-blogger-templates-dengan-sentuhan.html'><img alt='Free Blogger Template' class='slide' id='slide-img-7' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SpUmknxumWI/AAAAAAAACLM/slg5rmBUmBo/jQ1.jpg'/></a>

<div id='slide-controls'>
<p class='text' id='slide-client'><strong>post: </strong><span/></p>
<p class='text' id='slide-desc'/>
<p id='slide-nav'/>
</div>
</div>


<!--content featured gallery here -->
</div>

</div></div>

<!-- End HTML div#slide-holder -->

Nb:
- Warna biru diatas menandakan id image ke berapa (jangan diapus atau dirubah).
- Sedangkan 'alamat URL', 'alt', dan 'alamat gambar' dapat anda rubah sesuai kebutuhan anda.

6. Masukan kode dibawah ini, diatas ]]></b:skin>

/* CSS div#slide-holder */

div#headerSlider div.wrapSlider{
width:810px; /* mesti disesuaikan */
height:288px;
background:#000;
border: 4px solid #333;
margin: 0 auto;
}

div#headerSlider div#slide-holder{
z-index:40;
height:288px;
position:absolute;
}
div#headerSlider div#slide-holder div#slide-runner{
top:5px;
left:5px;
width:800px; /* mesti disesuaikan */
height:278px; /* mesti disesuaikan */
overflow:hidden;
position:absolute;
}

div#headerSlider div#slide-holder img{
margin:0;
display:none;
position:absolute;
}

div#headerSlider div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:800px; /* mesti disesuaikan */
height:46px;
display:none;
position:absolute;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpUhSXvvaFI/AAAAAAAACK8/eYHketamvoc/slide-bg.png) repeat scroll 0 0;
}

div#headerSlider div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
color:#ccc;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
background-image:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpPogDg6qzI/AAAAAAAACKU/DhQZk2y7GtE/s800/silde-navSlider.png);
}

7. Selesai sudah. Dan save semuanya.

SEkian pembahasan tutorial JQUery Slider yg telah saya pelajari dari berbagai sumebr, dan saya sharingkan dengan anda. Semoga bermanfaat bagi kita semua.
Terima kasih =)