Ok sobat berikut ini adalah image slider lainnya yang dapat dibagikan
oleh saya. Sebenarnya ada banyak macam slider seperti slider
otomatis artikel terbaru yang sudah dibahas sebelumnya dan juga image
slider dimana sobat harus memasukan gambar yang sobat inginkan ke dalam
slider tersebut.
( Di akhir Postingan )
Sobat dapat membuat tampilan template blog sobat menjadi lebih cantik
dengan menggunakan slider-slider, ini untuk menambah daya tarik agar
pengunjung tertarik untuk melihat gambar yang ditunjukan oleh slider
tersebut.
jQuery Image Slider with Thumbnails
1. Blogger Dashboard > Layout > Add a Gadget
2. HTML/Javascript
3. Berikut adalah kodenya:
<style type="text/css">
.slider-box {
background: none repeat scroll 0 0 #FAFAFA;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 3px #333333;
margin: 0 auto;
width: 675px;
overflow: hidden;
}
#slider-wrapper {
margin: 0 auto;
padding: 10px;
}
#jslider-container {
border: 2px solid #FFFFFF;
max-width: 550px;
position: relative;
text-align: left;
z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
<div class="jslider_images">
<ul>
<li><a href="http://templatepremium.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUrAUKLeJ9wTGBV1PYABwa8UEmSUPy6VtzM4JcO4ZyuuAtmKQgrlEyvVSDsOQoFHC_qgeUpBXWhnwDLPLcGSBfP6esw4b87QlocIS_W6iiz0SQK5i4yEcPjHqUptIaSN2RbUk1QN1RrvGI/s550/sample1.jpg" title="Sunset"/>
</a>A boat with beautiful sunset.</li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCMV6JMLULWIBTJ6Lz08dNCBuGy5ZdKn6OLmFAsqObwa_kClIg-4La2-DpRRzv7V9nohinnAuagCkfJltSwH6XlJiQLFX5S0BGLMzxTH7PuyNmJvIOqPKTVMWed5z4MmC1ayezOJp7AR3R/s550/sample2.jpg" title="Rainbow"/>
</a></li>
<li><a href="#">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OPaAAdAEd61MZbPvHBnuhXdJ7T5izLd-jIm0N70KnbVk76IE1M16MXQ7PTZz7L6R4N16S7drWpri-xLta5Rp_M9zWRgEyqHvRJOqGqMnb-T01aQE1YnNo3hAKkh1LvFvRgg8Y-rnHs7f/s550/sample3.jpg"
title="True Nature"/>
</a>Tree in field with blue sky.</li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTWUfkHwjVCtPPATFWbk9PC8MY9OlafWHejgG8bo9G5ZTSmQTc5nwxBoXKOZk3Xi48ZzVp3ncdx2eUNr0a_pDa4f3KM_9rtA1XtgcMNvuXhAescWDMEl4DS_lhbdXhyphenhyphencusAtptdJaBWf8O/s550/sample4.jpg" title="Sunrise""/>
</a>Amaizing sunrise moment</li>
<li><a href="#">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAhe89hJNvTpj26VmSBNlOwQw2MLx89zsTSiALwlN6WH7IDn_2IDXOXk_iFuAbiZr9pmWm4_xRHoF0IUqwMRch26DaQo_aqUki3g2Yomblq-WJfctADV6c64r_OZLkK9vIZS_vGQ-0Y8Df/s550/sample5.jpg"
title="CAR in HDR Nature"/>
</a></li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOjRpnQrkNrHvUi1SUObA60QhIvs9UyuYVK7BUf6R660ZLXfXRJl3T75WJ7TF-LxpvzWI_pDnCH6rqlXH-ANI25bIXTD2tuZXWR2XXBf4EC4SDB2FIQF7q-BwpgUwQjgWo-AMZCxD4bvml/s550/sample6.jpg" title="Sunshine"/>
</a></li>
</ul>
</div>
<div class="jslider_thumbs">
<div>
<a
href="#" title="Sunset"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj_tzIbIPjVTLOVTaVMvAd_uEY4FOPwIBW4vnq9bBLWaK3CQ18oKxuFbK0oGf1UZoNrh4EFcM2E4D8GheU17_teazxsq4iIxDtw10nN44ZaWhlp9xP2n_7IeifP6lnQ_F9mK9ardLXv2VM/s85/sample1.jpg"/></a>
<a
href="#" title="Rainbow"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZkFI3iBPIq5g7Nx641g5NuY9kGldow2xeqx-XsGMuYgpCAnh88q5J8RmU3P1eeLu2MzHy3AmEks_i8Ph_jHozDIdRxxxYMQDdi7Cxz3C7Ieqc9OnHGs8a3kvArJmhE78r3uGhiY-G4jUg/s85/sample2.jpg"/></a>
<a
href="#" title="True Nature"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip9AO__na0a4wlafLzAop6opyIs_6jNY9zYr2j0Uz4PnxJqLKVQN9mlekrijAMZ5jxHghcMvDxFX-pHzycGV-6t30U0kYMucpB92CjDu9ux4uNwIsOwm599tz5ja-eVo0kJkn_4Z0SBEFZ/s85/sample3.jpg"/></a>
<a
href="#" title="Sunrise"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_oYvMqquYTxEGhN8tjA1erJANamZq47WEXYIR8fMv2CeWkCxb1KyS3b5fbCWKHboOJxUtYf7K7pJ3CzDT8VdIzDyLTGMqbkIeTA1x0nAKkVeYdFGtr882QJs9K_Q38dhKWBGda6TllTmE/s85/sample4.jpg"/></a>
<a
href="#" title="CAR in HDR Nature"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQEfLua5aruKgiayoQvtppQxkFId_oaZThToT4N8oV7TUu7qGwiK1efClrnO-cCqSSxok4CdnOetMqj1JHULYUBF8GU2t_8u1DT1CHvtXxJMtJztAnmEtP5IZsW5yWVkLc8LdGDtuXzCA/s85/sample5.jpg"/></a>
<a
href="#" title="Sunshine"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUg_gWsk49wk46dr_vPnJM4rrmaaXfngjJN4mbkY3c-9wD4uQXTyCP2X3QPsbf_YF8C6wa9VM8o7gcl0gyPG43fyA3hzSzHWUdKEsTDcgbqhD5DWGWLsrwsmIaz5pqhe3_aaM-GQ4fS24n/s85/sample6.jpg"/></a>
</div>
</div>
</div>
</div>
</div>
Simpan template dan lihat hasilnya di blog sobat. bagaimana sob? apakah
sobat berhasil membuat slidernya? ok sob sekian untuk postingan saat ini
dan jangan lupa lihat artikel terbaru http://templatepremium.blogspot.com/ yang lainnya. ok semoga
bermanfaat.
LIVE DEMO :