Membuat Buku Tamu Tersembunyi
Memasang sebuah buku tamu (guestbook) pada
sebuah blog adalah hal yang cukup penting, karena buku tamu ini merupakan salah
satu sarana untuk berinteraksi antara yang Anda dengan para pengunjung blog.
Dengan adanya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan
isi hatinya tentang blog yang Anda buat, yang pasti isi dari sebuah buku tamu
ini sangatlah bervariasi
bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi lebih menarik.
bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi lebih menarik.
Pastinya Anda penasaran kan dengan buku tamu di
blog saya ini. Ternyata buku tamu ini bisa disembunyikan dengan tujuan tidak
memakan tempat seperti di sidebar blog Anda dan membuat blog Anda jadi lebih
menarik.
Namun sebelum Anda membuat buku tamu, Anda
harus menggunakan penyedia buku tamu dari pihak ketiga, tapi Anda nggak usah
khawatir, ada kok penyedia buku tamu yang servernya lumayan bagus dan jarang
sekali mengalami down yakni http://www.shoutmix.com
atau http://www.cbox.ws. Nah, dari penyedia
buku tamu inilah kita nanti akan mendapatkan kode buku tamu yang akan kita pasang
bersama script di bawah ini.
Ahh.. sepertinya kita tidak usah bertele-tele
lagi kali yaa, berikut ini cara membuat buku tamu seperti yang saya miliki :
[1]. Masuk ke Blogger
[2].
Pilih "Rancangan/Layout" kemudian "Page Elements"
[3].
Klik "Add a Gadget" lalu pilih "HTML/JavaScript" dan
copy-paste kode di bawah ini:
<!-- GANTI INI DENGAN KODE BUKU TAMU ANDA -->
<br/>
Mau punya buku tamu seperti ini?<br/>
Klik
<a href="http://khazaam-khazaam.blogspot.com/2012/02/membuat-buku-tamu-tersembunyi.html">
disini
</a>
<div style="text-align:right">
<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>
<style type="text/css">
#gb{
position:fixed;
top:30px;
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/AVvXsEhkaXPgZLSL4lNHXBELahTzHL-WVCKfgbstPsQR3SNmXPVNC59IKpYeDsp0zuDfCm49nu51Yv6UDzuyZKNjrk0dtCRRrByJoXuESx0TPf2qzFV03sW4M_R9UGcBRxcaw35xPCMUq2dl63Sj/s128/345o85i.gif') 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">
<!-- 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://www6.cbox.ws/box/?boxid=611941&boxtag=cqr1ae&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-611941" style="border:#ababab 1px solid;" id="cboxmain6-611941"></iframe></div>
<div><iframe frameborder="0" width="1750" height="75" src="http://www6.cbox.ws/box/?boxid=611941&boxtag=cqr1ae&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-611941" style="border:#ababab 1px solid;border-top:0px" id="cboxform6-611941"></iframe></div>
</div>
#gb{
position:fixed;
top:30px;
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/AVvXsEhkaXPgZLSL4lNHXBELahTzHL-WVCKfgbstPsQR3SNmXPVNC59IKpYeDsp0zuDfCm49nu51Yv6UDzuyZKNjrk0dtCRRrByJoXuESx0TPf2qzFV03sW4M_R9UGcBRxcaw35xPCMUq2dl63Sj/s128/345o85i.gif') 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">
<!-- 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://www6.cbox.ws/box/?boxid=611941&boxtag=cqr1ae&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-611941" style="border:#ababab 1px solid;" id="cboxmain6-611941"></iframe></div>
<div><iframe frameborder="0" width="1750" height="75" src="http://www6.cbox.ws/box/?boxid=611941&boxtag=cqr1ae&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-611941" style="border:#ababab 1px solid;border-top:0px" id="cboxform6-611941"></iframe></div>
</div>
<!-- GANTI INI DENGAN KODE BUKU TAMU ANDA -->
<br/>
Mau punya buku tamu seperti ini?<br/>
Klik
<a href="http://khazaam-khazaam.blogspot.com/2012/02/membuat-buku-tamu-tersembunyi.html">
disini
</a>
<div style="text-align:right">
<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>
[5]. Yang terakhir klik "Simpan", selesai deh.
Catatan :
Jika Anda ingin mengatur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah Anda.
Bagaimana..?? Makin penasaran..??? Saran saya lebih baik Anda langsung aja deh mencobanya, mudah kok.
Selamat
mencoba yaa dan semoga bermanfaat..
Terima Kasih Untuk Semua Pengunjung/Pembaca KhaZaAm. Semoga Bermanfaat
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar