Senin, 06 Juni 2011

Cara manyembunyikan shoutbox

Buat kamu yang pengen menghemat tempat diBlog kamu, diantaranya dapat menyembunyikan ShoutBoxseperti yang saya lakukan diblog saya ini...

Berikut caranya :

1. Login ke Blogger dulu pastinya
2. Pilih Tata Letak ==> Elemen Halaman
3. Tambah Gatdget pilih HTML/JavaScript
4. CoPas kode dibawah 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('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') 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 ShoutBox kamu -->
<font size="2"><a href="http://exeloph.blogspot.com">enda fiVers</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</font></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
    
Note : Ganti text yang berwarna merah dengan kode ShoutBox kamu, untuk mengatur posisi'a keatas dikit kamu bisa merubah atribut top'a menjadi 30px atau 20px kalo yang saya pake sih yang 50px aja...ganti yg berwarna hijau dengan URL blog kamu,,yg berwarna kuning nama yg kamu inginkan...


5. Simpan dan Lihat Blog
PhotobucketPhotobucket


* Untuk mengganti tulisan buku tamu   menjadi shoutbox sperti ini kamu bisa mengganti text yang bercetak tebal berwarna biru diatas denganhttp://i796.photobucket.com/albums/yy249/enda_fivers/shoutbox.gif atau kamu bisa membuat desain sendiri misalnya dengan menggunakan photoshop atau semacmnya kemudian upload ke tempat hosting gambar seperti photobucket.com, setelah itu copy link imagenya dan ganti text yang berwarna biru tersebut dengan link yang kamu copy tadi...

"Selamat Mencoba!!"

0 komentar:

Posting Komentar

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites