Membuat Buku Tamu Melayang Di Blog

Aizzan Blog -- Buku tamu adalah widget yang harus atau wajib ada di blog maupun web sobat, kegiatan tersebut diyakini dapat menambah backlink dan sebagai mana mesti untuk menambah visitor di blog sobat. Kelibihan dari buku tamu melayang yaitu tidak akan memakan tempat atau ruang di blog sobat melainkan nanti biasanya akan memakan loading banyak. Jika sobat sekalian berminat untuk mencobanya, silahkan ikuti tutorial dibawah ini :

Aizzan Blog:  Membuat Buku Tamu Melayang Di Blog

1. Klik disini untuk pergi ke Cbox atau disini untuk pergi ke Shoutbox

2. Jika sobat belum punya akunnya, silahkan register dulu

3. Kemudian sobat masuk Cbox maupun Shoutbox

4. Setelah itu di edit buku tamunya sobat, jika sudah copy kodenya seperti kode dibawah ini :

    <div id="cboxdiv" style="line-height: 0pt; text-align: center;">
<div>
<iframe allowtransparency="yes" frameborder="0" height="500" id="cboxmain6-601631" marginheight="2" marginwidth="2" name="cboxmain6-601631" scrolling="auto" src="http://www6.cbox.ws/box/?boxid=601631&amp;boxtag=rydhc1&amp;sec=main" style="border: 1px solid rgb(219, 226, 237);" width="100%"></iframe></div>
<div>
<iframe allowtransparency="yes" frameborder="0" height="75" id="cboxform6-601631" marginheight="2" marginwidth="2" name="cboxform6-601631" scrolling="no" src="http://www6.cbox.ws/box/?boxid=601631&amp;boxtag=rydhc1&amp;sec=form" style="border-color: -moz-use-text-color rgb(219, 226, 237) rgb(219, 226, 237); border-style: none solid solid; border-width: 0px 1px 1px;" width="100%"></iframe></div>
</div>

Keterangan : Height dan width bisa sobat ganti sesukanya

Selanjutnya dilanjutkan dengan tutorial kedua :

1. Login ke blog sobat
2. Masuk ke tataletak
3. Pilih tempat dimana saja, kemudian tambahkan gadget
4. Pilih HTML/JavaScript, klik tombot (+) pada bagian kanan
5. Masukkan kode berikut

    <style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-mrsZX_-WDkk/Te5tiGXpqNI/AAAAAAAAAZg/hDLjMWDN6_U/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">
Silakan Pasang Kode Buku Tamu yang sudah di copy tadi Di Sini

<div style="text-align:right">
<a href="http://abelavriyanno.blogspot.com/2012/04/cara-membuat-buku-tamu-melayang-di-sisi.html">[get this widget]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

6. Jika sudah, sobat simpan dan lihat hasilnya

Itulah tadi tutorial untuk membuat buku tamu melayang di blog, kalau adapun pertanyaan, kritik dan saran silahkan sobat mengisi dikolom komentar maupun di kolom kotak formulir kontak yang berada dibagian sebelah kanan artikel. Semoga bermanfaat bagi kita semuanya