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 :
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;">Keterangan : Height dan width bisa sobat ganti sesukanya
<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&boxtag=rydhc1&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&boxtag=rydhc1&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>
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">6. Jika sudah, sobat simpan dan lihat hasilnya
#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>
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
0 Komentar