topbella

Wednesday, July 27, 2011

Tutorial Hide Shoutbox with Cute Cover





Assalamulaikum..
Oke hari aku ase macam nak share satu TUTORIAL.
Tutorial tu aku amik dari seorang rakan blogger.
Memang sangat berguna bagi korang yang baru nak design blog macam aku..

Oke, Nama tutorial tu adalah, TUTORIAL HIDE SHOUTBOX WITH CUTE COVER.
Haaa.. Amacam?
Macam best je dengar kan?
hehe.
Lets read This Tutorial.

Langkah pertama :
Pergi dekat DASHBOARD>DESIGN>ADD GADGET>HTML/JAVA SCRIPT

Langkah Kedua:
Copy code kat bawah ni

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
*html#gb{position:relative;}

.gbtab{
height:500px;
width:260px;
float:left;
cursor:pointer;
background:url('URL PIC YANG KORANG SUKA') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-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 SHOUTMIX KORANG KAT 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 = (140-gb.offsetWidth).toString() + "px";
</script>


Oke? dah paham?
Bagi ampa yg nak buat cover yg comel-comel, tapi xreti-reti macam aku, korang boleh la ampa copy paste je URL pic ni dan letak dekat code shoutbox tu.

code comel pertama :

http://i1134.photobucket.com/albums/m615/momoiro_renka94/tumblr_lc6cjwbVr41qcgmzqo1_400.png

code comel kedua :

http://i1134.photobucket.com/albums/m615/momoiro_renka94/tumblr_lc2hm6MFOP1qcgmzqo1_400.png

code comel ketiga :

http://i1134.photobucket.com/albums/m615/momoiro_renka94/tumblr_lbpphdpqLh1qcgmzqo1_400.png

code comel keempat :

http://i1134.photobucket.com/albums/m615/momoiro_renka94/tumblr_lbi94i6qL21qcgmzqo1_400.png



Oke sayang sekelian, 
SELAMAT MENCUBA
:)
                                                                                                                               





11 doakan Wardatul Jannah kurus :):

SoLy SoLicious said...

sy pun ade ^__^ heeee

Miss Are-In Rafaaeell said...

hehe. soly pown tutorial ni jgk ea? best kn?

aleen aiden said...

ye..shoutbox kamoo memang ternyata kiut.hu3

Miss Are-In Rafaaeell said...

hehhe. mekaseh ea kamuu <3 <3

Lilynn Sazlin said...

akak..nape sy buat tak jadi ? :( sedih.. :(

Lilynn Sazlin said...

nnt tolong buzz sy kat blog sy if da baca komen ni taw.. :(

Miss Are-In Rafaaeell said...

tak jadi kat mana dik ? meh nk tolong. :)

Anonymous said...

sis, nak try jugak. tp xde blog. hihi :P

Miss Are-In Rafaaeell said...

hek~ buat la blog dulu ea. pastu leh la cuba.. oke! :)

Anonymous said...

kt mana nak cari gambar2 lain selain yg sis bagi ni?

Anonymous said...

kak saya buat x jadi..tolong ajar..

Post a Comment

Mendoakan kebahagiaan cikgu ain rafaaeell :)