Artikel Terbaru :

Selasa, 14 Juni 2011

Cara Membuat Lightbox di Blog

Untuk membuat lihtbox yang membuat blog anda semakin indah,dan gambar yang dilihat tidak banyak memakai ruang bloh anda,Berikut cara membuat lightbox di Blogger yang saya ambil dari Simplex Desain.





1. Masuk ke Dasbor, Masuk ke Rancangan, kemudian Edit HTML
2. Masukkan kode dibawah ini sebelum kode <body>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'
type='text/javascript'/>
<style type='text/css'>
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>


<script src='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.js'
type='text/javascript'/>
<link href='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css'
media='screen' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
$(function() {
$(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png],
a[href$=gif], a[href$=bmp]:has(img)&#39;).lightBox();
});
</script>

3. Simpan dan selesai

0 komentar:

Posting Komentar

Terima kasih Atas Komentarnya.

Pasang Iklan Anda Di Sini

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | coupon codes