31 July 2013

Cara Membuat Slide Show Foto di Blog




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.

Langkah-langkah Membuat Slide Show Foto di Blog adalah sebagai berikut:
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.





Cari Topik yang Anda Inginkan Disini

Baca juga yang ini :



Jika merasa artikel ini bermanfaat, silahkan bagikan ke teman Anda lewat tombol-tombol di bawah ini ….

Stumble
Delicious
Technorati
Twitter
Facebook
Reddit

5 comments:

ikan hias on 10/3/14 23:59 said...

terimakasih gan atas postiingannya ,,,salam hangat semoga sukses selalu...

tempat wisata di bali on 15/3/14 18:34 said...

akhirnya Slide Show Foto di Blog bisa juga. terima kasih informasinya. sukses selalu

cara mendapatkan uang di internet on 29/3/14 10:57 said...

ini yang ae cari cari gan. terima kasih
http://superdapat-uang.blogspot.com/

hotel di lembang on 18/6/14 01:52 said...

terimakasih gan... salam kenal smoga bermanfaat untuk kita semua,,,

Maz Majid on 9/11/18 21:23 said...

kalo banyak plugin gak bikin lemot om..?

Tips Agar Diterima Google Adsense
Cara Meningkatkan Traffic atau Pengunjung Blog

Post a Comment

Silahkan Sobat meninggalkan komentar, mau nanya?, kasih saran?, atau mau kritik? Biar kita makin dewasa gitu...

 

Blog Paksya. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com