TV One - Berita Terkini
Menampilkan Buku Tamu Menggunakan LightBox
Salah satu widget yang wajib dipasang di blog, yaitu widget Buku tamu /
chatbox. Banyak cara untuk menampilkan widget buku tamu atau chatbox
ini, ada yang ditaruh langsung pada sidebar gadaget seperti blog
jupenu, ada yang menggunakan efek melayang, ada yang menggunakan efek
drop, ada yang menggunakan efek slide dan masih banyak cara lainnya.
Kali ini widget buku tamu atau chatbox, saya tampilkan dengan cara unik
yaitu menggunakan JQuery LightBox. Widget buku tamu atau chatbox ini
menggunakan tombol buku tamu untuk bisa menampilkan buku tamu atau
chatbox. Tombol buku tamu yang digunakan bisa disesuaikan penempatannya
dan juga gambar tombol buku tamu bisa disesuaikan dengan yang sobat
inginkan.
Cara Pemasangan :
- Login ke
blog sobat... - Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
- Apabila sobat belum menggunakan kode JQuery silakan copy kode JQuery berikut diatas kode </Head> pada template blog. Jika sudah ada kode JQuery di blognya silakan lewati langkah ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> - Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.
<style>
#buku_tamu {
position:fixed;_position:absolute;top:5px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#buku_tamu:hover {
position:fixed;_position:absolute;top:5px; right:5px;
}
</style>
<script src='http://monozcore-project.googlecode.com/files/colorbox-min.js'></script>
<link href='https://sites.google.com/site/monozcore/home/fbPopup.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
$(".inline").colorbox({inline:true, width:"300px"});
});
</script> - Copy-paste kode di bawah ini pada bagian atau di bawah <Body> di kode HTML template blog sobat.
<div align='right' id='buku_tamu'>
<a class='inline' href='#bukutamu' title='Buku Tamu'><img alt='Buku Tamu' border='0' src='https://lh4.googleusercontent.com/-zBcQkdEpXkM/T1dub8XRthI/AAAAAAAABU8/rvj9VHOO3ig/s800/Buku%2520Tamu.png'/></a>
</div>
<div style='display:none;'>
<div id='bukutamu' style='padding:0px; overflow:hidden; background:#fff;'>
<center>
Kode script buku tamu disini....
</center>
<div style="padding-right:5px;text-align:right; font-size:60%;"><a href="http://monozcore.blogspot.com" style="text-decoration:none;color:grey;" target="blank">Get this widget</a></div>
</div>
</div>
- Keterangan :- Teks yang berwarna biru merupakan tempat untuk menaruh kode script buku tamu atau chatbox.
- Teks yang berwarna merah merupakan link URL gambar tombol. Pada postingan kali ini saya juga memberikan beberapa pilihan gambar tombol buku tamu.
- Klik "Save" dan lihat hasilnya...
| 
https://lh4.googleusercontent.com/-28NQT1tb3KA/T1dub83RP0I/AAAAAAAABVM/nFXGjaGiZrY/s800/Buku%2520Tamu%2520Biru.png
https://lh4.googleusercontent.com/-kGDoh5HD3_g/T1dub0XVj5I/AAAAAAAABU4/xRwAujjjoLM/s800/Buku%2520Tamu%2520Hijau.png
https://lh4.googleusercontent.com/-zBcQkdEpXkM/T1dub8XRthI/AAAAAAAABU8/rvj9VHOO3ig/s800/Buku%2520Tamu.png
https://lh3.googleusercontent.com/-Z1fxhlvqeOM/T1ducoHlDLI/AAAAAAAABVE/AFtwHTnN9Hk/s800/buku%2520tamu.gif
https://lh6.googleusercontent.com/-6qlXHYzWTMU/T1duc2xbQhI/AAAAAAAABVI/NE_nP1mMakE/s800/bukutamu.gif
https://lh4.googleusercontent.com/-Dxsf5_XWLEM/T1dudaTvzqI/AAAAAAAABVc/D9P23mLWQP0/s800/crosbonz.gif
https://lh4.googleusercontent.com/-Jp9-bWJx-Z0/T1dud7-NefI/AAAAAAAABVg/DJzvhPbpQYA/s800/romaterlalusungguh.png
0 rubah perkataan:
Posting Komentar