Cara Mudah Membuat Slide Show Gambar/Foto pada Blog - Setiap orang memiliki cara dan sudut pandang yang berbeda untuk mempercantik tampilan blognya. bagi sebagian orang ada yang suka dengan tampilan blog yang sederhana ada juga yang suka dengan tampilan blog yang di hiasi dengan gambar-gambar yang menarik.
Dan untuk tutorial kali ini saya akan menjelaskan sesuai dengan judul diatas, yaitu cara membuat slide show foto pada blog langsung saja ikuti tutorialnya dibawah ini
2.kemudian pilih Tata Letak Selanjutnya klik Tambah Gadget Silahkan pilih letaknya sesuai keinginan kamu
3.Kemudian pilih HTML/JavaScript
4.Masukkan kodescript berikut ini:
5.Ganti tulisan warna merah dengan URL gambar yang nantinya akan ditampilkan pada slide show
6.Kamu juga bisa mengatur ukuran gambar yang akan ditampilkan dengan mengubah tulisan warna Biru pada kodescript diatas
7.Setelah semuanya selesai silahkan klik SIMPAN
Dan untuk tutorial kali ini saya akan menjelaskan sesuai dengan judul diatas, yaitu cara membuat slide show foto pada blog langsung saja ikuti tutorialnya dibawah ini
Cara Mudah Membuat Slide Show Foto di Blog
1.Silahkan Login terlebih dahulu ke BLOGGER kemudian pilih blog kamu2.kemudian pilih Tata Letak Selanjutnya klik Tambah Gadget Silahkan pilih letaknya sesuai keinginan kamu
3.Kemudian pilih HTML/JavaScript
4.Masukkan kodescript berikut 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="http=//www.blogpenting.com/images1.png" />
<img src="http=//www.blogpenting.com/images2.png" />
<img src="http=//www.blogpenting.com/images3.png" />
<img src="http=//www.blogpenting.com/images4.png" />
</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="http=//www.blogpenting.com/images1.png" />
<img src="http=//www.blogpenting.com/images2.png" />
<img src="http=//www.blogpenting.com/images3.png" />
<img src="http=//www.blogpenting.com/images4.png" />
</div>
5.Ganti tulisan warna merah dengan URL gambar yang nantinya akan ditampilkan pada slide show
6.Kamu juga bisa mengatur ukuran gambar yang akan ditampilkan dengan mengubah tulisan warna Biru pada kodescript diatas
7.Setelah semuanya selesai silahkan klik SIMPAN