Tutorial Script Slide Show
Tutorial Script Slide Show
Halo Sobat pengunjung sekalian. Kali ini saya ingin membagikan cara membuat gambar slide show di blog anda. Biasanya kita letakkan di atas widget posting anda.
1. Pertama anda Masuk terlebih dahulu ke akun blogger anda
2. Klik Tata letak
3. Klik tambah Gadget
4. Pilih Gadget Tambah HTML/JavaScript
5. Copy kode script di bawah ini
<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: 550px;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 550px;
height: 250px;
}
</style>
<div id="content-slider">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcxvKsSqGl2kCPNCfs91ePXrFfNeR1A0g21tnASR1TCplW_pWev8Iy7v99mitJxWMApUK-TDGpumf_IFKkXwcTkKMqrqWwtf8j4BDyvaXN8YWikjctGRVrIFU2llLGn6pVSnExOpM2R-s/s320/waroengeza.png" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDJ075hpKobBE8j8nkaKo-BuabaFTDCreGuYx4p78as1ECiXGnriYtduZ52GFwAXf2oOFJYBC7qMVFrFElWBCJGM6zb6oYkAahf3zC1C-JO-Vrry2CB2gIO_giEn1rX5LMwlGbtOh1BY/s1600/template-lasantha.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMLew1Bk_OEhWwoqGp6vBlj9atYKn1wht8OHWH2FDpfJhUbv93gHt9R9CdsYRbFnwer4Kfqb_0993JuO1O1a35dmCg3HdEzDzWoYJW3-ysuJ02S8mOB-7BBso3pcgoHV0WZcOEx5BeUkU/s1600/Udah+cek+waroengeza+belum.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55KR-UW4u3DuLVua4X907beJmB_lhzIZn_QQzbcoJWi2HEX6hkltALBEnHegvKcBjG6zX8N-96GTzOfXlkNAKi_75aN0yLWR9y-y_AgjCdmnaGmwXVKY6BFfj6w774RlH8S0yGByIfW8/s1600/delivery+ppp.jpg" />
</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: 550px;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 550px;
height: 250px;
}
</style>
<div id="content-slider">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcxvKsSqGl2kCPNCfs91ePXrFfNeR1A0g21tnASR1TCplW_pWev8Iy7v99mitJxWMApUK-TDGpumf_IFKkXwcTkKMqrqWwtf8j4BDyvaXN8YWikjctGRVrIFU2llLGn6pVSnExOpM2R-s/s320/waroengeza.png" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDJ075hpKobBE8j8nkaKo-BuabaFTDCreGuYx4p78as1ECiXGnriYtduZ52GFwAXf2oOFJYBC7qMVFrFElWBCJGM6zb6oYkAahf3zC1C-JO-Vrry2CB2gIO_giEn1rX5LMwlGbtOh1BY/s1600/template-lasantha.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMLew1Bk_OEhWwoqGp6vBlj9atYKn1wht8OHWH2FDpfJhUbv93gHt9R9CdsYRbFnwer4Kfqb_0993JuO1O1a35dmCg3HdEzDzWoYJW3-ysuJ02S8mOB-7BBso3pcgoHV0WZcOEx5BeUkU/s1600/Udah+cek+waroengeza+belum.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55KR-UW4u3DuLVua4X907beJmB_lhzIZn_QQzbcoJWi2HEX6hkltALBEnHegvKcBjG6zX8N-96GTzOfXlkNAKi_75aN0yLWR9y-y_AgjCdmnaGmwXVKY6BFfj6w774RlH8S0yGByIfW8/s1600/delivery+ppp.jpg" />
</div>
6. Pastekan ke dalam Gadget HTML/JavaScript
7. Jangan diberi Judul, biarkan kosong, kemudian klik Simpan.
8. Sebelum disimpan ganti alamat di img scr yang di cetak tebal. Dengan alamat url media penyimpanan online anda. Bisa juga anda menguload terlebih dahulu ke server blogger ketika anda menulis artikel. Copy alamat link gambarnya, biasanya seperti ini : http://1.bp.blogspot.com/-eayDuZJIsH. Atau anda bisa menyimpan image/gambar anda di Photobucket, disana biasanya ada alamat link url gambar anda yang anda upload ke akun photobucket anda.
Terima kasih dan semoga bermanfaat... Jangan lupa di share yah...
0 komentar:
Silahkan beri komentar, terima kasih sudah berkunjung..
Jangan spam yah..
Terima kasih banyak udah menyempatkan baca di blog ini