Monday, November 10, 2014

Tips Cara Menambahkan Gambar SlideShow Pada Blog

Di dalam sebuah blog kita biasanya membuat agar tampilan blog kita terlihat bagus dan menarik salah satunya adalah dengan cara memberi gambar. Pada sebuah gambar biasaya kita ingin menampilkan lebih dari satu buah gambar yang ingin kita tampilkan. Tetapi kita terkendala dengan ruang dalam menampilkan gambar. Salah satu cara yang bisa kita lakukan adalah dengan cara membuat gambar tersebut berubah secara bergantian/ Slideshow. berikut adalah cara yang bisa kita lakukan untuk menampilkan gambar secara bergantian.

Berikuta adalah Cara yang perlu kita lakukan dalam membuat Slide Show Gambar di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML 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="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 sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
7. Simpan jika sudah selesai.

Source : http://kurniasepta.blogspot.com/2013/03/cara-mudah-membuat-slide-show-foto-di.html

0 comments:

 
Copyright © . Tips Cara Membuat Bisa - Posts · Comments
Theme Template by BTDesigner · Powered by Blogger