Penelusuran Om Google

Loading...

Steaming Radio On-Line

Thursday, June 7, 2012

Menampilkan Buku Tamu Menggunakan LightBox

Suara Anda 
ini merupakan 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 monozcore, 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.


PEMASANGAN JQUERY


1. Login ke Blogger
2. lalu ikuti langkah langkah berikut ini.

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.

    clik gambar
  • 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. berikut scriptnya : <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/SHORTMIX 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/Shortmix/box.
    • Teks yang berwarna merah merupakan link URL gambar tombol. berikut contoh URL gambar.

  • 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
  • kemudian Klik "Save" dan lihat hasil Buku tamu yang anda Buat tersebut.

No comments:

Post a Comment

Silakan Isi komentar anda dengan kosa kata yang santun, tidak mengandung kata - kata celaan dan jangan menempatkan link di dalam komentar. Terimakasih.

Buku Tamu
Get this widget