Assalamualaikum sobat. Alhamdulillah kita berjumpa lagi pada postingan kali ini, kali ini ane mau berbagi tentang cara membuat sebuah buku tamu sederhana yg berada di pojok kanan atas. sperti pada blog ane tercinta ini. Singkat penjelasan tentang judul posting kali ini Membuat Buku Tamu Tersembunyi, Tersembunyi disini bukan berarti tidak terlihat, k'lo ga kelihatan gimana cara ngisinya ya sobat.. nah tapi maksudnya adalah, apabila di klik buku tamu maka buku tamu akan tampil, ini disebabkan karena buku tamu ini mengandung script javasript, jadi tampilannya tidak monoton bisa lebih hidup. sebelum memasang kita diharuskan mempunyai script buku tamu sebagai widget yg akan kita masukkan, kode tersebut dapat kita peroleh dari situs penyedia buku tamu atau chat box, yaitu bisa menggunakan Shoutmix, atau Cbox. Caranya mudah sobat tinggal daftar dan cari codenya, atau lebih lengkapnya bsa search di google, mungkin bisa kita bahas pada posting berikutnya.. nah apabila kita sudah memiliki source code dari salah satu situs tersebut, baru mulailah kita menambahkannya ke blog kita caranya :1. Login Blogger seperti biasanya.
2. Lalu masuk ke Rancangan dan pilih Elemen Halaman.
3. Pada Elemen Halaman, kita klik tambah gadget dan cari HTML / Javascript.
4. Nah kemudian masukkan kode berikut pada elemen HTML / Javascript.
<!-- Begin Buku Tamu - http://notebase.blogspot.com -->
<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/AVvXsEjL8jH-GV77fap295DQvYPIzYD-cYjfDdDn-KPG0BrGVNUCfvm_kevqGfAgAa4zED3ST1QeINjxmNu71RRzX-dIrKxzTQR8Jf_T7pVKALcdDWUnE3NofmbkVpHQDJNq_JrmZYHmcorjwsSp/') 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">
<Paste / Tambahkan Kode / Script buku tamu anda disini>
<div style="text-align:right">
<a href="http://notebase.blogspot.com/2011/12/membuat-buku-tamu-tersembunyi.html" target="_blank">Buat Buku tamu ini !!
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
<!-- End Buku Tamu - http://notebase.blogspot.com -->
<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/AVvXsEjL8jH-GV77fap295DQvYPIzYD-cYjfDdDn-KPG0BrGVNUCfvm_kevqGfAgAa4zED3ST1QeINjxmNu71RRzX-dIrKxzTQR8Jf_T7pVKALcdDWUnE3NofmbkVpHQDJNq_JrmZYHmcorjwsSp/') 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">
<Paste / Tambahkan Kode / Script buku tamu anda disini>
<div style="text-align:right">
<a href="http://notebase.blogspot.com/2011/12/membuat-buku-tamu-tersembunyi.html" target="_blank">Buat Buku tamu ini !!
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
<!-- End Buku Tamu - http://notebase.blogspot.com -->
5. Nah pada script diatas, dan pada bagian <Paste / Tambahkan Kode / Script buku tamu anda disini> ganti dengan script / source code dari Salah satu penyedia chat box tadi.
6. Dan terakhir adalah Simpan halaman anda, klik simpan pada elemen halaman.
7. Lihat Hasilnya, apabila berhasil maka akan tampil buku tamu seperti pada blog ane.
nah itulah singkat cara membuat buku tamu sederhana ini, smoga ada manfaatnya, thanks for visit my blog, sekian posting ane kali ini kita berjumpa lagi pada posting berikutnya, jngn lupa untuk selalu meninggalkan komentarnya ya sobat.
6. Dan terakhir adalah Simpan halaman anda, klik simpan pada elemen halaman.
7. Lihat Hasilnya, apabila berhasil maka akan tampil buku tamu seperti pada blog ane.
nah itulah singkat cara membuat buku tamu sederhana ini, smoga ada manfaatnya, thanks for visit my blog, sekian posting ane kali ini kita berjumpa lagi pada posting berikutnya, jngn lupa untuk selalu meninggalkan komentarnya ya sobat.
wassalamualaikum wr wb.
