Blogger Tips and Trick Cara Buat Buku Tamu Cbox nempel di Sebelah Kanan Blog

Cara Buat Buku Tamu Cbox nempel di Sebelah Kanan Blog

Iqbalfp Wednesday, May 01, 2013

Buku tamu Cbox nempel atau autohide di bagian samping blog merupakan salah satu cara menghemat sidebar blog. Buku tamu ini akan tersembunyi dan hanya terlihat tulisan buku tamu saja pada bagian samping blog. Buku tamu akan otomatis tampil setelah anda mengklik tulisan "Buku Tamu" tersebut.

Berikut cara lengkapnya...
1. Sign in ke blogger dan silahkan Login dengan Account Anda
2. Pilih Layout/Tata Letak
3. Pilih Page Elemen/Elemen Halaman
4. Klik Add a Gadget/Tambah Gadget
5. Lalu pilih "HTML/JavaScript" dan copykan code script di bawah ini :

<style type="text/css">
 #gb{ 
position:fixed;
 top:50px;
 z-index:+1000;
 }
 * html #gb{position:relative;} 
.gbtab{
 height:150px;
width:30px;
 float:left; 
cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9g0uaGdbMH85qQNl3BMNmddEhLXDM7a9wy6FXlg-NPri7tlu858bRN7N-KmhIsfohQ2i7l0bgr_RRBNq8ruZuUwAuiCkEl4ckE-gSa7AdDutNtb7vY6w6MG_V3u8J9GE3y5jTN1m_F6Rg/s1600/buku+tamu.png') no-repeat;
 }
.gbcontent{
 float:left;
 border:1px 
solid #B3B3B3; 
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8F8yDp_l-_2Fe7p0DYQQkCyIPPmPzUs5K60IguYsKh0nkUwlPhu53D1xAoFN-KUrqs1xXvp1oAck-GtZLJWf_gWO7xkpsNsLQe4aesFKBRtxvwPRrbIr45Z7uRvQUYnY3UfPCnBwaC6jL/s1600/sword+blue.gif');
 padding:5px;
 }
 </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">

Code CBox milik sahabat/ code chat lain

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

Note: Ganti tulisan Code Cbox milik kawan/code chat lain dengan kode Cbox anda yang telah peroleh di Cbox.

Subscribe to: Post Comments (Atom)