Terkadang dalam mengatur fitur rancangan sebuah blog kita dihadapkan pada permasalahan terbatasnya space atau
ruang kosong untuk menaruh widget-widget kesukaan kita. Sebagai konsekuensinya,
jika kita tetap menjejal-jejalkannya maka blog kita pun akan terlihat padat dan
terkesan penuh sesak hingga tidak enak dipandang mata. Lalu, bagaimana
solusinya? Pastinya kita akan melakukan penghematan ruang dengan melakukan
siasat membuat widget tersebut tersembunyi dan akan muncul bila diklik.
Jika kita amati, sekarang
banyak sekali blogger yang mengaplikasikan hal itu pada widget buku tamunya.
Yup, buku tamu memang salah satu pernak-pernik blog yang dianggap paling utama
untuk dimiliki. Akan tetapi, karena ukurannya yang besar dan memakan tempat,
maka banyak blogger yang kemudian memilih untuk mengemas buku tamu di blog
mereka dengan tampilan hidden atau tersembunyi agar lebih menghemat ruang dan
terlihat gaya.
Bagaimana cara membuatnya?
Bagaimana cara membuatnya?
1.
Log in ke dalam akun blogger milik kita.
2.
Klik rancangan.
3.
Pilih add gadget dan klik HTML/Java Script.
4.
Masukan kode di bawah ini dan klik simpan.
<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('http://lh4.ggpht.com/_NSa8I94a3wg/TJHDAQiJqSI/AAAAAAAAAGo/0LukH8E000Y/s800/tabs_asep.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #cd8c3d;
background:#050505;
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">
LETAK KODE HTML GUEST BOOK KITA
<div style="text-align:right">
<a href="">
</a>|<a href="javascript:showHideGB()">
[tutup guest book]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_NSa8I94a3wg/TJHDAQiJqSI/AAAAAAAAAGo/0LukH8E000Y/s800/tabs_asep.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #cd8c3d;
background:#050505;
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">
LETAK KODE HTML GUEST BOOK KITA
<div style="text-align:right">
<a href="">
</a>|<a href="javascript:showHideGB()">
[tutup guest book]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
Keterangan :
·
Ganti LETAK KODE HTML GUEST BOOK KITA dengan kode html buku tamu dari blog kita
masing-masing.
Bagaimana? Mudah sekali bukan membuat hidden guest book?
Yuk kita coba praktikin bersama-sama..
Kalau ada tambahan yang ingin disampaikan, silakan berkomentar ya kawan-kawan..
Salam blogger!
0 komentar
Posting Komentar
Pembaca Yang Cerdas Selalu Memberikan Jejak Komentar Tentang Artikel Komputer Ini, Bersaudara Lebih Indah Dari Pada Bermusuhan, Dengan Anda Memfollow & Like Di blog Ini Kita Semua Bersaudara & Jangan Lupa saling Membantu. Thank YOU...