KAWAH PAPANDAYAN

Cara Membuat Slider Gambar Pada Blog

Cara Membuat Slider Gambar Pada Blog - Banyak orang yang bertanya tanya bagaimana sich Cara Membuat Slider Gambar Pada Blog ? termasuk saya. Karena dengan adanya slider gambar pada blog yang bergerak secara otomatis tentu akan lebih mempercantik tampilan blog kita.

POSTINGAN INI SUDAH SAYA UPDATE. SILAHKAN KLICK DISINI

Cara Membuat Slider Gambar Pada Blog

Nah sekarang kita akan mencoba bagaimana Cara Membuat Slider Gambar Pada Blog. sahabat tinggal ikuti saja langkah langkah yang akan saya berikan dibawah ini :

1. Login ke Akun Blogger
2. Lalu pilih Rancangan
3. Selanjutnya klick Edit HTML
4. Centang pada bagian Expand Widget
5. Jangan lupa untuk meng-download terlebih dahulu template sahabat supaya apabila terjadi kesalahan sahabat bisa mengembalikannya seperti semula
6. Cari kode ]]></b:skin>
7. Copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin>

/* CSS easySlider */ #containerSlider { width:175px; height:120px; margin:0 0px; padding:0; position:relative; } #prevBtn, #nextBtn { display:block; margin:0; overflow:hidden; padding:0; text-indent:-8000px; } #slider ul, #slider li { list-style:none; margin:0; padding:0; text-indent:0; } #slider, #slider li { overflow:hidden; width:175px; height:120px; margin:0 auto; } #slider { margin-left:0; background:#ccc; border:1px solid #999; } #prevBtn, #nextBtn { display:block; height:34px; left:-20px; position:absolute; top:38px; width:31px; } #nextBtn { left:200px; } #prevBtn a, #nextBtn a { background:transparent url() no-repeat scroll 0 0; display:block; height:34px; width:31px; } #nextBtn a { background:transparent url() no-repeat scroll 0 0; } #slider img { background:#ccc; padding:0px; width:175px; height:120px; }

NB :
Ganti kode yang berwarna biru sesuai dengan ukuran yang sahabat inginkan

8. Selanjutnya sahabat cari lagi kode </head> dan copy kode dibawah ini lalu letakan tepat diatas kode  </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sundaboy.googlecode.com/files/slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>

Lalu Save template sahabat

Nah sekarang template sahabat sudah bisa menampilkan Slider Gambar yang bergerak secara otomatis. Namun tunggu dulu Cara Membuat Slider Gambar Pada Blog belum selesai hehehe

Langkah selanjutnya untuk bisa menampilkan Slider Gambar maka sahabat harus mempersiapkan terlebih dahulu gambar yang akan ditampilkan.

Nah kalau sahabat sudah mempunyai gambar untuk ditampilkan maka langkah terakhir Cara Membuat Slider Gambar Pada Blog adalah sahabat harus membuat sebuah widget baru. Langkah-langkahnya sebagai berikut :
  1. Cari Page Element
  2. Tambahkan Widget Baru atau Add Widget
  3. Pilih HTML/Javascript
  4. Copy kode dibawah ini lalu pastekan kedalamnya
<div id="contentSlider">
<div id="slider">
<ul>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 1" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 2" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 3" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 4" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 5" /></a></li>
</ul>
</div>
</div>
Sekarang Simpan dan lihatlah hasilnya.

NB :
Ganti Url gambar yang berwarna biru dengan Url gambar milik sahabat

Kalau ada kesalahan kemungkinan sahabat salah meletakan kode diatas, oleh karena itu baca baik-baik cara meletakan kodenya.

Demikian Tutorial Cara Membuat Slider Gambar Pada Blog, semoga bermanfaat dan dapat membantu sahabat. kurang dan lebihnya mohon untuk dimaklumi, untuk pertanyaan, saran, dan kritiknya silahkan poskan pada kotak komentar. terimakasih

Ditulis Oleh : Yudus | Media Sharing Sundaboy

Sahabat sedang membaca tulisan Cara Membuat Slider Gambar Pada Blog. Yang ditulis oleh sundaboy Grt. Apabila sahabat ingin menyebar luaskan artikel ini untuk kepentingan umum, dimohon untuk menyertakan Link sumber dibawah ini. Untuk Kritik dan sarannya sahabat bisa mengirimkan pada kotak komentar dibawah, atau melalui email sundaboy88@gmail.com. tengkyu

12 komentar:

  1. yang kode '#' itu apa gan...????, tapi bloh ini bagus kok☻☺☻♥

    BalasHapus
  2. gitu ya pak. mau coba dulu ya pak admin

    BalasHapus
  3. Mas mau tanya, saya sudah punya slider bawaan template. Pengen ganti dan nambah foto2nya, ada saran bagaimana?

    Ini tampilannya.

    Trims.
    AZ

    BalasHapus
    Balasan
    1. kalau mau ganti fotonya coba cari widget yang diatas postingan, lalu edit. setelah itu hapus url gambar yang akan diganti dengan url gambar yang baru.

      url gambar biasanya seperti ini :
      http://3.bp.blogspot.com/-ok9mz1TkEVw/UaMRKjxBVBI/AAAAAAAACRc/qWXcHmDIHQI/s1600/sundaboy-muslimah.jpg

      terimakasih.

      Hapus
  4. Balasan
    1. Artikelnya sudah saya update. silahkan menuju :
      http://www.sundaboy.com/2012/07/cara-membuat-slideshow-pada-blog.html

      Hapus
  5. Thx :)
    http://frenzyyakuza.blogspot.com

    BalasHapus
  6. Mas saya mau nanya nih mohon bantuannya karena saya ngak nemu-nemu d mbah google. Cara bikin gambar detail produk layaknya kaya di Ladaza atau Buka lapak , jenisnya kan kaya slideshow jga namun dibawah gambar utama ada gambar kecil yang apabila diklik akan menjadi gambar utama. ya kaya ditoko-toko online gitu. (mohon bantuannya ke Email Putrasaja12337@gmal.com)

    BalasHapus
  7. penambahan foto slide pada posting blog menjadikan tampilan semakin menarik...
    sukses selalu gan..

    BalasHapus

=================================
- Berkomentarlah Yang Sopan
- Tidak Diperkenankan Memasukan Link Aktif Pada Isi Komentar
- Berkomentarlah Sesuai Dengan Content
=================================