Cara Membuat Buku Tamu/Guest Book (tutup-buka) di Blog

Percantik Blog dengan Guest Book

Hai berjumpa lagi dengan saya semoga tidak bosen bosennya hehe
oke kali ini saya akan jelaskan cara membuat buku tamu/guest book . namun buku tamu atau guest book yang biasa biasa pasti sudah bosen atau enek yah? hehe . tapi kali ini yang akan saya jelaskan adalah guest book yang bisa membuka dan menutup sendiri . untuk live demo bisa lihat di samping kanan atas blog ini sendiri ada tulisan guest book kan? coba silahkan klik .
nah sudah paham ?  guest book ini selain mempercantik blog juga membuat blog anda terlihat lebih profesional  dan tentunya harus di barengi dengan domain TLD yah. hihi
oke lanjut saja ke tutorial cara pasangnya

pertama-tama

1. masuk ke dashboard blogger
2. pilih tata letak
3. add gadget
4. code html/javascript

Kemudian Masukan Script dibawah ini

<style type="text/css">
      #gb{
      position:fixed;
      top:25px;
      z-index:+1000;
      }
      * html #gb{position:relative;}
      .gbtab{
      height:150px;
      width:30px;
      float:left;
      cursor:pointer;
      background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggMtLDqOzRjNYZccKTjxOID8-IqHANrrc8Kro-6Zt-hPZ-Ywyzz-pIiGFMm64386z5wLkZiF51gGwNmNJ_Y4YyusPmI5Ooh2NlgZ7CBKXwuRhXhSGVvKmp0u38jB9NnQtF9OtcVopX0MY/s1600/GUESTBOOK111.png') no-repeat;
      }
      .gbcontent{
      float:left;
      border:2px solid #1300F2;
      background:#A9A9F5;
      padding:10px;
      }
      </style>
      <script type="text/javascript">
      function showHideGB(){
      var gb = document.getElementById("gb");
      var w = gb.offsetWidth;
      gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
      gb.opened = !gb.opened;
      }
      function moveGB(x0, xf){
      var gb = document.getElementById("gb");
      var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
      var dir = xf>x0 ? 1 : -1;
      var x = x0 + dx * dir;
      gb.style.right = x.toString() + "px";
      if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
      }
      </script>
      <div id="gb">
      <div class="gbtab" onclick="showHideGB()"> </div>
      <div class="gbcontent">

LETAKAN KODE CBOX ATAU SHOUTMIX ANDA DI SINI

      <div style="text-align:right">
      <a href="javascript:showHideGB()">
      [close]
      </a>
      </div>
      </div>
      </div>
      <script type="text/javascript">
      var gb = document.getElementById("gb");
      gb.style.right = (30-gb.offsetWidth).toString() + "px";
      </script>

5. Ganti tulisan berwarna biru  dengan link gambar guest book anda atau bisa abaikan bila ingin seperti punya saya

6.ganti tulisan warna merah dengan kode html dari CBOX atau SHOUTMIX untuk blog ini sendiri menggunakan cbox (lebih mudah)
7.setelah selesai tinggal di simpan/save
dan lihatlah guest book kalian sudah tertempel di samping kanan blognah selesai sudah tutorial cara membuat buku tamu/guest book(tutup-buka) di blog
semoga bermanfaat

Tweet

Artikel keren lainnya: