Cara Membuat Blogger LightBox yang Mirip Facebook

|

Kalau lagi mainan Facebook pasti sobat tau apa yang namanya LightBox, sebuah kotak pesan yang muncul kalo kita klik sebuah link - misalnya add friends, pasti ada kotak pesan yang muncul isinya masukkan kategori dan tambahkan pesan. Atau saat ada temen add kita trus mau liat mutual friends, itu juga LightBox.

Nah sekarang di Blogger sobat juga bisa tambahin widget seperti milik Facebook, kalau mau liat demo alamatnya http://lightbox-dindingcoret.blogspot.com/2010/01/lightbox-mirip-punya-facebook.html

Untuk nambahin code ini, sobat masuk ke EDIT HTML template. Jangan lupa di download dulu! Klik expand template widget.

Cari </head> trus tambahin code ini tepat diatasnya.

<script src='http://www.clickeap.5gigs.net/jquery-pack.js' type='text/javascript'/><link href='http://www.clickeap.5gigs.net/facebook-box.css' media='screen' rel='stylesheet' type='text/css'/><script src='http://www.clickeap.5gigs.net/facebook-box.js' type='text/javascript'/><script type='text/javascript'> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() })</script><style type='text/css'>.thickstyle{background: silver;}</style>

sekarang save.

Nah untuk keterangan lebih lanjut, kalau ingin kasih widget ini kedalam gambar atau foto copas code ini dengan sedikit modifikasi

<a href="#1" rel="facebox"><img src="URL gambar" /></a>
<div id="1" style="display:none;"> Nah disini sobat bisa kasih komentar apapun</div>

Keterangan:
#1 menandakan ini adalah script no 1, jika gunakan 3 script jangan lupa ganti #1 menjadi #2 atau #3.

Kalau mau link aja, copas + sedikit modifikasi juga:

<a href="URL link" rel="facebox">Nama link</a>
<div id="1" style="display: none;">Komentar Sobat
</div>

Kalau kasih komentar ke tulisan biasa:

<a href="#1" rel="facebox">Klik untuk contoh</a>
<div id="1" style="display: none;">Komentar Sobat
</div>

Semoga tutorial dan widget ini bermanfaat buat sobat sekalian! Oya jangan lupa tinggalin komentar ya!

Share