Thursday, 24 September 2015T9/24/2015 09:04:00 pm

CARA MEMBUAT SLIDESHOW FOTO MUDAH DI BLOG

Kali ini kita akan memcoba untuk membuat slideshow foto/gambar yang dapat kita tempatan diblog kita. slideshow sendiri dapat berupa fitur-fitur artikel atau bisa juga berupa kumpulan foto dengan ukuran tertentu yang dapat kita tampilkan di blog kita. slider ini dapat kita buat secara otomatis maupun manual dan dapat di terapkan juga di halaman posting maupun homepage blog / web kita.


Disini kita akan membahas cara pembuatan slideshow tersebut, sebelum membuat nya sebaiknya anda menyiapkan url foto/gambar yang ingin anda tamplilkan nantinya.  adapun langkah - langkah pembuatan nya adalah sebagai berikut. 
  1. Login terlebih dahulu ke blog sobat.
  2. Selanjutnya masuk pada menu design / template >> selanjutnya pilh edit HTML (sebaiknya backup dulu template blog sobat )
  3.  Silahkan anda centagkan "Expand Template Widget"
  4. Cari kode ]]></b:skin> dan copy paste script code dibawah dan letakkan di atas code ]]></b:skin> 
.coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF;  text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

      5.  Setelah itu, cari code </head> dan letakkan code dibawah ini diatas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 500, navigation: false, delay: 5000 }); }); </script>

Untuk keterangan tulisan yang berwarna biru, adalah ukuran lebar slide. Silahkan anda ganti sesuai dengan lebar penempatannya pada tampilan blog anda.

       6.  Setelah selesai, silahkan simpan template anda.
       7. Selanjutnya Silahkan masuk pada menu design/rancangan dan plih menu tata letak atau eleman laman
       8. Tambahkan widget dengan memilih HTML/Javascript dan copy-paste code berikut kedalamnya.

<div id='coin-slider'>
<a href="url tujuan" target="_blank">
        <img src="url link gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>
<a href="url tujuan" target="_blank">
        <img src="url link gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>
<a href="url tujuan" target="_blank">
        <img src="url link gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>
</div>

Untuk text atau code yang berwarna biru, silahkan anda ganti dengan alamat url tujuan bila anda mengklik gambar sedangkan warna hijau silahkan anda ganti dengan url gambar itu sendiri.

Selanjutnya klik  Simpan, dan coba lihat hasilnya. selamat mencoba dan semoga artikel kali ini dapat bermanfaat.
Previous
Next Post »
0 Komentar untuk "CARA MEMBUAT SLIDESHOW FOTO MUDAH DI BLOG"

Silahkan tinggalkan komentar dibawah ini,
Terima kasih sudah :
1. Berkomentar dengan sopan
2. Tidak meninggalkan link aktif dalam form komentar
3. Berkomentar sesuai postingan / artikel
4. Tidak membuat komentar yang mengandung SARA / SPAM
5. Memberikan informasi link / script yang tidak berfungsi

Terima Kasih Sudah Berkomentar

PENDAPAT ANDA TENTANG BLOG INI ?

Follow by Email

 
Copyright © 2014 uduy macal blog's - All Rights Reserved
Template By Kuncidunia
DMCA.com Protection Status