بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ اارَّØِيم
Cara Membuat Buku Tamu / ChatBox Di Blogspot - Assalamualaikum Wr.Wb
Kali ini saya akan mengajarkan kepada sobat tentang cara membuat kotak pesan/buku tamu untuk chatingan dengan menggunakan CBOX. Dengan membuat kotak pesan/buku tamu ini tentunya blog sobat semakin cantik tampilannya. Tentu sangat mudah untuk membuat kotak pesan/buku tamu ini. Ikuti saja langkah-langkah yang ada di bawah ini.
1. Harus mempunyai CBOX. Jika belum punya silahkan baca dulu artikel Cara Membuat CBOX
2. Logg in ke Blogger sobat
3. Seperti biasa masuk ke Tata Letak
4. Tambahkan Gadget ~> HTML/JavaScript
5. Setelah itu copy script yang ada di bawah ini
<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png~original') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>
Masukkan kode CBOX sobat di sini
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png~original') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>
Masukkan kode CBOX sobat di sini
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://www.rosyid-dunia.blogspot.co.id/2015/11/cara-membuat-buku-tamu.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>
</div>
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://www.rosyid-dunia.blogspot.co.id/2015/11/cara-membuat-buku-tamu.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>
</div>
6. Paste script yang telah dicopy tadi kedalam kotak yang disediakan dan judulnya biarkan kosong
7. Ganti tulisan yang berwarna biru dengan kode CBOX sobat
8. Klik simpan
Selesai sudah cara buat Buku Tamu / Chat Box... Mudah kan,,?
Jika masih ada yang bingung, silahkan berkomentar di bawah atau hubungi langsung ke Contact
Wassalamualaikum Wr.Wb
Pelajari juga Cara Membuat Chat Box dan Cara Mengganti Cursor Di Blog, dan pelajari juga artikel - artikel terkait lainnya di bawah ini :
Selamat Datang di blog Dunia Mayaku
0 Komentar untuk "Cara Membuat Buku Tamu / ChatBox Di Blogspot"