Bagaimana Cara Buat Buku Tamu Tersembunyi Di Blog??
seteh saya cari2 di berbagai artiket tetangga.. dan akhirnya ketemu tampilan buku tamu yang keren menurut saya. chat box nya bisa buka tutup. Selain bisa menghemat tempat, blog kamu juga kelihatan keren dengan Buku Tamu Tersembunyi ini. Seperti gambar di bawah.
nih saya bagi tau cara pasangnya. Tulisan ini saya kutip dari Ahmad Rifai.
- pertama kamu punya dulu script buku tamu, kamu bisa dapatkan di www.cbox.ws atau tempat penyedia script buku tamu lainnya. (copy script yang disediakan)
- sekarang login ke blog kamu pilih Rancangan/Design, pilih Elemen Laman dan Klik Tambah Gadget/Add Gadget, pilih HTML/JavaScript. Letakkan script buku tamu di laman HTML/JavaScript.
- trus copy script dibawah ini. letakkan diatas script yang kamu dapatkan di situs penyedia buku tamu (ex: www.cbox.ws)
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mPO6UuGOAaXyw2iclKIa_TmEiAiWFwUt7qQ-6OL1eQhp_NfRp9Bqo7DtXog2mobpPN6ibcheerm7WmS8PSEFngZ_Y-4QFu7y__Ll0UKzrfGeAB3TNhnSWeB9a_7SxUvg_hdxUJRa3WY/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">
- terakhir copy script di bawah ini, dan leakkan dibawah script yang kamu dapat dari situs penyedia buku tamu
<div style="text-align:right">
<a href="http://gubukburuk.blogspot.com/2011/10/cara-buat-buku-tamu-tersembunyi-di-blog.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
Jadi susunannya seperti 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mPO6UuGOAaXyw2iclKIa_TmEiAiWFwUt7qQ-6OL1eQhp_NfRp9Bqo7DtXog2mobpPN6ibcheerm7WmS8PSEFngZ_Y-4QFu7y__Ll0UKzrfGeAB3TNhnSWeB9a_7SxUvg_hdxUJRa3WY/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">
Letakkan script dari situs Buku Tamu Disini
<div style="text-align:right">
<a href="http://gubukburuk.blogspot.com/2011/10/cara-buat-buku-tamu-tersembunyi-di-blog.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
Simpan dan selesai dah...dan coba lihat hasilnya. kamu bisa merubah beberapa kode css-nya sesuai dengan template kamu.
sekian Cara Buat Buku Tamu Tersembunyi Di Blog dari saya..
Selamat mencoba.!!
11/24/2011 12:54 PM
kunjungan pagi mas brow...
follow me yah...
http://ilmukomputer-19.blogspot.com/
11/25/2011 4:23 AM
tq mas bro...
ok di follaw balik bro
12/23/2011 6:52 AM
ijian kopas boleh ndak gan ? ntar tak tamabh link sumbernya yang GEDE.. hehe.. knjungi balik and kommentt ya gan..
1/11/2012 4:26 AM
thanks dah bro dah berhasil.....kalu mau cari software free dsini aj mas bro
jangan lupa mampir yah mas bro
follow yah kalau dah masuk q akan follow balik gan...tingglkn jejak yah mas bro
http://metal-xp.blogspot.com/
1/13/2012 8:19 AM
singgah sini,, senggol balik yaaa
2/07/2012 3:19 PM
Jalan 2 pagi .... mampir balik ya