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 =)
