Cara Membuat slide show Gambar di blog Dengan Efek Fade
Wah setelah Sekian lama Saya cari tata cara Membuat gambar dengan Slide
Show efek Fade pada blog Akhirnya Ketemu Juga, Postingan Kali ini saya
Akan menshare sedikit cara Membuat Slideshow Gambar/Foto Diblog, Ya..
Walaupun banyak sih Cara Lain yang lebih menarik dan tampilan yang lebih
Dinamis.
Sebelumnya Siapkan Dulu Foto/Gambar yang akan dijadikan Foto Slidenya, Atau Kunjungi http://www.picasaweb.com
dan kemudian silahkan Upload Foto Anda yang akan dijadikan Slide show
dengan Format Jpg, Png. sesuai dengan Ukuran yang diinginkan.
Setelah itu Masuklah ke akun Blogger > Tata Letak > Add Gadget > Kemudian Copykan Script dibawah :
<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 100%;
height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Gambar 1" />
<img src="URL Gambar 2" />
<img src="URL Gambar 3" />
</div>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 100%;
height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Gambar 1" />
<img src="URL Gambar 2" />
<img src="URL Gambar 3" />
</div>
Note : UntukTulisan URL Gambar 1,2,3 Silahkan Kamu Ganti dengan URL Gambar Yang Telah DiUpload Tadi,
kemudian Terakhir Save. dan lihat hasilnya.
Komentar
Posting Komentar
Tulis komentar anda disini.....