Tutorial : Slide Float Widget

Okiee . Apa itu Slide Float Widget ??!

Korang tak tahu ? 
Alar .. ramai yang tnya Lyssa .. 
macam mana ehh  ,  bila tekan yang ini :

 

Tiba-tiba je , dia kuar yang ini :
 

oke .oke . kalau nak tahu  ,cepat ikot step Lyssa yaw! :))
1. Dashboard > Design > Add Gadget > Html/JavaScript

2. Copy and paste kod di bawah , dan paste di ruangan html tadi tu ;)

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #ff0000;
background:url() #000000 repeat-x bottom center scroll ;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">

kod (shoutbox,livestream Facebook,exchange link,banner dll) anda

</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://3.bp.blogspot.com/_LhHZAifMoFE/TN6myUsdsZI/AAAAAAAAC-Q/VqSys0LrD3o/s1600/close_button.gif" alt="close" title="Close" /></a></div>
<br><div align="right"><font size="3"><a href="http://wanhazel.blogspot.com/"><div style="color: #FF0000;">
<span ></span></div></a></font></div>
</div></div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></center>


**#000000 korang leh ubah warna..cari kod HTML warna..

**kod (shoutbox,livestream Facebook,exchange link,banner dll) anda

**Pastikan nilai tidak melebihi width: 580px; height: 380px.

3. Da siap . SAVE ! :)


Lepas tuh . korang buat cam ni pulak ...

1. Dashboard > Design > Add Gadget > Html/JavaScript

2. Copy kod di bawah , dan pastekan di ruangan html tadi tuh :

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;F
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:220px; right:-0px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="180" height="180"src="http://s2.kimag.es/share/38953289.png" alt="PUSH" title="KLIK ME"/></a>

</div>

** Yang warna merah tuh , korang boleh tukarkan gambar yang lain oke ?:)

3 . Da siap . SAVE ! :)


=SELAMAT MENCUBA=

Credit to : WanHazel
KONGSIKAN ARTIKEL INI..
Previous
Next Post »

54 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
NurAthirah
AUTHOR
March 19, 2011 at 10:13 AM delete

akk , lgu ape dlm blog ni ea ?
tlg rply kt shoutbox sy bleh ?
qalbukudijari.blogspot.com

avatar
NurAthirah
AUTHOR
March 19, 2011 at 10:13 AM delete

bleh buad tuto gabungkan sidebar ngan body post x ?
tengs <3

avatar
March 19, 2011 at 11:07 AM delete

@Nur athirah

ohh. yg itu , sys tk thu . sys pun dok tercari2 . cm ner maw gabung kan . haha

avatar
nShaheera
AUTHOR
March 19, 2011 at 6:15 PM delete

yeayyyy . jadii :) thank you sys lyssa :)

avatar
nShaheera
AUTHOR
March 19, 2011 at 6:15 PM delete

yeayyyy . jadii :) thank you sys lyssa :)

avatar
March 19, 2011 at 6:30 PM delete

@nShaheera

ehee .okiee . okiwee.. welcome lah !XD heheXD

avatar
March 20, 2011 at 2:18 PM delete

bgus amat ni tutorial ;) tq kak lisa

avatar
cunndaa
AUTHOR
March 23, 2011 at 7:46 PM delete

tq adik lisa yg cumel...lpas main2 ngn no...menjadi jgk akhirnya....hehehe

avatar
March 24, 2011 at 2:11 AM delete

@cunndaa

hhehehe .sama2 :) gud gud ^_^

avatar
eVariena♥
AUTHOR
April 2, 2011 at 11:07 PM delete

sys,kalo nk buat slide tutorial mcm sys pnye 2 cmne eyh ??

i mean yg hitam then ade byk2 link tuto 2...cmne nk buat 2??

avatar
April 3, 2011 at 6:17 AM delete

@eVariena♥

ohh. kalau nak letak slide tutorial ..akk tk reti nk expalin.. n susuah nk buat.. nk buat bnda tuh.. bley jadi penink pale ler.~~

avatar
April 5, 2011 at 8:48 PM delete

@QisAina_Kreatif

ni mesti salah steps niyh.. ikot step btol2 yea :))

avatar
Unknown
AUTHOR
April 26, 2011 at 4:53 PM delete

sys , code ke 2 tu gabung dengan code no 1 tu ke ? tasha buat tak jadi . sobss ;'(

avatar
Unknown
AUTHOR
April 27, 2011 at 1:49 PM delete

sys buad kan untuk tasha boleh ?

avatar
my story's
AUTHOR
May 1, 2011 at 12:48 PM delete

kaq lysaa na copy cm mn erkk adek da try da yg tekan ctrl + C dngn serentak tapi ta boley la...akq..na buad cm mana
please reply balik mesej nie.

avatar
my story's
AUTHOR
May 1, 2011 at 12:50 PM delete

akq lysaa na copy cm mnae code tu adek da try da ctrl + C DENGAN SERENTAK ! tapi ta jadi la akq.adek ta fhm....hope akq terangkan..
please reply balik mesejnie....

avatar
my story's
AUTHOR
May 1, 2011 at 12:50 PM delete

akq lysaa na copy cm mnae code tu adek da try da ctrl + C DENGAN SERENTAK ! tapi ta jadi la akq.adek ta fhm....hope akq terangkan..
please reply balik mesejnie....

avatar
NajMe
AUTHOR
May 7, 2011 at 3:24 PM delete

hye kak , kak , your blog is so awesome . ade x tutorial untuk nak letak FB kat tepi2 blog tu . dia bukan FB je , bole letak twitter , myspace dll .. ade x?

avatar
CikSofa ;)
AUTHOR
June 3, 2011 at 12:34 PM delete

akq,,npe sy buat tuto nih ble bkq blog dy kuor sendiri tnpe tkn..

**rply kt shout sy plzzzz ;(**

avatar
Rosmahusna
AUTHOR
June 8, 2011 at 9:02 PM delete

akk . cammne nk msuk an history at dlm slide float widget ni . uat la tuto..

avatar
Wanie
AUTHOR
June 29, 2011 at 5:39 PM delete

Akk .. Mcm mane ek nak kecilkan saiz gambar tu ? Saya buat , gambar tu jd besar ..

avatar
Unknown
AUTHOR
July 10, 2011 at 4:30 PM delete

kak lyssan ape lagu dlm blog nie erk ?

avatar
aisyahfarzana
AUTHOR
August 13, 2011 at 4:00 PM delete

boleh ke kalo nak letak link tutorial kite............. tapi kalo akak nak hantar mesej kat shoutbox blog kite eh

avatar
mAy Lee
AUTHOR
August 15, 2011 at 2:57 AM delete

x paham lah.. ape ke benda ni?? huhhuhu.. btw.. i take some of ur thingi into my blog.. do pay me a visit kay?
http://dedebutamanbintang.blogspot.com

thanks hun.. huhu

avatar
August 19, 2011 at 12:51 AM delete

hurm , hye kak comel .. adek nk tnye ni .. kena letak semua kod ke ? kalau kite letak satu kod saje x pe kan ?

avatar
Niaaa
AUTHOR
September 24, 2011 at 3:06 PM delete

@Lyssa Dollixious

sys, nk tnye..
knp shoutbox sy ble bkk sy punye blog, mse mle2 tu, dye akn kluar ckit..
then kne click blk bru dye hide elok..
knp ek??

avatar
My Name: Ziel
AUTHOR
September 25, 2011 at 10:11 PM delete

Erm whai akak lisa ku yg encem, bleh x tlg ajarkan sy yg amatur niey cre2 na tkar page background pleeeeez, klu ad crenye sy hrap akak send feedback kat fb sy, zieler mus

avatar
Ah Long
AUTHOR
November 13, 2011 at 9:53 AM delete

lyssa ,klu nak wat coding ni 2 icon le x? masok wat dua kli ar. along da wat toturial ps , pastu nak wat tok share link movie lak ? kire tken icon totu ps kua totu tu , dan tkan icon link movie kua link-2 movie . cam ne erk? pape comment along kt blog along k ? ;D

avatar
Izzah Humaira
AUTHOR
December 1, 2011 at 10:26 PM delete

Akak , sy tak fhm lah kak , kan tutorial kan , pastu sya nk buat mcm akk , tutorial , bnyk link kat situ , tkan je kuar tutorial tu , yng tutorial mcm akk buat ni , sy ta brape nk fhm lah kak , hmm

avatar
Natasya Haiza
AUTHOR
December 5, 2011 at 12:23 PM delete

emm , nie nak tanye sket kat akk Lyssa camne nak wat yang nanti kuar bnyak2 links tutorial cam akk nye tu ek ??? .

avatar
January 5, 2012 at 3:43 PM delete

mcm na nk bwat orng nk comment mcm sekang nie??

avatar
athifah kadir
AUTHOR
January 7, 2012 at 5:12 PM delete

macam mana yea nak carik blogachieveURL ? tolong yea~

avatar
Themyrara
AUTHOR
January 11, 2012 at 12:00 AM delete

salam kak lyssa :) myra nak tnya neyh . erm , kod biru toe amende erk ? myra x tau la . hehe . teach sys . :D

