Cara Memasang Buku Tamu/Guest Book di Blog
- Cara Pasang Buku Tamu di blog
Bagi kalian yang baru masuk ke dunia blog, saat jalan-jalan mengunjungi blog lain, pasti kalian pernah melihat buku tamu/ chat box/ guest book yang menggantung di sebelah kanan blog. contohnya seperti pada blog ini.
Tanpa panjang lebar lagi, langsung aku kasih tau caranya.
1. Buka situs cbox.ws , daftarkan blog anda dengan cara sign up, dan ikuti langkah-langkap pendaftaran.
2. Setelah login, pilih menu "look & feel"
- Layout option digunakan untuk mengatur lebar dan tinggi chat box anda.
- Style Preset digunakan untuk memilih tema-tema default chat box anda.
- Color & Font digunakan untuk mengatur warna dan jenis font untuk chat box anda.
3. Setelah anda mengatur warna dan desain chat box anda, klik "APPLY" kemudian klik "GET YOUR NEW CODE", pilih inline kemudian copy code tersebut.
Langkah selanjutnya :
1. Login ke akun blog kalian http://www.blogger.com/
2. Tambahkan Widget, kemudian pilih widget HTML
3. Copy Paste kan code dibawah ini
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1143.photobucket.com/albums/n631/aga-yuditra/Chat-Box-gif.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #ff0000;
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">
COPY PASTE SCRIPT DARI CBOX DISINI
<div style="text-align:left"><br/><a href="http://shootersspero.blogspot.com/2012/01/cara-pasang-buku-tamu-di-blog-bagi.html">Get This!</a><br/><a href="javascript:showHideGB()">
[x]
</a>
</div>
</div></div><script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
4. Ganti text berwana MERAH dengan code yang anda dapat dari text box.
5. Atur warna background dan border dengan mengganti test berwarna BIRU
Jika kesulitan menentukan kode warna silahkan buka Artikel Cara Mendapatkan Kode HTML untuk Warna.
6. Jika pengen ganti tombol CHAT BOX supaya beda dari blog ini, ganti URL image yang berwarna ORANGE.
7. Sesuaikan ukuran tombol dengan ukuran image yang anda gunakan dengan cara mengganti angka yang berwarna KUNING.
Demikian info yang dapat saya sampaikan, semoga bermanfaat.
Langganan:
Postingan (Atom)