.
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:
hoho..
bguss btolla wan nie..
suke sgt wat tutorial..
pu3
tengs
thanks wan hope ilmu ko betambah :P
welkam bro..sama sama lah..hope ilmu kita semua bertambah kan..
wahhhh awesome! :)
♥ fara myra ♥
hehehe..tengs..
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!
Liyana Rahman
hahhaa..jap je wat tu kak...tak susah..kene baca betul2 je..
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. =(
Liyana Rahman
cian nye akak....akak ade FB tak>>inbox wan kat FB k..wan hazel..nanti wan tlg
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?
Apit
ooo..juz tambah kat bhgian icon tu je.,.pasang dua bijik...
mksod awk tmbh ape?
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..
so nak buat lagi satu HTML/javascript la or letak dlm satu tempat yg same? Kalo same bg care2nye
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
so mcm mne dgn ayat plak supaye kalo klik kuar utk die sendirinye punye x berkongsi
Apit
ayat??ape tu??tak faham lah...
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?
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
XPE2. So, care nk paste die?
ekot je care macam kat dlm entri tu
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.
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>
nak paste due2 code tu dkt tempat yg same ke kene asing2?
a ah bro..asing2 k..
wan, cube tgk blog saye kjp. Klik 'Tutorial' dgn gmba butang merah tu. Tgk ape yg die kluar. Mcm mne nk selesaikn?
cube tgk blog saye kjp. Tekan 'Tutorial' dgn butang merah tu. Ape yg die kluar. Same kan? So ape kesilapan saye?
ok jap2
saye dh copy yg slide bawah tu tp x kuar ape2 pon. Ke code yg salah? Cube cek betol2
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>
kod icon gune yg kat ats tu..yg wan bagi tadi
wan..locker xleh komen kt shoutbox wan...knp ye??smua shoutbox cm wan ni..locker xleh nk komen..kt shoutbox papabear pn cmni gak..
izwan
erk nape jadi camtu locker??IP adress locker kot..n nape locker komen kat entri wan..komen locker masuk ruangn spam...
wan. Knape wan punye kalo klik die kluar laju tp kalo saye punye lambat?
apit..
wan try tadi ok je pit..tak lambat pun...
ye ke? Bile saye bukak wan punye laju tp bile saye punye lg lambat
Apit
wan nye blog tak laod lmabt..so kene kurangkan loading page k
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??
Anne Nurain
mesti kod tak cukup tu..try buat balik k..wan dh tengok dah tadi
yess!! da bt balik n menjadi akhirnya.. huhuhu... thanks wan!!
lau nk tkr dy kuar kat bwh gne
yg tu wan tak taw lah...tapi ade kene edit sikit...
yayy jadi , tengs buddy (:
welkam..ehehhee
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
carenye camnie gak..cuma tukar je kandungan nye..n masukkn scroll box gak dalam tu k
tapi kat KOD SHOUTOBOX,LIVESTREAM DLL tu,,nak letak kod ape..?
kan ke nak eletak tutorial..so letak lah tutorial dalam tu..ehehehe..
hahaha...mmg la..xpe2..nanti eva try dulu k..
ok...wat dulu k..law tak jadi kasi taw
eh2,,camne nak link kn tutorial tu??
tgk nie k....
http://wanhazel.blogspot.com/2011/03/tutorial-link-open-in-new-tab.html
wan,,!!
akhirnye,,dh jadi..hee
tp buruk ag r..nanti nk edit blek..
thanx.. :)
eVariena♥
ok..ehehhe..peace...
wan. sye de mslh skit. npe kotak shoutbox sye terlebih. sye xreti nak adjust kotak tu. tlg tgkkan blh? urlovemylove.blogspot.com
ok..wan g tgk k
wan..xleh pun nak ubah icon..ingat nk ubah icon doodle muslimah yg wan buat tue tp xkuar gmbar pun..
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
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.. :(
copy paste kat tempat yg sama gak
best lah tuto ni!!^_^
Post a Comment