Cara Mudah Membuat Buku Tamu Melayang

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. Widget buku tamu/guestbook melayang atau floating widget biasanya digunakan untuk buku tamu/guest book (shoutmix atau cbox) atau widget seperti statistik blog dan lain-lain terserah yang mau memakai saja. Widget buku tamu atau chatbox pada postingan artikel ini, saya tampilkan beberapa cara unik dan menarik. 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.

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.
  
  
  1. Bukutamu Menggunakan Script JQuery LightBox
  
  
  
  
  

  <script>
  if(typeof(jQuery) == 'undefined'){document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
  </script>
  <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://sites.google.com/site/monozcore/home/colorbox-min.js'></script>
  <link href='http://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>
  
  <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 bukutamu/chatbox 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 merah merupakan link URL gambar tombol. Pada postingan kali ini saya juga memberikan beberapa pilihan gambar tombol buku tamu.
  • Teks yang berwarna biru merupakan tempat untuk menaruh kode script buku tamu atau chatbox.
  
  

  ---

  2. Bukutamu Menggunakan Javascript 1
  
  

  <script>
  if(typeof(jQuery) == 'undefined'){document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
  </script>
  
  <div id="mozgb">
  <div class="gbtab" onclick="showHideGB()"></div>
  <div class="gbcontent">
  TARUH KODE CHATBOX DISINI...
  </div>
  </div>
  
  <script>
  var imgGBsrc='http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png';
  var borderGB='#A5BD51';
  var backgroundGB='#F5F5F5';
  </script>
  
  <script type="text/javascript">
  var gbstrhtml='';
  gbstrhtml += '<style type="text\/css">#mozgb{position:fixed;top:50px;z-index:+1000;}';
  gbstrhtml += '* html #mozgb{position:relative;}.gbtab{height:100px;width:30px;float:left;cursor:pointer;background:url('+imgGBsrc+') no-repeat;}';
  gbstrhtml += '.gbcontent{float:left;border:2px solid '+borderGB+';background:'+backgroundGB+';padding:10px;}<\/style>';
  $('body').append(gbstrhtml);
  
  function showHideGB(){
  var mozgb = document.getElementById("mozgb");
  var w = mozgb.offsetWidth;
  mozgb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
  mozgb.opened = !mozgb.opened;
  }
  function moveGB(x0, xf){
  var mozgb = document.getElementById("mozgb");
  var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
  var dir = xf>x0 ? 1 : -1;
  var x = x0 + dx * dir;
  mozgb.style.right = x.toString() + "px";
  if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
  }
  var mozgb = document.getElementById("mozgb");
  mozgb.style.right = (30-mozgb.offsetWidth).toString() + "px";
  </script>

  
  KETERANGAN :
  • Teks yang berwarna merah merupakan link URL gambar tombol, kode warna border dan warna background. Pada postingan kali ini saya juga memberikan beberapa pilihan gambar tombol buku tamu.
  • Teks yang berwarna biru merupakan tempat untuk menaruh kode script buku tamu atau chatbox.
  
  
  Pilihan Gambar Tombol Buku Tamu Javascript 1:
  
  
  • 
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJpWUp3NTaurSy_vtRfETcrnsyDRJqfNVc4EqFKXlWGypT4nBtPJfpLgLhuIl6rj2NxbXa6hLSnQA0BBWvFGpDvELs6xwV5tRSUQ2ng7VlPadAt27sfV7TRR8k0bfB7JDNH3kaY9Nvya7/s1600/guest-book.png
  
  
  • 
    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
  
  

  ---

  3. Bukutamu Menggunakan Javascript 2
  
  

  <script>
  if(typeof(jQuery) == 'undefined'){document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
  </script>
  
  <div id="mozgb">
  <div class="gbtab" onclick="showHideGB()"></div>
  <div class="gbcontent">
  TARUH KODE CHATBOX DISINI...
  </div>
  </div>
  
  <script>
  var borderGB='#A5BD51';
  var backgroundGB='#F5F5F5';
  </script>
  
  <script type="text/javascript">
  var imgGBsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZkUb7Zwp8Gjk3eVROJDyMpP3zTl0bqBIyRs4FpPo7JpNwVcLj4oyyrCX_6AQL5B4VFjWwL0lMr2L6uQijMDQCRX3qh5SZcJbGJrjrmITUjI7IcouYaHIgpWCoQOAB5N4mAX346JgXgzd/s1600/guestbook_icon.gif';
  var gbstrhtml='';
  gbstrhtml += '<style type="text\/css">#mozgb{position:fixed;top:50px;z-index:+1000;}';
  gbstrhtml += '* html #mozgb{position:relative;}.gbtab{height:90px;width:90px;border:1px '+borderGB+' solid;border-radius:8px 0px 0px 8px;float:left;cursor:pointer;background:url('+imgGBsrc+')no-repeat;background-size: 100% 100%;}';
  gbstrhtml += '.gbcontent{float:left;border:2px solid '+borderGB+';background:'+backgroundGB+';padding:10px;}<\/style>';
  $('body').append(gbstrhtml);
  
  function showHideGB(){
  var mozgb = document.getElementById("mozgb");
  var w = mozgb.offsetWidth;
  mozgb.opened ? moveGB(0, 93-w) : moveGB(100-w, 1);
  mozgb.opened = !mozgb.opened;
  }
  function moveGB(x0, xf){
  var mozgb = document.getElementById("mozgb");
  var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
  var dir = xf>x0 ? 1 : -1;
  var x = x0 + dx * dir;
  mozgb.style.right = x.toString()+ "px";
  if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
  }
  var mozgb = document.getElementById("mozgb");
  mozgb.style.right = (92-mozgb.offsetWidth).toString() + "px";
  </script>

  
  KETERANGAN :
  • Teks yang berwarna merah merupakan kode warna border dan warna background.
  • Teks yang berwarna biru merupakan tempat untuk menaruh kode script buku tamu atau chatbox.
  
  
  Pilihan Gambar Tombol Buku Tamu Javascript 2:
  
  
  • 
    http://lh5.googleusercontent.com/-CreRDYJL4n4/UJ9i7cqABHI/AAAAAAAACrU/rf8gLKdre_8/s800/Assisten.gif
  
  
  • 
    http://1.bp.blogspot.com/-u1owPt_ica4/VNCjrPKwgHI/AAAAAAAAFco/tD_s8wkzFZg/s1600/avatar_asisten.gif
  
  
  • 
    http://4.bp.blogspot.com/-ZKDLb9ywcak/VNCjrJfDsMI/AAAAAAAAFcg/dO10AVfuh7o/s1600/avatar_asisten_2.gif
  
  
  • 
    http://4.bp.blogspot.com/-7aRYUzF1nbc/VNCjrKfBp0I/AAAAAAAAFck/iyRtJAVry6Y/s1600/avatar_asisten_3.gif


• Klik "Save" dan lihat hasilnya...

Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.

Get this widget