Pages

DonkeyMails.com: No Minimum Payout
Server : Channel :
Use List | DalNet Commands (Open) | Help

Monday, March 26, 2012

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 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.

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...
Pilihan Gambar Tombol Buku Tamu :

  • http://lh4.googleusercontent.com/-28NQT1tb3KA/T1dub83RP0I/AAAAAAAABVM/nFXGjaGiZrY/s800/Buku%2520Tamu%2520Biru.png


  • http://lh4.googleusercontent.com/-kGDoh5HD3_g/T1dub0XVj5I/AAAAAAAABU4/xRwAujjjoLM/s800/Buku%2520Tamu%2520Hijau.png


  • http://lh4.googleusercontent.com/-zBcQkdEpXkM/T1dub8XRthI/AAAAAAAABU8/rvj9VHOO3ig/s800/Buku%2520Tamu.png


  • http://lh3.googleusercontent.com/-Z1fxhlvqeOM/T1ducoHlDLI/AAAAAAAABVE/AFtwHTnN9Hk/s800/buku%2520tamu.gif


  • http://lh6.googleusercontent.com/-6qlXHYzWTMU/T1duc2xbQhI/AAAAAAAABVI/NE_nP1mMakE/s800/bukutamu.gif


  • http://lh4.googleusercontent.com/-Dxsf5_XWLEM/T1dudaTvzqI/AAAAAAAABVc/D9P23mLWQP0/s800/crosbonz.gif


  • http://2.bp.blogspot.com/-6qTVuT1kG5s/VNN1YgiS3yI/AAAAAAAAFns/Ux2G4mkyAXc/s1600/chatboxnew.png


  • http://3.bp.blogspot.com/-Lm2GOHxjlZg/VTr2_7DG_CI/AAAAAAAAGKw/N91BQEHDtys/s1600/Anim_Cbox.gif


  • http://lh4.googleusercontent.com/-Jp9-bWJx-Z0/T1dud7-NefI/AAAAAAAABVg/DJzvhPbpQYA/s800/romaterlalusungguh.png
.: Semoga Bermanfaat :.
DMCAProtected by CopyscapeMyFreeCopyright.com Registered & Protected
Share :
Comments
Tweets
3 Comments

3 comments:

  1. waah wah, si akang makin keren aja nih, wkwkwk :D
    follow back sukses kang ;)

    ReplyDelete
  2. . . keren. tapi kalo pake ini kasihan yang liatnya pake hape. cz dulu temen aq pernah liat blog aq n dia gak bisa baca postingan aq. huhh . .

    ReplyDelete