Tutorial Membuat Buku Tamu Melayang

Hai para blogger.

Kali ini saya ingin menshare sebuah tricks blogger yang mungkin berguna untuk kalian.
Trick yang saya ingin share ke kalian adalah Tutorial Membuat Buku Tamu Melayang.


Tahu kah kalian dengan yang namanya bukutamu?
Bukutamu ,adalah dimana pada kalian atau para visitor blog kalian dapat meninggalkan komentar pada blog kalian.



Baiklah saya akan langsung ke Tutorialnya.

• Login keblog kalian.
• Klik Template dan klik edit html.
• Copas script dibawah ini pada template blog kalian.

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}* html #gb{position:relative;}

.gbtab{

height:150px;

width:50px;

float:left;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiThvXIIsk6z5Wr6LffJ27Yw9-sCg894-nPYZtALhFZj8GRuZsiBJVg_GAoxHKj6hzf7GBvvB4sde7GvKPysvM6xdvJW212N6t-lvK8xiIKgg2deQgx7PCOlivG11o-52MzrQRiss9ut88/s1600/Bukutamu6.gif') no-repeat;

}

.gbcontent {

float:left;

border:1px solid #000000;

-moz-border-radius-bottomleft:5px;

-webkit-border-radius-bottomleft:5px;

-o-border-radius-bottomleft:5px;

-khtml-border-radius-bottomleft:5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-topleft: 5px;

background: #F2F2F2; url() no-repeat bottom;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);

gb.opened = !gb.opened;

}function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}

}</script>

<div id="gb">

<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">

<center>

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=593855&amp;boxtag=k2cs6a&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-593855" style="border:#ababab 1px solid;" id="cboxmain7-593855"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=593855&amp;boxtag=k2cs6a&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-593855" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-593855"></iframe></div>

</div>

<!-- END CBOX -->

<br />

<div style="text-align:center">

<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://www.myblog21.com/2013/05/tutorial-membuat-buku-tamu-melayang.html"> widget! </a></span>

</div>

</center></div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (50-gb.offsetWidth).toString() + "px";

</script>

</div>

• klik pratinjau terlebih dahulu untuk memastika scriptnya cocok untuk HTML blog kalian
• Jika berhasil lalu klik save

Ctt:

1. Tulisan yang berwarna merah bisa kalian ganti dengan link gambar chatbox kalian.
2. Dan tulisan yang berwarna biru ganti dengan script cbox kalian,jika kalian belum mempunyai script cbox kalian bisa membuatnya DISINI