Senin, 09 Februari 2015

Script: Membuat Image Gallery Berubah

Script: Membuat Image Gallery Berubah - Pemasangan script pada blog masih menjadi hal yang mengkhawatirkan bagi kebanyakan blogger karena mereka selalu beranggapan jika didalam blog ditambah dengan script maka akan mempengaruhi loading blog tersebut, yaitu loading blog akan menjadi lambat. Padahal tidak semua script akan membuat loading blog lambat. Salah satu script yang tidak membuat loading blog lambat adalah script membuat image gallery berubah ini. Script image gallery, ini akan membuat tampilan gambar berubah-ubah secara manual yaitu saat browser di-refresh, seperti yang terlihat pada tampilan gambar berikut ini


Atau lihat juga efek menakjubkan pada image profil blog Anda di Image blogroll menakjubkan

Script Membuat Image Gallery Berubah ini sangat simpel dan mudah dipasang dan tidak perlu khawatir dengan loading blog Anda, Jika Anda tertarik untuk memasangnya, silahkan gunakan kode-kode berikut ini

CSS
Kode CSS yang digunakan sangat sedikit. Silahkan salin kode CSS untuk image gallery berikut ini. Salin sebelum kode ]]></b:skin> atau sebelum kode </style>
.tiles-item .caption{background:rgba(0,0,0,.8);color:#fff;font-size:12px;}
.tiles-item .caption span{margin:10px;display:block;font-family:Arial;font-size:14px;font-weight:normal;}
.tiles img{display:none;}
.tiles{margin:0 auto;}

Script
Ada 2 script yang perlu disalin, script yang dibawah ini silahkan disalin sebelum kode </head> didalam template blog Anda
<script type='text/javascript'>
$(function () {
$(&quot;.tiles&quot;).tilesGallery({
tileMinHeight: 200
});
});
</script>

Sedangkan script berikut ini yang merupakan jQuery dari script membuat image gallery ini disalin sebelum kode </body>
<script src='http://yourjavascript.com/072135429/jquery-tiles-gallery.js' type='text/javascript'/>

HTML
Untuk melihat hasilnya setelah memasang kode CSS dan script untuk image gallery berubah ini, gunakan kode markup HTML berikut ini. Salin ditempat yang Anda inginkan, bisa di sidebar atau pun didalam artikel blog
<div class="tiles">
<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan Anda</span></p>
<img src="link-gambar-anda.jpg" />
</a>
</div>

Untuk 2 gambar kodenya:
<div class="tiles">
<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan Anda</span></p>
<img src="link-gambar-anda.jpg" />
</a>

<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan Anda</span></p>
<img src="link-gambar-anda.jpg" />
</a>
</div>

Untuk 3 gambar kodenya:
<div class="tiles">
<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan Anda</span></p>
<img src="link-gambar-anda.jpg" />
</a>

<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan Anda</span></p>
<img src="link-gambar-anda.jpg" />
</a>

<a href="#">
<p class='caption'>
<span>Ganti dengan tulisan Anda</span></p>
<img src="link-gambar-anda.jpg" />
</a>
</div>

Dan untuk beberapa seterusnya...

Penjelasan: Sudah sangat jelas, cukup mengganti apa yang perlu diganti pada kode HTML diatas yaitu link gambar dan tulisan

Bagaimana tertarik untuk membuat dan memasang image gallery berubah ini kedalam blog Anda?

Script: Membuat Image Gallery Berubah Rating: 4.5 Diposkan Oleh: ana sriwahyuni

30 komentar:

  1. Semakin oke bila di pasang scrip gambar bisa beruba-rubah ya mba....

    BalasHapus
    Balasan
    1. iya mas Indra, silahkan di coba mas..

      Hapus
  2. bagus mba, kayaknya mesti saya simpan nih, pilih pilih dulu gambar yang bagus..

    BalasHapus
    Balasan
    1. silahkan mbak Tika, tambah bagus kalau di pasang di blognya mbak Tika :)

      Hapus
  3. ternyata tidak semua script yang bisa menghambat loading blog menjadi berat ya mbak ?

    BalasHapus
    Balasan
    1. iya betul mas dan tergantung pemasangannya juga..

      Hapus
    2. terimakasih mbak Ana atas pencerahannya :)

      Hapus
  4. oya mbak, itu kreasinya responsive apa tidak ya ! :D

    BalasHapus
    Balasan
    1. responsive mas jika diatur sesuai keinginan :0

      Hapus
  5. sepertinya menarik untuk diterapkan pada blog.....apalagi responsive.....pasti tampilan blog semakin ngejreng

    BalasHapus
    Balasan
    1. iya mas Daniel, bukan lagi ngejreng mas, tapi lebih menarik..

      Hapus
  6. iya nih mbak,asumsi saya sebelumnya begitu.
    setiap ada script baru pertanyaan yg timbul dibenak saya adalah apakah memberatkan blog gitu.
    tp ketika melihat script image ini ternyata nggak banyak berpengaruh pada loading ya.

    seperti biasa mbak scriptnya saya save dulu

    BalasHapus
    Balasan
    1. iya mas Yan tidak semua scrip memberatkan loading blog, apalagi script diatas masih tergolong baru, dibuat tahun 2013 jadi masih relevan dengan browser utama..
      silahkan mas Yan.. :)

      Hapus
    2. dari scriptnya gitu mas.. :)

      Hapus
  7. wuih keren nih gambar singo edan nampang keren disini mbak.hehehe

    BalasHapus
    Balasan
    1. hayoo fansnya Ongis Nade ya mas.. :)

      Hapus
    2. ya jelas lah mbak.kera ngalam koq.

      eh koq mbak ana tau ongis nade sih,emang orang mana coba?

      Hapus
    3. :) Salam Satu Jiwa mas Yan dari Aremanita.. :)
      saya masih tetangga mas dari kota sebelah Ngalam ke timur, Probolinggo
      dulu sempat 2 tahun di Malang mas, tahun 2000

      Hapus
  8. Bagus bgt mba, Gambarnya klo di refresh jadi berubah tempat... Tapi kadang-kadang Jquerynya suka gak respon mba...yang tampil teksnya aja..

    BalasHapus
    Balasan
    1. kalau gak respon kemungkinan dari koneksinya mas.. :)

      Hapus
  9. Berarti nggak selamanya blog tersebut jadi berat ya mbak?

    BalasHapus
    Balasan
    1. yups betul, tidak selamanya script memberatkan loading blog :)

      Hapus
  10. Bagus juga ni sepertinya kalau diterapkan di blog. O iya Mak saya mau tanya ni, gimana dengan loadingnya, ngaruh ga kalau di pasang ke blog?

    BalasHapus
    Balasan
    1. aih jadi dipanggil Mak nich... :)
      tidak ada pengaruhnya mas, silahkan dicoba :)

      Hapus
  11. tampilannya bagus. mungkin sekarang ini lagi ternd ya mbk tampilan seperti itu, kaya di hp lumia.

    BalasHapus
    Balasan
    1. bagus tuch mas idenya, jika bingkainya di perlebar, mungkin akan lebih mirip lagi mas,, silahkan dikembangkan mas.. :)

      Hapus
    2. tapi dibuka di komputer saya kok lumayan lama ya? atau krn internet saya yang lemot ya.

      Hapus
    3. di laptop saya nyaman kok mas.. lancar...

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia