Thursday, March 17, 2011

TUTORIAL : FLOAT SHOUTBOX

Assalamualaikum...

Selamat petang kepada semua! hmmm..Korang perasan x shoutbox aku kat tepi tu?? perasan x?? HAHA. soalan poyo. mestilah perasan kalau da gambar kau besar gedabak Syed oi! Kalau perasan baguslah. hahaha. Actually, aku nak buat tutorial pasal tu lah ni... bukan ape..aku nak buat ni pun sebab almost everyday keyword 'Shoutbox' masuk dalam blog aku... ni mesti sbb post aku yg sebelum ni ade cite pasal jenis2 shoutbox. adoi3..Oleh itu, daripada diorang terus hampa..aku da sediakan tutorial ni utk diorang... jom tgk!

1. Mula-mula pergi ke Dashboard>Page Element>Add Gadget>HTML/JAVASCRIPT
2. Then, copy code di bawah ye..

<style type="text/css">


#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}


.gbtab{

height:400px;

width:150px;

float:left;

cursor:pointer;

background:url('http://s2.kimag.es/share/48678709.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, 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 SHOUTBOX ANDA DISINI


<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>

  • Warna hijau tu untuk width dan height korang punya gambar...
  • Warna Aqua pulak untuk gambar korang.. letak URL gambar korang nak dkat situ
  • Warna kuning ni memang penting gilaa.. Korang kena pandai ubah sendiri . sama ada naikkan value dia atau turunkan.. depends laa. kalau gambar ko tersorok kat tepi tu.. pandai2 la naikkan yang mana2 nombor.. try and error k! . practice make perfect! aku pun byk kali try and error baru laa dpat yg betul2 fix dkat tepi tu
Ni aku ade buat beberapa image yang x seberapa. kalo nak guna tu boleh laaa...kalau x nak pun tengok2 je la okay? XD
http://s2.kimag.es/share/22194286.png

http://s2.kimag.es/share/23318198.png


http://s2.kimag.es/share/40692203.png


  • Tu je la gambar simple gilaa yang aku dpat buat.. nak lebih2 bayar RM5 ok! wakaka. cesss ko syed.. korang try sendiri la. kalau ade pape yang musykil tanya aku. nanti aku jawab ok? babai! ..n gud luck , Assalam


20 comments:

Fakhrul1409 said...

SO, ko nk suh ak amek gambar yg mn nih?? yg ssuai la..:D

Nadhirah-chan said...

float ? bukan auto hide ke ?

Fyqa Mamadom said...

bro yang kacak lagi hensem , fyqa amek satuu ea gmba shout tuu, usya blog fyqa taw :D

yampe(^,^) said...

ak amek y biru. hoho. thnx~

fyy mokhtar said...

akak sg :) wahh. santek nyeeeeeeeeeeeee. nak satu boleh???

!! Kodet !! said...

float erk? bukan slide ke?

cik Ladies said...

bhahaha! salah tjuk .. skarang tu da pggil slide.. sbb da ada shoutbox yang betol2 da boleyh float =P lalala~ eleyh,, betol kan yang kuning tu ke? lupe la :nono

FariehanIbrahim [LBC] said...

cun lh! >.<

nk try nk try..(^^)v

@juera said...

tq sharing...:)

Mohamad Farhan Bin Shamsuri said...

hahaha..banyak la ko punye bayar..2 malam jenuh merayu kat aku suruh bagi code,nak jual2 plak ea..haha...grrr

Umie Natasha said...

Float??..ye ke?..mcm tak je...hahah..btw thanx ya..

fieha said...

dah buat..ambik gamba sekali..thanks ye.. :)

KaTak PiNk said...

bro dh jdi
thanx ;)

Puan Kutu said...

bagus..dh wat tuto plak skang..:)

darxniq said...

float tuh ape?....coke float ker??hahahhahaha

Azam Sad said...

thanks tuk tutorial nie...mintak satu gambo shoutbox..thanks..

IZYAN KAHER said...

homaigod ! coolio weyh .. :)
kamsamida (tq!)

teciq said...

da buat. try letak gmbar sendiri. tp gmbrnye tanak kluar la.dia cm invisible gtu. knp ek???

cik aied said...

tq for the tutorial :)

MerLe said...

thanks for da toturial..sgt membantu =)

LinkWithin

Related Posts Plugin for WordPress, Blogger...