“ittaqunnar walau bisyiqqo tamrotin: Jagalah diri kalian dari api neraka, meski hanya dengan bersedekah sepotong kurma”(Hadits Shahih, Riwayat Bukhari dan Muslim. Lihat Shahiihul jaami’ no. 114)

Monday, December 30, 2013

Cara Membuat Slide Show Foto di Blog

Slide show gambar

Sebuah halaman blog yang tidak ada sentuhan foto atau gambar akan terasa membosankan. Jika sudah bosan, maka pengunjung blog tidak akan lama bertahan. Bukan hanya sebagai pernak-pernik, sebuah foto juga bisa memberikan kesan tersendiri. Orang akan lebih hafal dengan gambar daripada tulisan. 

Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat.

Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. 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.

Ada beberapa tahap yang harus anda lakukan:
1. Upload gambar dari komputer ke situs layanan image hosting gratis seperti photobucket, tinypic, dll (dalam contoh ini kita menggunakan photobucket)

Cara upload foto atau gambar dapat dilakukan dengan 2 cara yaitu : gambar diupload ke hosting sendiri dan ada satu cara lagi yaitu gambar diupload ke situs lain, dalam hal ini adalah situs penyedia image hosting, seperti photobucket.com
Cara upload foto atau gambar di hosting sendiri ( dot com anda sendiri ) dapat dilakukan dengan login ke cpanel hosting anda, kemudian klik upload, tentukan gambar yang akan diupload dan ikuti petunjuk selanjutnya.
Sedangkan cara upload foto atau gambar ke photobocket.com dapat dilakukan dengan langkah sebagai berikut :

  • Jika anda sudah mempunyai akun di photobucket.com, anda dapat langsung sign in, jika belum anda harus membuat akun dulu dengan klik sign up dan ikuti petunjuk selanjutnya.
  • jika sudah sign in langsung klik saja upload
  • kemudian klik select photos and videos
  • pilih gambar yang ingin diupload
  • setelah proses upload foto atau gambar selesai, kemudian klik view album untuk melihat gambar.


Sampai di sini proses cara upload foto atau gambar sudah selesai, namun jika kita ingin menyisipkan gambar tersebut, kita harus mengetahui link gambar dengan cara sebagai berikut :

  • setelah kita sign in ke photobucket.com, klik saja view album
  • kemudian pilih gambar yang diinginkan ( arahkan mouce, klik direct link )
  • Dan copy paste kedalam blog yang kita inginkan

2. Masuk/Login ke Blogger.com menggunakan akun sobat.
3. Pada Dasbor tampilan blogger baru, pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.
3. Beri judul pada Widget, Contoh "My Foto Gallery". 
4. Kemudian letakkan semua kode di bawah ini pada kotak HTML/JavaScript.

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

Keterangan:
fx: 'fade' adalah pengaturan jenis slide show
<img src="URL Foto 1" /> adalah lokasi tempat meletakkan alamat URL yang di photobucket.com

Setelah semua di paste kan, jangan lupa isi URL Photo dengan meng-copy paste URL dari photobocket.com ke lokasi URL Foto tersebut, lalu save dan langsung bisa dilihat hasilnya.

Semoga bermanfaat,

Ded Lee