Membuat Buku Tamu Blog Menjadi Show Hide

Membuat Buku Tamu Blog Menjadi Show Hide merupakan sebagian cara untuk meminimalisir tampilan ruang pada blog dengan Membuat Buku Tamu Blog Menjadi Show Hide. Jika pada blog tersebut terdapat banyak widget pada sidebar maka Membuat Buku Tamu Blog Menjadi Show Hide sangat berguna bagi blog tersebut karena akan menjadi terlihat menjadi lebih rapi dan tidak dipenuhi banyak widget yang berada pada sidebar blog. Sebelum anda Membuat Buku Tamu Blog Menjadi Show Hide terlebih dahulu anda membuat dan mendapatkan kode buku tamu yang nantinya akan anda pasang pada blog anda. Untuk membuat dan memiliki kode buku tamu, anda bisa mendapatkanya di berbagai web penyedia layanan buku tamu. Beberapa web penyedia layanan buku tamu diantaranya seperti Shoutbox, Cbox, atau Shoutmix. Namun jika sebelumnya anda sudah mempunyai buku tamu, anda tinggal men-copy kode buku tamu yang sudah ada. Namun  jika anda sama sekali belum mempunyai buku tamu, anda bisa membuat terlebih dahulu untuk memiliki kodenya (lihat Cara Membuat Buku Tamu). Setelah anda memiliki kode buku tamu, lanjutkan dengan langkah-langkah Membuat Buku Tamu Blog Menjadi Show Hide berikut ini:

Membuat Buku Tamu Blog Menjadi Show Hide di posisi samping

1. Login di blogger.

2. Klik Tata Letak > Tambah Widget > Pilih HTML/Java Script.

3. Lalu Copy kode berikut dan Pastekan Pada kotak HTML.

<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/AVvXsEgtdiScyaJr_nz5nB5cbRNTcRYL27aVq0CA-zUtukhEkw-jhmF5cDn9ukyyDkhwTxvpoBRCHNV9zi9V31QLwxpTXj2XE_lWPqXBxpKzsJndsI2CwEReeA7eJ7fOZXKSbsI8tOaX5qBB1Ngd/') 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">

[ Letakkan kode buku tamu Anda disini ]

<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Get This <a href="http://mas-andes.blogspot.com/" target="_blank">Widget</a></span></span></div><div style="text-align:right"><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>

Ganti tulisan warna merah dengan kode script buku tamu milik anda.

4. Simpan dan lihat hasilnya.

Membuat Buku Tamu Blog Menjadi Show Hide di posisi atas

1. Login di blogger.

2. Klik Tata Letak > Tambah Widget > Pilih HTML/Java Script.

3. Lalu Copy kode berikut dan Pastekan Pada kotak HTML.

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url(URL);
}
.atcontent{
float:left;
border:2px solid #7FFF00;
background:url(http://ladangit.files.wordpress.com/2011/04/matrixt.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://ladangit.files.wordpress.com/2011/04/matrixt.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}

function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif)
no-repeat;">

[ Letakkan kode buku tamu Anda disini ]

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Close" /></a></div>
<div align="left"><font size="2"><a href="http://mas-andes.blogspot.com/"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">Get This Widget</span></div></a></font></div> </div></div>
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i54.tinypic.com/ztj9zl.png" alt="cbox" title="Buka Buku Tamu" /></a></center>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

Ganti tulisan berwarna merah dengan kode script buku tamu milik anda.

5. Simpan.

Membuat Buku Tamu Blog Menjadi Show Hide tanpa di klik

1. Login di blogger.

2. Klik Tata Letak > Tambah Widget > Pilih HTML/Java Script.

3. Lalu Copy kode berikut dan Pastekan Pada kotak HTML.

<style type="text/css"> #gb{ position:fixed; top:20px; z-index:+1000; }* html #gb{position:relative;} .gbtab{ height:150px; width:50px; float:left; background:url('http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat; } .gbcontent { float:left; border:1px solid #BB0000; -moz-border-radius-bottomleft:10px; -webkit-border-radius-bottomleft:10px; -o-border-radius-bottomleft:10px; -khtml-border-radius-bottomleft:10px; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK0-McW2znXXQlWZkGHndE9jlD9-AZoECKPx40HQrzBz7GW-6RWpW6DDTUTs6oe9eyu3b03nx_F7ZW83ltGUJ-IenambwFKf7rbWyDmUaGPGmXGZXDs2YAvWudslSHIugOqrlWUTwANw5e/s1600/api.gif) no-repeat bottom; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0); gb.opened = !gb.opened; }function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);} }</script> <div id="gb"> <div class="gbtab" onmouseover="showHideGB()"> </div> <div class="gbcontent"> <center> Masukan Kode Buku Tamu Anda Disini <br /> <div style="text-align:center"> <a onclick="showHideGB()" class="tips-fade" title="Close"> <center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center> </a> </div> </center></div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (50-gb.offsetWidth).toString() + "px"; </script></div>

Ganti tulisan warna merah dengan kode script buku tamu milik anda.

4. Simpan dan lihat hasilnya.

Catatan Tambahan :

Saat anda berkunjung ke blog milik teman anda kemudian anda ingin mengisi buku tamu pada blog teman anda tersebut, anda bisa menulisnya dengan tambahan kode berikut ini :

• Untuk menulis kode text menjadi tebal/bold : [b]Isi Tulisan anda[/b]
• Untuk menulis kode text menjadi miring/italic : [i]Isi Tulisan anda[/i]
• Untuk menulis kode text menjadi bergaris bawah : [u]Isi Tulisan anda[/u]
• Untuk menulis kode text menjadi rata tengah : [center]Isi Tulisan anda[/center]
• Untuk menulis kode text menjadi font besar : [big]Isi Tulisan anda[/big]
• Untuk menulis kode text menjadi mencoreng: [s]Isi Tulisan anda[/s]
• Untuk menulis kode text menjadi berwarna : [color=red]Isi Tulisan anda[/color]
• Untuk menulis kode text menjadi bergerak kekanan-kiri : [scroll]Isi Tulisan anda[/scroll]
• Untuk menulis kode text menjadi link : [url=http://alamat blog anda]Isi Tulisan anda[/url]