Saturday, October 23, 2010

Tutorial | Hide shoutbox

Tutorial atas permintaan Nor Analiza



Langkah 1 :

DASHBOARD > DESIGN > ADD A GADGET > HTML/JavaScript

Langkah 2 :

(Copy and paste this code)


<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://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') no-repeat;
}

.gbcontent{
float:left;
border:1px solid #b3b3b3;
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">

[Masukkan code shoutbox 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>




Masukkan code shoutbox pada perkataan "[Masukkan code shoutbox di sini]"

Langkah 3 :

Click SAVE

Sebarang pertanyaan? Sila tinggalkan komen anda. Terima kasih :)

SELAMAT MENCUBA :)

28 comments:

d_LA said...

wahhh..good info ni..i follow la :)

Fanna Roslan said...

D-la : Okey, thanks awak =)

Eiyka Fiqa said...

thengz yarh .

ain anuar said...

ngee :D
cantik blog:)
bole tak ajar kita nak buat yg facebook 2 pulak :)

Fanna Roslan said...

Eiyka Fiqa : Most welcome =)

Fanna Roslan said...

Ain anuar : Thanks awak. Boleh, tapi nak buat facebook yang macam mana?

ain anuar said...

owh ,
buat macam yg awk buat la .
kita suka , cantik :)

Fanna Roslan said...

Ain anuar : Oh! Yang belah kiri button like ke? Kalau nak buat gitu kena ada fanpages. You dah ada?

melon said...

awk, sy xfaham lah.. yg kne letak code shoutbox tu cmne ??

melon said...

ermm maksud sy, cmne nak dapatkan code tu ? hee..

Fanna Roslan said...

Melon : Just copy and past code shoutbox :)

Fanna Roslan said...

Melon : Ouh! Nak dapatkan code shoutbox you kena sign up shoutbox dulu :)
http://www.shoutmix.com/main/

Nad Ezrin's said...

Kak Fanna oi :) Want to ask something yg agak mnyimpang . How ek, nak buat 'TUTORIAL' tu? Means, nak satukan beberapa post and letakkan dekat 1 bahagian like ur 'TUTORIAL' tu?

Fanna Roslan said...

Nad Ezrin's : Ya adik oi :) Mula-mula Kak Fanna create link satu-satu dulu dekat sini http://www.myspacegens.com/handler.php?gen=link

Adik kena letakkan link entry yang adik nak buat dekat situ. Adik faham tak? HAHA! Susah nak jelaskan :)

Nad Ezrin's said...

oh ok . and then ?

Fanna Roslan said...

Nad Ezrin's : Then letak dekat HTML/Javascript :)

Nad Ezrin's said...

klw post tu ade 5 nk letak, letak lima2 tu sekali ke ?

Fanna Roslan said...

Nad Ezrin's : Kena buat satu-satu entry dekat http://www.myspacegens.com/handler.php?gen=link.

Then gabungkan semua entry paste kan di HTML/Javascript :)

Faham tak? HAHA :D

Ruqaiyah Amanina said...

dik sis wat xlehla. asl ek? sode shoutbox 2 amek yg mne? kn ad 3

Fanna Roslan said...

Ruqaiyah Amanina : Ada 3? Uh? Saya tak faham.

cik zoela (: said...

tengs :)

Fanna Roslan said...

Cik Zoela : Welcome :D

Zaty said...

thanks, suka lah tutorial ni :)

Fanna Roslan said...

Zaty : Most welcome =)

Nad Ezrin's said...

boleh tak Kak Fanna tolong buat tutorial how nak buat pic yg dicrop ikut bentuk yg macam header adik akk punye blog tu? gamba tu mcm crop ikut bentuk.

Fanna Roslan said...

Nad Ezrin's : Itu namanya header transparent. Insya'allah kalau Kak Fanna free, Kak Fanna ajar.

izzi ismail said...

x kedekut ilmu :)
thanx a lot..very2 useful utk new blogger like me..hehe

Fanna Roslan said...

Izzi Ismail : Most welcome :D