Kamis, 26 Juli 2012

Cara Membuat Buku Tamu Pada Blogspot

Pada awalnya saya sangat mengiginkan buku tamu di blog yang bisa hide/ show apabila ditekan tombol. Pada saat itu saya sedikit kebingungan cara membuatnya, kalu tampil di gadget mudah saja, tinggal copy script buku tamu yang telah kita daftar di cbox atau apapun situs yang menyediakan script buku tamu. Setelah sekian lama saya nyari - nyari ma om google, akhirnya saya menemukan caranya. Padahal cara membuat hide/show buku tamu hanya perlu ditambah script supaya buku tamu bisa hide/show. cara membuatnya hampir sama dengan cara memasang buku tamu di gadget blog, sama - sama tinggal copy :D, cuma tamilnya pada tempat yang berbeda.
Ok, langsung saja, untuk membuatnya silakan ikuti perintah - perintah dibawah ini :
1. Login ke Blogger
2. Kemudian klik Rancangan
3. Selanjutnya Klik Tambah Gadget dan pilih HTML/javascript
4. Copy dan pastekan script dibawah ini kedalam form HTML/javascript

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:210px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1134.photobucket.com/albums/m613/chibaxp/buku-tamu.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:#999999;
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://www2.cbox.ws/box/?boxid=2307638&amp;boxtag=dbaay0&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain2-2307638" style="border:#ababab 1px solid;" id="cboxmain2-2307638"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www2.cbox.ws/box/?boxid=2307638&amp;boxtag=dbaay0&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform2-2307638" style="border:#ababab 1px solid;border-top:0px" id="cboxform2-2307638"></iframe></div>
</div>
<!-- END CBOX -->

<font size="2">
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</font></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Ket :
=>Kode yang berwarna HIJAU ganti dengan link gambar tombol untuk buku tamu sobat. 
=>Kode berwarna MERAH ganti dengan script buku tamu sobat.

5. Klik Simpan
 Semoga bermanfaat.........!

0 komentar:

Posting Komentar