Tutor Memasang Buku Tamu [Cbox]

Bismillahirrohmanirrokhim ..

Manfaat dari di pasangnya buku tamu di Blogspot adalah sebagai tempat berbicara/menyampaikan pesan singkat kepada admin Blog dari pengunjung Blogspot .. Di luar semua itu juga sebagai penghias dari halaman Blogspot itu sendiri ..

Dari artikel ini saya hanya menuliskan bagaimana cara memasang Buku Tamu secara Semi Hidden .. dan untuk contoh/demonya silakan  lihat di sebelah kanan halaman blog ini .. tepati untuk cara pembuatan/Creatif buku tamu itu sendiri tidak saya cantumkan disini .. karena saya sudah membuat artikelnya , silakan  lihat Disini

Cat : saat creatif buku tamu [CBox] pilihlah warna transparan

"Tutor Memasang Buku Tamu [Cbox]"

1. Login ke bloger sobat ==> Dasbor ==> tata letak ==>  tambah Gadget dan Pilih HTML/javascript

2. Masukkan Code di bawah ini ..

Untuk melihat file Click Spoiler

<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj4CG6BPkv_gTcFh64o1ZAPg9-_ACF-bahCNuhBvA8KbHbTP5oDXCdg7ogeFI6iuXmahOu_LyS1fcKo_Qyj2gdYqQXcDeSV9lPNFdWIYI-D-IhCwn4KZqsbuVT9QFRcNH2eqXX1dUa_lVt/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i872.photobucket.com/albums/ab285/yopibukhori/bersinar.gif) no-repeat;">

Tempatkan Code Cbox Sobat di Sini


</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>

Ket : tulisan yang saya tandai dengan warna merah adalah tempat sobat menaruh Code Cbox sobat ..

3. masih dari kotakan HTML Sobat masukkan atau tambahkan Code script di bawah ini, yg berfungsi sebagai tombolnya ..

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3K13aFVZBqyalMbVrCgBHL75YH_kdV5TcO3L0c2OLptN2fVVKPJEnU1VXYfw5GeIGuf_oPeLb5e7thAriTPWMgfUMu_EoldUFWjrdz-IcuPP1NPw9D2zPfW3TCyPtxYO74nEir6Zr-EeK/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

4. Silakan simpan dan lihat hasilnya ..

Semoga artikel ini benrmanfaat untuk kita semua ..

dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. amin ..














<a href="http://nicroganteng.blogspot.com/2012/11/tutor-memasang-buku-tamu-cbox.html">Tutor Memasang Buku Tamu [Cbox]</a>