Cara membuat slideshow foto untuk blog

Buat kalian yang ingin membuat slide show foto untuk dipasang diblog tetapi tidak tahu caranya,berikut ini saya jelaskan cara membuatnya:

• Pertama kumpulkan semua foto yang akan dijadikan bahan slide show.
• Kalau sudah upload fotonya dipostingan blog kamu lalu ambil url fotonya.
• Selanjutnya lihat script untuk membuat slide show dibawah ini :

SCRIPT / KODE HTML SLIDE SHOW I

<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: 180px;

   overflow: hidden;

   margin:0 auto;

}

#content-slider img {

   display: block;

   width: 100%;

   height: 180px;

}

</style>

<div id="content-slider">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZvbw9jkAmCeUet18iRp8R81M5JaIaGfe5BCrYChrOzGoQCccIfBFuTnrbI_6LvFAtUr3_rIB3LFQLvghP5N2oXlOc3zZgac0grRiIWtTb27SjjxN98qNWYO9tVeJMSOcZeVt8T0ty5A/s1600/a+logo+blogger.JPG" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge2p9H15FEITTK-r6l_Av95cXKp9CZiv8moNAo1FxVROWR_2jhXQ17UfH4Jqf3ARWzuC8_Zap8qrFjRq1icvbGpS-_sQsM-wIJ5dmK4qOs-pKST-B4sC1AhUhDK2O-gy9dOiYKXmWZ2Wk/s1600/b+logo+wp.JPG" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ow6UmHZDVsLQwMm_aLzEUfWLqtH4jfQ1ONbSOjuuhJRePfRVauDn_8A7wOJLoUwU4fz1VQfTmGqphfhE_fkchvK1GTXXv9sLTZDuAwX7YcEBNNd1B68qSCZF1lFEyGwOPM6V_-DES3g/s1600/c+logo+weebly.JPG" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9M_-mWCyt3NokWHHRFVPFB3u8EMZTyuheLILfcg2Cu-i3kh4HniOMT2KDA_uavTLe3BO2SCu0be3lLEkAhvfqbyLDleDVCna3gg9-_8rXy8mrRP0FClq_6pfgK8UsmovRuztB9cb_Hzc/s1600/d+logo+webs.JPG" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0KeYEtlxK2LxP2fTKQcYvxCCZUvIC181JeIApmTrXXs3Q3nzFbzfsAOKsClVLhgjjvrj9-RQuMBIbNqvnuSjAx2brnrAxWVn5LqjMwFTe722qyDIviR8qWZwCcbJ0eivqaA3q9rxn0Uo/s1600/e+logo+blog+detik.JPG" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnA8W8dY3kQI58Kpyn19RClkVQ-WJUVdZXUMe19nk1y13u-3KA8I_pRuWLkBMhzKa1AhQbw9xiQl-26mOtsZKDm_F0nG4-I8BtACnGlOzZTnypnv5DqwJu17_oJOQUi3LOs-O3n4FxQFI/s1600/f+logo+drupal.JPG" />

</div> 

• Ganti kode script yang biru diatas dengan url foto kalian.
• Kalau perlu ganti dulu ukuran foto slide show'nya dengan mengganti angka 180 dengan angka lainnya yang sesuai seleramu.
• Selanjutnya copy script slide show kalian dan pastekan ke HTML/JavaScript gadget blogger kalian,atur letaknya terserah kamu,dimana yang kalian anggap paling bagus.

Mudah dan cepatkan? seperti itulah cara membuat slide show foto untuk blog itu,lihat hasil slide show'nya yang sudah jadi dibawah ini!

SCRIPT / TAG HTML SLIDE SHOW II

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#BUS-slider').s3Slider({ timeOut: 2500 }); }); </script> <style> #BUS-slider { width: 425px; /* Keep it 20px-40PX greater than ACTUAL Image size */ height: 130px; position: relative; overflow: hidden; margin-left: 0; } #BUS-sliderContent { width: 425px; position: absolute; top: 0; margin-left: 0; } .BUS-sliderImage { float: left; position: relative; display: none; top: 0; border:1px solid #ddd; } .BUS-sliderImage span { position: absolute; font: 10px/15px sans-serif,Arial, Helvetica; padding: 10px 10px; background-color: #000; color: #fff; filter:'alpha(opacity=70)'; -moz-opacity: .5; -khtml-opacity: .5; opacity: .5; text-align:justify; } .BUS-sliderImage span a { text-decoration:underline; color:#FE6602; } .clear { clear: both; } .top { top: 0; left: 0; width: 425px !important; height: 200px; } .bottom { bottom: 0; left: 0; width: 425px !important; height:130px; } .left { left: 0; top: 0; width: 425px !important; height: 130px; } .right { right: 0; bottom: 0; width: 425px !important; height: 130px; } </style> <br /> <div id="BUS-slider"> <ul id="BUS-sliderContent"> <li class="BUS-sliderImage"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHsYkPZ8oCmDa21ig_-Ksc5cAnlKVx4l2wZgmIcWf9pTQYpfSKxnPF6pvu6EBOHcACQseY3lXjLY6dDz2_7xhZiG4h49CGR3r87fq_-BcWuI4dr1yQ5RMKOSBDcEnDdFJshOoR27BoINMH/s1600/OctaFx+sponsor+kebanggaan+Persib+Bandung.JPG" height="130" width="400" /><a href="http://blog-rangga.blogspot.com/"><span class="top"><h3> OctaFx adalah sponsor kebanggaan Persib Bandung</h3> OctaFx adalah salah satu Broker Forex terbaik di Indonesia </span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span> </li> <li class="BUS-sliderImage"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcupvf4uIEz4vtIHuUEAy2TjJYrprx0o8hRIE-Bo2ncUDk3Vvy2sZJUBhyphenhyphenxW6JRH90nLD5KH7nZJB6Y35QEGWVrqV_Tcfl9VTs99zHXjxOpqjz3olRs5YBNhXYy9v5dnScjNF8bJa41LZi/s1600/Logo+Persib+Bandung.JPG" height="130" width="400" /> <span class="top"><h3> Logo Persib Bandung</h3> Keren, elegan, menarik dan power full</span> </li> <div class="clear BUS-sliderImage"> </div> </ul> </div> <br />

Untuk melihat hasilnya seperti apa klik disini !

Selamat mencoba semoga berhasil.