July 05, 2013

Tutorial : Sembunyikan Shoutbox Pada Sisi Kanan Blog

Posted by Madihah Ramli at 4:30 PM

Hmm.. Korang tak rasa macam penuh ke sidebar korang?
Ada macam-macam. FB badge, Twitter, Shoutbox, Follower, dan banyak lagi la..
So, aku nak buat tutorial la supaya sidebar korang berkurang satu. haha
Lagipun, korang tak payah lagi nak scroll down untuk baca komen yang ditinggalkan. Iya tak? :)
This post credit for this owner.

Korang pun dah baca kan tajuk post tu..

So, apalagi. JOM !

1. Dashboard > Layout > Add Gadget > HTML/JavaSript

2. Korang copy paste code kat bawah ni.

___________________________________________________________

<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://img560.imageshack.us/img560/7910/tkuningo.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">
MASUKKAN KOD SHOUTBOX ANDA DI SINI
<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>

________________________________________________________________

* Warna merah tu korang tukar shoutbox button korang. Korang boleh tukar macam-macam warna. Korang boleh pilih url kat bawah ni. Just copy paste url tu kat warna merah. Dah siap.
* Yang warna biru pula, korang kena masukkan korang punya kod shoutbox. Korang tau kan nak ambil mana? :)

3. Save and DONE.

Kan comel tu. haha
Gud luck guys !


http://img846.imageshack.us/img846/6586/tnavy.png


http://img560.imageshack.us/img560/7910/tkuningo.png


http://img829.imageshack.us/img829/127/pinkcair.png


http://img36.imageshack.us/img36/3569/orenx.png


http://img84.imageshack.us/img84/6496/hijau.png


http://img97.imageshack.us/img97/6060/ungucair.png


0 comments:

Post a Comment

 

Blog Milik Saya Copyright © 2011 Design by Ipietoon Blogger Template | web hosting