Membuat Buku Tamu Tersembunyi [Model Scrolling]

Setelah blogging kesana-kemari di dunia maya, akhirnya hari ini saya mendapatkan bahan baru untuk dijadikan postingan. Info yang ingin saya bagikan kali ini adalah mengenai cara membuat dan memasang Buku Tamu Tersembunyi Model Scrolling. Jika selama ini buku tamu yang dipasang pada blog pribadi ditempatkan dalam posisi pada umumnya, maka lewat tips kali ini kita akan membahas cara pemasangan dengan model scrolling [disembunyikan] seperti gambar dibawah ini:


Jika anda tertarik untuk menggunakannya, silahkan ikuti tutorialnya dibawah ini:

1. Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements"

2. Klik "Add a Gadget", lalu pilih "HTML/JavaScript"

3. Copy-paste kode di bawah 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/AVvXsEh-Fq8li51l9zJqQYpJUEycqYSlg0LeQ1KA-86cG_rxWZv59u-Tq5BVsbGMedUHLH9dbPo9foe2CUgPMQLWT7wa4KQxKsTakjYJFW8y8WRortHjrtNr9x8X94s74R-wNklouy7w-oB5Zzmt/') 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">

<!-- Ganti ini dengan kode buku tamu kamu -->

<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>


4. Pada kode di atas, ganti kode <!-- Ganti ini dengan kode buku tamu kamu --> dengan kode buku tamu yang kamu miliki

5. Anda juga bisa mengatur posisi penempatan buku tamunya dengan mengubah nilai atribut top-nya [warna merah]. Kalau mau lebih ke atas dikit, ubah menjadi 40px atau 30px [sesuaikan dengan keinginan anda]

6. Selanjutnya klik "Save"

7. Selesai sudah dan selamat mencoba...Salam Blogger..!!!!

Bagi anda yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek, saya sarankan untuk anda bisa belajar di sini

Bagikan