» » Menampilkan Buku Tamu Menggunakan LightBox

Menampilkan Buku Tamu Menggunakan LightBox

    Label: Blogspot


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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRUly0HE901ZN4qpUaF10yWTcFCmoQU-HOak_qggiLmjsAjKp3cwJMATqXR9cqn_O0NtS5kG1fjX4sd4Ij9pvpO4675dAQl6E2R4GlupNjmGOaHGlWgb_QbxcxE1kPXRKmsAG3Wq0JBNy8/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 :

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnuIbn0qlW8UQK1jJHUiixy0S_EHtUyMjLpwHvWgVUHVo2IQuaZv_kQ3TZ_n6J1SqyglrnOViOGG2rH-jFrLM0P2qpNnfnDk3gvcCquf_AXuE3O3hP8hTnOSMkOE31XVhiwqfwu142xlkF/s800/Buku%2520Tamu%2520Biru.png


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYNcne-VHDBBRdjGhvp5BseN-txjp6YFsLLPJxBao8M9hnuBV9-4MkzY_X9Ain3Pl6EyCoUfnNoKjt65gHBElgJBrKXfNiSUjU4bceXASUxiV6h6IELxwAr2WbKdwLkKURzGYJDEujubq/s800/Buku%2520Tamu%2520Hijau.png


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRUly0HE901ZN4qpUaF10yWTcFCmoQU-HOak_qggiLmjsAjKp3cwJMATqXR9cqn_O0NtS5kG1fjX4sd4Ij9pvpO4675dAQl6E2R4GlupNjmGOaHGlWgb_QbxcxE1kPXRKmsAG3Wq0JBNy8/s800/Buku%2520Tamu.png


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZfKM2ulACpIBiq4CWFpmkeye9MwLAUx2tsiJkOOyB9k7V3Wv82mz3OACzNIJvYAjnkrbjlCJXNpNRzQeBDKbVn2NWWl07ubWYev8NW-xLgKCWAPy_GPBOnTMbW9gVu_6s5FH4kmGivwa4/s800/buku%2520tamu.gif


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ8dRUpnqKz8TuOdyEsXjUz1GIax9LV1zSMPn-gzmSVoPxDyslx4G0e-x1Jwp0BXvT_g3J5vTXdfy1czn-GqzvD22C7qC2AQLU6xyiLmbkijFVpyl_GUzUPlVU_3Xs1px6jUyoe2oD8E9y/s800/bukutamu.gif


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPLB8NV_xdMUhgyZWF0bC1e0Ic7ePlx0xr-Nowos5qtHDpwynqx1cQojEMTRF_l4Ju2UIsHkQKqYqS0fHdUZBOPgGS10ayiKropgO7zj_cvEzP3cgzy2pFzRrJghCyBWOva-g9oWMBiB44/s800/crosbonz.gif


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLLAguxrRPV9JgGN_9mZXFqwmysCO2hlugJaMfrnMHMkILvLc91YVJGWLiFUORkuFp0-OIDnxEgNIipW1jE5PnBE_XFTTZajxYZhruhMh9OQlHlD30NLJaievltWm89eTmas3DvnZCdMl5/s800/romaterlalusungguh.png
.: Semoga Bermanfaat :.
Menampilkan Buku Tamu Menggunakan LightBox 4.5 5 Unknown Salah satu widget yang wajib dipasang di blog, yaitu widget Buku tamu / chatbox. Banyak cara untuk menampilkan widget buku tamu atau chatbox...


Label:

Tidak ada komentar:

Posting Komentar