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

Lihat DEMO

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 2015-02-09T09:25:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni