Wadah Madrasah Pengalaman: Tutorial Slide Float widget (shoutbox,livestream Facebook,exchange link,banner dll) Untuk pengguna template blogger and layout


Friday, December 17, 2010

Tutorial Slide Float widget (shoutbox,livestream Facebook,exchange link,banner dll) Untuk pengguna template blogger and layout



.



Salam Korang...

Hari nie Wan wat Tutorial Slide Float widget (shoutbox,livestream Facebook,exchange link,banner dll) Untuk pengguna Classic Template je taw..Macam kat gambar atas tu...

Ok Law korang nak try wat..

Jum Tutorial...

Bagi pengguna template blogger and layout ...
Dashboard>Layout>add gadget>HTML

Korang copy kod kat bawah nie dan paste




<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mK2ag6SfXpcnnSLh-H_yg29GSzIyCw4oEJuVm67RBCHVLbiCdDckzq-tXqm-69ipkMc1aipileB9gCKEUyWZExu88Q3NheMm9sZ2vwtQzwLBfpQQEhi1py-Z2wzA902gjC2SJ1s1YPU/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 >Get Float slide Widget</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.


Lepas tu korang copy lak kod kat bawah nie..
Dashboard>Layout>add gadget>HTML




<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_7NQ8emyEpGz0neKOaqkC1PJl1xXeeJxivPD_VK4faZCQJgxRco64tQm6qnbV22RH6eyokv13ZFa5OHtJ_4xvCK9J_e-hFHLDES4EaZjUVkyMB_NgCUv_SDuatmLNyG3ToYIG16V7v8/s1600/button+push.png" alt="PUSH" title="KLIK ME" /></a>

</div>



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_7NQ8emyEpGz0neKOaqkC1PJl1xXeeJxivPD_VK4faZCQJgxRco64tQm6qnbV22RH6eyokv13ZFa5OHtJ_4xvCK9J_e-hFHLDES4EaZjUVkyMB_NgCUv_SDuatmLNyG3ToYIG16V7v8/s1600/button+push.png korang leh ubah Icon korang...

KLIK ME korang leh ubah nak letak ape pun..


Ok tu je..

Selamat mencuba..

.



62 comments:

Unknown said...

hoho..
bguss btolla wan nie..
suke sgt wat tutorial..

Wan_hazel said...

pu3

tengs

Anonymous said...

thanks wan hope ilmu ko betambah :P

Wan_hazel said...

welkam bro..sama sama lah..hope ilmu kita semua bertambah kan..

Aina Liyana said...

wahhhh awesome! :)

Wan_hazel said...

♥ fara myra ♥

hehehe..tengs..

Liyana Rahman said...

hoho. tak jadi. pening da. coding second jadi. yg first tuh wan. pening akak! da dekat 3jam buat. usaha pai subuh. tak leh jugak. sad!

Wan_hazel said...

Liyana Rahman

hahhaa..jap je wat tu kak...tak susah..kene baca betul2 je..

Liyana Rahman said...

alah. macam mana neh wan. box dia kuar dr atas. wan punya smooth giler box nya kuar. then box comment terkuar dr background image tuh. alo lo lo. =(

Wan_hazel said...

Liyana Rahman

cian nye akak....akak ade FB tak>>inbox wan kat FB k..wan hazel..nanti wan tlg

Shafiq said...

nk tanye. Kalo nak wt bende ni due kali kan tapi bile saye klik due2 die akn kuar bende yg same. Contoh saye klik gmba tutorial then kuarlh tutorialnye. Then bile saye klik yg lg satu die kuar bende yg tutorial jugk. Mcm mne ye?

Wan_hazel said...

Apit

ooo..juz tambah kat bhgian icon tu je.,.pasang dua bijik...

Shafiq said...

mksod awk tmbh ape?

Wan_hazel said...

apit

letak kod yg kat tas nie dua bijik

http://2.bp.blogspot.com/_LhHZAifMoFE/TOZUO-BqzTI/AAAAAAAADC8/JILidKZpmIk/s1600/button%2Bpush.png korang leh ubah Icon korang...

KLIK ME korang leh ubah nak letak ape pun..

Shafiq said...

so nak buat lagi satu HTML/javascript la or letak dlm satu tempat yg same? Kalo same bg care2nye

Wan_hazel said...

a ah..so kene edit skit HTml tu..nie kod icon tu..
yg nie icon dlm keadaan float

<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://2.bp.blogspot.com/_LhHZAifMoFE/TOZUO-BqzTI/AAAAAAAADC8/JILidKZpmIk/s1600/button%2Bpush.png" alt="PUSH" title="KLIK ME" /></a>

</div>


dan yg nie leh letak kat side blog..

<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="180" height="180"src="http://2.bp.blogspot.com/_LhHZAifMoFE/TOZUO-BqzTI/AAAAAAAADC8/JILidKZpmIk/s1600/button%2Bpush.png" alt="PUSH" title="KLIK ME" /></a>

</div>


So ade sua tempat nak klik..btulkan mcm tu.//ade dua icon klik utk satu

Shafiq said...

so mcm mne dgn ayat plak supaye kalo klik kuar utk die sendirinye punye x berkongsi

Wan_hazel said...

Apit

ayat??ape tu??tak faham lah...

Shafiq said...

yelah yg mcm saye ckp tadilah kalo nak klik A kuar yg A kalo klik B kuar yg B. X nak kalo klik B kuar yg A punye. So klik A dgn klik B tetap kuar yg A. Yg B punye xtau ke mane pergi. Nk jenis yg tutorial scroll slide tu la. Faham x?

Wan_hazel said...

owh nak ade dua widget slide nie..bru wan faham..sorie...jgn lah marah lah...wan memang tak faham...nie kod utk slide bawah k..

leh ekot tuto kat entri tu..nie kod atas /body k

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://4.bp.blogspot.com/_LhHZAifMoFE/TRlgYw7t-OI/AAAAAAAADs8/Q1kMFmnX6kQ/s1600/close_icon.gif" alt="close" title="Close" /></a></div>
</div></div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></center>
<style type="text/css">
#fl{
position:fixed;
left:200px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #000000;
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 showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent"


"ISI BARANG KORANG"



</div>

<div style="text-align: right;">
<a href="javascript:showHideFL()"><br>
<img border="0" src="http://3.bp.blogspot.com/_LhHZAifMoFE/TN6myUsdsZI/AAAAAAAAC-Q/VqSys0LrD3o/s1600/close_button.gif" alt="close" title="Click here to Close Cbox" />
</a></div>
<font size="2"><a href="http://wanhazel.blogspot.com/"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;"></span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>


yang nie icon..

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; top:358px;right:2px;' title='BOOM'><img class="expando"width="180" height="180"src="http://2.bp.blogspot.com/_LhHZAifMoFE/TOZUO-BqzTI/AAAAAAAADC8/JILidKZpmIk/s1600/button%2Bpush.png"/></a>


ok..tu je

Shafiq said...

XPE2. So, care nk paste die?

Wan_hazel said...

ekot je care macam kat dlm entri tu

Shafiq said...

tpi kalo saye ikut care mcm kt dlm entri tu nnti die kluar bende yg same je. Yg lagi satu ke mane die pegi xtau. Mcm awk punye tutorial kuar tutorialnye n awk punye 'Gempak Blogger Bloglist' bile klik kuar bloglistnye tp saye punye 2nye bende yg same.

Wan_hazel said...

Apit

erk..mesti bleh nye,,,law ekot tu..ok..try ambik kod icon nie k...yg kod icon kat ats tu tak yah gune..gune yg nie k


<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:180px; right:-0px;'>

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; top:358px;right:2px;' title='BOOM'><img class="expando"width="180" height="180"src="http://2.bp.blogspot.com/_LhHZAifMoFE/TOZUO-BqzTI/AAAAAAAADC8/JILidKZpmIk/s1600/button%2Bpush.png"/></a>

Shafiq said...

nak paste due2 code tu dkt tempat yg same ke kene asing2?

Wan_hazel said...

a ah bro..asing2 k..

Shafiq said...

wan, cube tgk blog saye kjp. Klik 'Tutorial' dgn gmba butang merah tu. Tgk ape yg die kluar. Mcm mne nk selesaikn?

Shafiq said...

cube tgk blog saye kjp. Tekan 'Tutorial' dgn butang merah tu. Ape yg die kluar. Same kan? So ape kesilapan saye?

Wan_hazel said...

ok jap2

Shafiq said...

saye dh copy yg slide bawah tu tp x kuar ape2 pon. Ke code yg salah? Cube cek betol2

Wan_hazel said...

bro..try gune kod nie

<style type="text/css">
#fl{
position:fixed;
left:200px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #000000;
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 showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">


KOD ANDA



<div style="text-align: right;">
<a href="javascript:showHideFL()"><br>
<img border="0" src="http://3.bp.blogspot.com/_LhHZAifMoFE/TN6myUsdsZI/AAAAAAAAC-Q/VqSys0LrD3o/s1600/close_button.gif" alt="close" title="Click here to Close Cbox" />
</a></div>
<font size="2"><a href="http://wanhazel.blogspot.com/"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;"></span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Wan_hazel said...

kod icon gune yg kat ats tu..yg wan bagi tadi

kunci locker said...

wan..locker xleh komen kt shoutbox wan...knp ye??smua shoutbox cm wan ni..locker xleh nk komen..kt shoutbox papabear pn cmni gak..

Wan_hazel said...

izwan

erk nape jadi camtu locker??IP adress locker kot..n nape locker komen kat entri wan..komen locker masuk ruangn spam...

Shafiq said...

wan. Knape wan punye kalo klik die kluar laju tp kalo saye punye lambat?

Wan_hazel said...

apit..

wan try tadi ok je pit..tak lambat pun...

Shafiq said...

ye ke? Bile saye bukak wan punye laju tp bile saye punye lg lambat

Wan_hazel said...

Apit

wan nye blog tak laod lmabt..so kene kurangkan loading page k

Unknown said...

dah buat, jadi tp ada probs la kat HTML box sy.. cuba tgk blog sy, kat sidebar n bwh skali.. apsal coding tu mncul ek??

Wan_hazel said...

Anne Nurain

mesti kod tak cukup tu..try buat balik k..wan dh tengok dah tadi

Unknown said...

yess!! da bt balik n menjadi akhirnya.. huhuhu... thanks wan!!

ika said...

lau nk tkr dy kuar kat bwh gne

Wan_hazel said...

yg tu wan tak taw lah...tapi ade kene edit sikit...

Anak Munsyi said...

yayy jadi , tengs buddy (:

Wan_hazel said...

welkam..ehehhee

eVariena♥ said...

wan,,camne nak buat slide tutorial??

i mean, kalo kite klik icon akan kuar link2 tutorial byk2 2..

so mknenye bkn shoutbox dll..tp tutorial..

wan faham x eh ape yg eva ckp ni..haha

Wan_hazel said...

carenye camnie gak..cuma tukar je kandungan nye..n masukkn scroll box gak dalam tu k

eVariena♥ said...

tapi kat KOD SHOUTOBOX,LIVESTREAM DLL tu,,nak letak kod ape..?

Wan_hazel said...

kan ke nak eletak tutorial..so letak lah tutorial dalam tu..ehehehe..

eVariena♥ said...

hahaha...mmg la..xpe2..nanti eva try dulu k..

Wan_hazel said...

ok...wat dulu k..law tak jadi kasi taw

eVariena♥ said...

eh2,,camne nak link kn tutorial tu??

Wan_hazel said...

tgk nie k....

http://wanhazel.blogspot.com/2011/03/tutorial-link-open-in-new-tab.html

eVariena♥ said...

wan,,!!
akhirnye,,dh jadi..hee
tp buruk ag r..nanti nk edit blek..

thanx.. :)

Wan_hazel said...

eVariena♥

ok..ehehhe..peace...

Anonymous said...

wan. sye de mslh skit. npe kotak shoutbox sye terlebih. sye xreti nak adjust kotak tu. tlg tgkkan blh? urlovemylove.blogspot.com

Wan_hazel said...

ok..wan g tgk k

mimi_atia said...

wan..xleh pun nak ubah icon..ingat nk ubah icon doodle muslimah yg wan buat tue tp xkuar gmbar pun..

Wan_hazel said...

ubah kod icon je..law nak wat shoutbox tu..guna kod nie..

http://wanhazel.blogspot.com/2011/08/tutorial-slide-shoutbox-icon-swap-edisi.html

Izzati Syazwani said...

Wan,tak pahamlah... :(
Mula2 Zati dah paste kod untuk kotak pertama tuu..Pastu kod untuk kotak kedua tu,nak paste kat mana pulakk ?? try paste tempat yg sama..tak kuar pape..paste untuk html/javascript yg lain, lain jadinya pulak.. :(

Wan_hazel said...

copy paste kat tempat yg sama gak

atin said...

best lah tuto ni!!^_^