Buku Tamu tersembunyi alias tidak terlihat merupakan trik yang sangat bermanfaat bagi peblogger, karena selain dapat menghemat tempat juga dapat menambah keindahan.
Sebenarnya tutorial ini bukan hanya dapat digunakan untuk buku tamu saja tetapi bisa berupa image atau widget lainnya. Silahkan anda pilih mana yang menurut anda paling sesuai untuk ditampilkan.
Langkah-langkah yang anda bisa lakukan cukup mudah yaitu :
1. Masuk ke Blogger dengan ID anda.
2. Pilih Tata Letak.
3. Pilih Elemen Halaman.
4. Klik Tambah Gadget.
5. Klik tanda + pada HTML/JavaScript.
6. Copy kode dibawah ini kemudian paste pada kolom yang tersedia.
<style type="text/css">
#gb{
position:fixed;
top:25px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_1j80TgNqd_8/TS3MlHxaygI/AAAAAAAABVo/
P36anu_ToeA/s128/guestbook.png') no-repeat;}
.gbcontent{
float:left;
border:2px solid #1300F2;
background:#FFFFFF;
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">
MASUKAN KODE BUKU TAMU/WIDGET DISINI
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
7. Klik tombol Simpan.
8. Lihat Pemapilan Blog anda sekarang.
Keterangan :
- height:150px; merupakan tinggi dari widget, silahkan anda atur.
- width:30px; merupkan lebar dari widget, silahkan anda atur.
- border:2px solid #1300F2; merupakan ketebalan dan warna garis/border, silahkan anda ganti.
- background:#FFFFFF; merupakan latar belakang widget, silahkan anda ganti.
- background:url('http://i629.photobucket.com/albums/uu13/akubsaputra/guestbook.png') dapat anda ganti dengan image hasil kreasi anda sendiri.
- MASUKAN KODE BUKU TAMU/WIDGET DISINI merupakan tempat meletakan kode buku tamu maupun kode-kode lainnya yang ingin anda tampilkan.
- [close] dapat anda ganti dengan kata tutup atau kata apa saja yang searti.
"Good Luck"
Posting Komentar