2 Cara Gampang Menciptakan Slideshow Foto Di Website

Blog atau situs yang menarik merupakan dambaan setiap Blogger atau Webmaster. Salah satu widget atau script yang menciptakan blog atau website terlihat manis dan bagus ialah dengan dimunculkannya slideshow foto diatas postingan blog.

Penggunaan dan peletakan yang sempurna kiranya akan menciptakan blog menjadi terlihat interaktif dan berwarna. Berikut 2 cara gampang menciptakan tampilan slideshow foto pada blog Anda:

1. CARA PERTAMA

• Go to Blogger Dashboard > Layout
• Add a Gagdet > HTML/JavaScript
• Copy dan Paste-kan script kode berikut:

<style type="text/css"> #simplegallery2 { //CSS for sample Gallery position: relative; visibility: hidden; border: 5px solid black; margin: auto; } #simplegallery2 .gallerydesctext { //CSS for description DIV of Example 1 (if defined) text-align: left; padding: 2px 5px; font-family: calibri; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://code.helperblogger.com/image-gallery.js"> </script> <script type="text/javascript"> var mygallery2=new simpleGallery({ wrapperid: "simplegallery2", //ID of main gallery container, dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly imagearray: [ ["IMAGE LINK 1 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 2 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 3 HERE","#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 4 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"] ], autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int] persist: true, fadeduration: 1000, //transition duration (milliseconds) oninit:function(){ //event that fires when gallery has initialized/ ready to run }, onslide:function(curslide, i){ //event that fires after each slide is shown //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML) //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc) } }) </script> <div id="simplegallery2"></div>

PENJELASAN:

• Pertama ubahlah ukuran semua gambar Anda ke dimensi tetap.
• Untuk mengubah dimensi, ubahlah aba-aba diatas 400 dan 265 di mana 400 ialah lebar dan 265 ialah tinggi (warna hijau).
• Ganti IMAGE LINK DISINI dengan gambar Anda sendiri (warna biru).
• Ganti # dengan link yang ingin Anda tambahkan dengan gambar tertentu.
• Ganti IMAGE DESCRIPTION HERE dengan beberapa deskripsi ihwal foto. Deskripsi gambar ini akan muncul dibagian atas dikala user melayangkan kursor mouse di atasnya. Jika Anda tidak ingin menambahkan keterangan apapun maka hanya menghapus KETERANGAN GAMBAR DI SINI.
• Jika Anda ingin mengubah gambar otomatis, ubahlah kata true menjadi false.
• Untuk mengubah interval waktu antara slide selanjutnya dan sebelumnya editlah angka 2500.
• Untuk mengubah font deskripsi, ubahlah font Calibri dengan pilihan font Anda sendiri.
• Jika sudah simpulan silakan simpan Widget Template anda .

2. CARA KEDUA

Copy paste aba-aba berikut dan simpan di Widget blog Anda:

<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>

• Ganti URL Foto 1 hingga Foto 4 dengan URL foto yang sudah dihost atau diupload (warna biru).
• Anda dapat juga menyesuaikan tinggi (height) foto  dan lebarnya (weight) (warna hijau).
• Kita dapat menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan aba-aba sama ibarat <img src="URL Foto 4" /> dan seterusnya.
• Simpan kalau sudah selesai.

Semoga Bermanfaat...

Sumber https://litera2succes.blogspot.com/

Tweet

Subscribe to receive free email updates: