Cara Memasang Slideshow di Blog

slideshow_Slideshow sebenarnya sudah tidak asing lagi didengar. Slideshow adalah tampilan objek berupa foto, video dan objek lainnya yang saling bergantian dalam waktu tertentu secara terus menerus. Biasanya bagi para blogger, slideshow ini dibuat untuk mempercantik tampilan blog sehingga tampak begitu elegan dimata pengunjung.

Untuk memasang slideshow di blog sebenarnya sangat mudah, Anda hanya perlu sedikit sentuhan dan merubahnya agar tampak lebih mantap. Bagi para blogger khususnya pemula seperti saya, saya akan coba membagikan caranya. Yang sudah saya coba adalah di blogspot.com, untuk di wordpress.com pasti tidak jauh beda. Simak langkah-langkahnya sebagai berikut :

1. Login ke blogger

2. Pada Dashboard blog, pilih Tata Letak > tambahkan gadget > Pilih HTML/Java Script

slideshow_1

slideshow_2

3. Copy kode HTML berikut dan paste ke dalam kotak konten HTML tersebut

<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: 230px;
}
</style>
<div id="content-slider">
<img src="URL Foto Anda"/>"
<img src="URL Foto Anda"/>"
<img src="URL Foto Anda"/>"
<img src="URL Foto Anda"/>"
</div>

4. Ganti tulisan “URL Foto Anda” dengan link gambar milik Anda

5. Anda bisa menambahkan beberapa gambar lagi dengan cara menambah kode HTML berikut, dan seterusnya

<img src=URL Foto Anda"/>

6. Simpan dan lihat hasilnya. Jika belum berhasil, ulangi lagi sampai benar-benar berhasil

Anda dapat melihat contohnya di Blog saya DISINI

Selamat mencoba.

About Aldy Forester

an office employee who fails to become programmers

Posted on Desember 16, 2013, in Blog, Tutorial and tagged . Bookmark the permalink. 15 Komentar.

  1. Kalau boleh tanya, slide yang sobat paparkan berat ngak ya loadingnya, sebab jika berat tentu akan menggangu kinerja blog secara keseluruhan. Terima kasih sebelumnya dan salam kenal

    • Alhamdulillah sejauh ini tidak begitu berat loadingnya. Mungkin agan coba buka blog yg saya tunjukkan linknya dibawah tulisan diatas atau langsung aja klik ini http://goo.gl/r3cZFz. Gambar yg saya tampilkan berjalan normal. Jika cara diatas kurang cocok, coba agan search di blog ini bagaimana menampilkan slide dgn bantuan pihak ketiga seperti Flickr (sy lupa judulnya), contoh blog saya yg menampilkan slide melalui bantuan Flickr dapat dilhat disini http://goo.gl/L0RiWr dlm blog tsb juga sy terapkan cara diatas, jadi ada 2 widget slideshow dan alhamdulillah blog saya masih berjalan normal.
      Makasih gan dah mampir dan salam kenal pula.🙂

  2. terima kasih untuk tutorial memasang slideshow ini, nanti akan saya coba pasang di blog saya

  3. Bagus Infonya Gan.. Trims yah:

    untuk Informasi Gan, yang mau liburan ke Belitung, Kontak Ane yah😀

    Travel Belitungku adalah Portal Informasi Wisata di Pulau Belitung. Anda bisa mendapatkan berbagai seputar Info Wisata Belitung, seperti: Objek Wisata di Belitung, meliputi: Wisata bahari Belitung, Wisata Alam di Belitung, Wisata Sejarah di Belitung, Wisata Religi di Belitung, Wisata Agrowisata Belitung, Wisata Ekologi di Belitung, Ekowisata di Belitung, Wisata Kuliner di Belitung, Wisata Minat Khusus di Belitung( Diving, Snorkling, Junggle Trekking, Outbond, Flying Fox). Dan Direktori Informasi Wisata Pulau Belitung, meliputi: Akomodasi (Hotel, Penginapan, Homestay), Transportasi (Sewa Mobil, Motor, Bus di Belitung), Tempat Makan di Belitung, Agen Travel di Belitung, Kesehatan, Entertainment/ Hiburan, Ekspedisi, Souvenir, Sanggar Seni di Belitung.

  4. ga ada warna merah nya gan
    ada juga warna hitam, hijau, biru…:/

  5. Gan Biar Gambarnya Klo Di Klick Langsung Menuju Ke Post Kita Gimana ?
    Makasih Sebelumnya🙂

  6. Terimakasih, artikelnya bermanfaat banget nanti di coba deh…

    Sekarang ini hampir setiap pekerjaan menuntut kita untuk menggunakan komputer dan berbagai software penunjang. Mulai dari software pengolah kata, angka, program, dan desain grafis. Bingung cara belajarnya? Kunjungi Kumpulan Tutorial Gratis , berbagai konten tutorial gratis yang bisa membantu kamu

  7. alphian sahruddin

    kok gambarnya gak mau tampil bang?????

    • @Alphian, gambarnya sudah diupload kemana terlebih dahulu? di Flickr atau dimana sehingga jelas url/link fotonya. Usahakan privasi fotonya diubah dulu ke Public. Nah, url/link foto tsb yang nanti dicopy.

  8. Slide nya kalau di smartphone kok gak jalan ya mas?

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

We Found Wonderful

Photography - Travel - Arts - Reflections

Little Wolf

Art Blog of Maryanna Hoggatt

@pmarca Says

Marc Andreessen's Tweets in Blog Form

Aldy Forester

I want to be a true forester

Aldy Forester Blog

Tawaqal, Ikhlas, Pasrah

Catatan Si Aldy

Indahnya Berbagi

DeRie Berbagi..

Just Share Everything..

%d blogger menyukai ini: