Menambahkan Accessories CBox / Buku Tamu di Samping Blog

Assalamualaikum Wr. Wb.
Hay sobat blogger.....kali ini saya ingin berbagi pengetahuan sekalian ingin share cara membuat CBox pada blog yang biasanya disebut dengan Buku Tamu,,,Hahayyyy....

Tapi kali ini CBox yang saya akan share yaitu CBox atau biasanya disebut dengan Buku Tamu bukan  yang  sering kali kita lihat di area widget pada blog, Namun CBox yang akan saya Share yaitu CBox yang tepatnya  berada di posisi samping blog sobat.....

Okey...Jika sobat blogger tertarik dengan Cara Membuat CBox / Buku Tamu di Samping Blog ikuti langkah-langkahnya....!!!!

• Seperti biasa Log in ke Blogger anda [klik] disini.
• Pilih Tata Letak/Layout.
• Pada halaman Page Element/Elemen Laman.
• [Klik] Add a Gadget.
• Pilih HTML/Javascript.
• Copy code di bawah ini dan paste ke dalam HTML/Javascript tersebut.

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:200px;

width:30px;

float:left;

cursor:pointer;

background:url('http://th387.photobucket.com/albums/oo318/cem_ply/th_buku-tamu_03.gif') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #F5F5F5;

background:#000000;

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">

<!-- 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://www3.cbox.ws/box/?boxid=3261541&amp;boxtag=f2qtm9&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3261541" style="border:#0A19F7 1px solid;" id="cboxmain3-3261541"></iframe></div>

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

</div>

<!-- END CBOX -->

<br/>

<a href="http://forantum.blogspot.com">.

</a>

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

<a href="javascript:showHideGB()">

[Hide]

</a>

</div>

</div>

</div>

<script type="text/javascript">

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

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

</script>

• Sobat juga bisa merubah warna dan posisi tempatnya sesuai keinginan sobat.
• [Klik] Save...!! 
• Selesai dech....Oya, harap tinggalkan Commennya yach...!!

Semoga bermanfaat...!!
Bambua*09

Referensi:
EnaL Rhay SyahRinggan Next..>>

Artikel Terkait