Jumat, 16 Agustus 2013

Tips & Trik: Cara membuat buku tamu (coretan tamu) Melayang di Sisi Blog

Mau yang seperti ini..?

ok bro... langsung saja ke praktek......
Kamu pergi dulu ke Cbox
2. Daftar disana atau bisa klik disini, setelah berhasil daftar, login ke Cbox dengan akun kamu tadi. Baca:  cara membuat buku tamu dengan cbox.
3. Setelah itu, kamu isikan data-data yang di perlukan, dan copy kode HTML buku tamunya..
4. Langkah selanjutnya, masuk ke akun Blogger kamu
5. Pilih Tata Letak > Tambah Gadet > HTML/JavaScript.
6. Copy kode berikut, dan pastekan di box HTML/JavaScript.

<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://3.bp.blogspot.com/-XthfYzTuG24/Uk-7qVId3_I/AAAAAAAAATM/yXp1fd3xKzc/s1600/hgjgh.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">
Kode Cbox kamu disini
<div style="text-align:right">
<a href="http://istahilagi.blogspot.com/2013/10/tips-trik-cara-membuat-buku-tamu.html#more">.:gunakan widget ini:.</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>
 ok brai... sekarang Ganti kode yang berwarna merah, dengan kode HTML Cbox yang sudah kamu dapat di langkah no. 3

7. Nah setelah selesai, klik Simpan....

Dalam kode script diatas kamu bisa ubah dengan sesuai selera kamu sendiri dan tunjukan kreasimu.. Sekian postingan kita pada hari ini, semoga bisa membantu dan jika ada kekurangan kami mohon maaf. Semoga Bermanfat....... 

Comments
0 Comments

Tidak ada komentar:

Posting Komentar

Makasih telah berkomentar