Pages

30 Maret 2013

Cara Mudah Untuk Membuat Slide Show Foto di Blog

Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.

Cara Mudah Membuat Slide Show Foto 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 sampai dengan 5 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioM4mhf2yB66HfMBZNRpCULCn1IZI1ZoQcZiEtng3wvN2wn4942GHF6mOU3uXLUtLG_PCVSHcb46kJLMJ9XX7ALJNYvqWJ3u8fdMNjVxMl6tOEzaJkbAjEtKob7vKqEmyq9aVENk4S00Y/s1600/Untitled.png" /> dan seterusnya.
7. Simpan jika sudah selesai.

12 komentar:

  1. mohon maaf,, saya mau tanya, foto yang sudah diupload itu di upload dimana ?
    terimakasih :)

    BalasHapus
  2. tolong bantu saya biar bolog saya bisa dikenal orang lain.

    BalasHapus
  3. @titis:uplod fotonya seperti uplod di postingan baru tetapi mode HTML, nanti ketemu url Fotonya

    BalasHapus
  4. @vanz Shofwan:terus aja posting yang unik2 dan usahakan di share ke beberapa sosial media gan

    BalasHapus
  5. Gan, cara membuat blog seperti agan gimana yg ada tab d atas itu trus trbagi lgi jadi multimedia ,dll . gimana itu ?

    BalasHapus
  6. @Amaldo Firjarahadi Tane:ow itu, itu edit HTML sob, di template2 downloatan juga ada yang begituan, tinggal kasih link dan beri judul tab

    BalasHapus

Berkomentarlah yang Sehat :

* Gunakan kata-kata yang sopan
* No Spam
* No Pornografi
* No Sara


Silahkan berkomentar !!! Komentar anda inspirasi Semut Desa.