Cara Membuat Slidshow (Foto Otomatis Berganti) di Blog - Blog sebagai wadah untuk berbagai tutorial tidak akan lengkap jika tidak ada adanya sebuah gambar.
Gambar akan mempercantik tampilan blog kita. Apalagi jika ada berbagai gambar yang unik dan menarik maka pengunjung blog kita akan terhibur.
Gambar dalam blog menurut ane sangatlah penting,karna sebuah tulisan saja tidak akan cukup untuk menerangkan sebuah artikel, Oke dalam tuturial ini ini ane bakal posting Tutorial Bagaimana Cara Membuat Slidshow dengan menggunakan javascript.
Cara Mudah Membuat Slide Show Foto di Blog
1. Cara pertama Login ke blogger
2. Lalu Pilih Tata Letak kemudian Tambah Gadget.
3. Pilih HTML/JavaScript
4. Masukan kode/Script HTML ini:
5. Ganti URL Foto 1 dengan URL foto yang anda punya atau yang sudah ente upload.
6. Kita juga bisa lhoh menyesuaikan tinggi (height) dan lebarnya.
7. Kita bisa menambahkan foto lebih banyak lagi dengan menambahkan kode yang sama <img src="URL Foto 4" /> dan seterusnya.
7. Simpan jika ente rasa selesai.
Oke cukup sekian tutorial kali ini dari Dasunda semoga bermamfaat ya gan :D
2. Lalu Pilih Tata Letak kemudian Tambah Gadget.
3. Pilih HTML/JavaScript
4. Masukan kode/Script HTML 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: 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 Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</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 Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>
5. Ganti URL Foto 1 dengan URL foto yang anda punya atau yang sudah ente upload.
6. Kita juga bisa lhoh menyesuaikan tinggi (height) dan lebarnya.
7. Kita bisa menambahkan foto lebih banyak lagi dengan menambahkan kode yang sama <img src="URL Foto 4" /> dan seterusnya.
7. Simpan jika ente rasa selesai.
Oke cukup sekian tutorial kali ini dari Dasunda semoga bermamfaat ya gan :D
Cara Membuat Slidshow (Foto Otomatis Berganti) di Blog
4/
5
Oleh
Unknown