avatar
Ain
AUTHOR
January 26, 2012 at 12:46 PM delete

mcm mana nk buat blik klik die kuar tutorial tu ?nk buat tutorial tu mcm mana ?

avatar
Anonymous
AUTHOR
February 3, 2012 at 3:39 PM delete

tlg buat kn boleh x kak lyssa ? lisa xpndai la..

avatar
February 12, 2012 at 11:24 AM delete

@Lyssa Dollixious
akak,kodkod (shoutbox,livestream Facebook,exchange link,banner dll) anda
tu mende sile jwab pleaseee....

avatar
March 9, 2012 at 7:20 PM delete

kod tu mcm mna ? bingung laaa -.-

avatar
March 11, 2012 at 1:09 PM delete

lyssa, code tu once dah tuka also still color black... cmn yerk :(

avatar
March 11, 2012 at 1:10 PM delete

lyssa, once intan dah tuka code color also still color black... cmn yerk?

avatar
Alia Syu
AUTHOR
March 31, 2012 at 10:28 AM delete

Kak Lyssa , camne yer nak cari kod ?

avatar
Alia Syu
AUTHOR
March 31, 2012 at 10:29 AM delete

Kak lyssa , camner yer nak cri kod ?

avatar
Unknown
AUTHOR
May 6, 2012 at 5:15 PM delete

@Lyssa Dollixious
akak?? NK TNYA, APA TU KOD LIVESTREAM FB, SHOUTBOX DLL?? klu xda, xbleh kerr??

avatar
May 18, 2012 at 8:15 PM delete

akk ... cane nak dptkan kod ?~!

avatar
wolf
AUTHOR
July 22, 2012 at 1:23 PM delete

akak! cmne nak tukar kelajuan...laju giler! tpi jadi!nice :)

avatar
Anonymous
AUTHOR
December 20, 2012 at 6:45 PM delete

Kak Lyssa saya nak tanya sikit kan, macam mana nak letak ada frame kat shout box tu.. supaya ia tak kosong je.. :)

avatar
Unknown
AUTHOR
January 3, 2013 at 2:40 AM delete

cam mn nk wt tuto ni ye? xjd pon =(

avatar
January 3, 2013 at 2:42 AM delete

cam na nk wt tuto ni ye?xjd pon =(

avatar
Effa Nadia
AUTHOR
January 14, 2013 at 7:43 PM delete

sy letak dlm blog sy , mcm cacat je.. huhu

avatar

.Assalamualaikum.
.Sila Tinggalkan Comment Anda Di Sini.
SATU pun jadi lah ! hehe. EmoticonEmoticon