Wadah Madrasah Pengalaman: Tutorial Slide Float widget (shoutbox,livestream Facebook,exchange link,banner dll) Untuk pengguna Classic Template


Friday, November 19, 2010

Tutorial Slide Float widget (shoutbox,livestream Facebook,exchange link,banner dll) Untuk pengguna Classic Template



.



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 Classic template ...
Dashboard>Template

Korang copy kod kat bawah nie dan paste di atas </body>




<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..dan letak kat atas </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..



11 comments:

Anonymous said...

rajin sgguh la anda buat mende nih semua ya? hahahaha

ieyza said...

wan...akk langsunglaaa x faham aper yg ko ckpkan tu...confuse tol laaa....maklumlaaa...akk nie tak kreatip...cedih10x....huhuhu

Wan_hazel said...

zOeY zAu YaH

hehehe..biase2 je.nak kongsi ngn blogger len je

Wan_hazel said...

ieyza

hahaha..nape tak faham kak???

AzizahSafura. said...

thanx..
menjadi pown

Wan_hazel said...

az!e_fura

welkam...peace

Dee said...

wan, macam mana wan baut yang Last/Next/Prev kat bawah entry tu untuk classic template? Sebab fara try pakai classic template, and dia tak adew pown Older Post sume tu..

Wan_hazel said...

farah..guna kod nie...

wan guna kod nie..dan letak betul2 bawah koding blogitem

http://wanhazel.blogspot.com/2011/07/tutorial-wat-page-navigation_16.html

Dee said...

wah jadi~! thanks!!!

Ignorance said...

Wann...nak tanyer nh,macam mana nk letak semua tutorial dlm slide float widget ??

Wan_hazel said...

kene wat macam direct link kat dlm tu so kumpulkan semua link tuto kat dlm tu