Cara Mudah Membuat Slide Foto di Blog


Selasa, 31 Maret 2015
Labels:
Advertisement
[Penghuni 60] Apakah Anda pencinta foto? Sehingga saking cintanya Anda terhadap foto, Anda pun sering berbagi koleksi foto-foto Anda itu di blog pribadi Anda. Sayangnya, penempatan foto yang terlalu banyak itu akan memperlambat loading blog kita, sehingga jika koneksi internet sedang bermasalah, maka tidak semua foto dapat terbuka secara sempurna.

Penempatan foto pada blog juga dapat menghabiskan banyak tempat. Sehingga kurang begitu baik. Untuk itu kita harus bisa menyiasatinya agar meskipun banyak foto yang kita pajang namun tidak berkesan memenuhi tempat di blog.

Nah, cara yang terbaik adalah dengan menggunakan slide.

Cara Mudah Membuat Slide Foto di Blog

Baca Juga:

Dengan memakai slide, kita bisa menampilkan banyak foto hanya dalam satu tempat saja, foto tersebut akan dimunculkan secara bergantian satu persatu. Memang untuk melihatnya, kita harus menunggu agak lama, tapi setidaknya cara ini bisa menghemat tempat di blog.

Bagi Anda yang ingin memasang slide foto di blog ataupun bisa juga digunakan untuk pemasangan banner iklan dan lain-lain yang berupa gambar, silahkan ikuti langkah-langkahnya di bawah ini:

  • Login ke akun blogger Anda
  • Copy paste kode di bawah ini ke tempat yang Anda inginkan untuk menampilkan slide fotonya. Jika ingin ditampilkan di postingan, maka paste di dalam postingan, jika ingin di tampilkan di luar postingan, maka gunakanlah widget. Silahkan copy kode script di bawah 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: 130px;
height: 169px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 130px;
height: 169px;
}
</style>
<div id="content-slider" onmouseover="this.stop()">
<img src="URL GAMBAR 1" border="0" width="130" height="169" />
<img src="URL GAMBAR 2" border="0" width="130" height="169" />
<img src="URL GAMBAR 3" border="0" width="130" height="169" />
<img src="URL GAMBAR 4" border="0" width="130" height="169" />
</div>
  • Setelah Anda paste, jangan lupa ganti tulisan "URL GAMBAR" berwarna kuning dengan URL gambar foto Anda lalu simpan, atau publish untuk yang menempatkannya di postingan.
  • Untuk ukuran width(lebar) dan height(tinggi) berwarna biru bisa Anda ganti sesuai selera Anda
  • Selesai

Mudah bukan? Selamat mencoba.

*******
Signp60


Thanks
Penghuni 60
Penghuni 60

Artikel Menarik Lainnya:




FOLLOW and JOIN to Get Update!

Advertisement

19 comments:

  1. kami juga pakai ini, makasih sob, tipsnya

    BalasHapus
  2. @Admin Rungan: gak usah pake demo lg sob, langsung coba aja biar liat sendiri hasilnya, kalo misalkan gak jadi, gampang dihapus lagi kan? soalnya aku gak bisa pasang demonya, karena di blogku ini ada script lain yang membuat demo itu gak berjalan, sori ya, langsung coba aja sendiri ya...

    @Beehijab Blog: nah, tuh udah ada yg pake kan? berarti sukses donk scriptnya..

    BalasHapus
  3. siiip, yg ini pernah saya pake mas... itu nantinya gambar fotonya muncul satu persatu dengan efek menghilang dan muncul. tul kan mas?

    BalasHapus
  4. @Admin Rungan: demonya sudah aku pasang sob, aku udh bisa mengatasi scriptnya yg bentrok dgn script lain. ada di bawah postingannya ya..

    BalasHapus
  5. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  6. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  7. Wah keren nih, buat 'newbie' kayak saya nih..
    Makasih ya tutorialnya..
    BTW, mohon kunjungannya ke blog saya ..
    Thanks :)

    BalasHapus
  8. jadi enak ya lihat slide foto di postingan dan tampilan tidak terlalu banyak foto yang terpampang

    BalasHapus
  9. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  10. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  11. Wah keren nich... cara buatnya juga sepertinya mudah :)

    BalasHapus
  12. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  13. Kerennya slide foto ini, nice posting Gan, kapan2 kalau mau info slide dll pasti akan adatang kesini hehehe

    BalasHapus
  14. harus dicoba ini, makasih infonya :)

    BalasHapus
  15. woww bgt ..

    http://goo.gl/2e5JiF

    BalasHapus
  16. Makasih sharing nya
    Bermanfaat sekali...

    salam sukses
    www.grosirbatikshitasyafiq.com

    BalasHapus
  17. Artikel yang bagus gan :)
    Terima kasih gan infonya :)

    Silakan Kunjungi blog ane ya gan ^_^

    http://www.sastraciang.com

    BalasHapus
  18. Dulu saya juga pernah masang slide seperti ini mas, waktu blog utama saya baru2 dibuat. Tapi ya itu, widget seperti ini sangat berpengaruh sekali pada kecepatan loading, jadinya hanya sekitar seminggu saya memakainya.

    BalasHapus

Berkomentarlah yang baik dan sopan. Dilarang meninggalkan jejak link hidup maupun iklan promosi di kolom komentar. Silahkan hubungi Admin jika ingin bekerjasama dalam hal iklan. Terima kasih.