12 June 2011

TUTORIAL : KOTAK SHOUTBOX menggelongsor (SLIDE)

Assalamualaikum ! :)

Okay , act , tutorial ni dari http://wanhazel.blogspot.com/

So , aku hanya menyampaikan kepada korang jelah kan , memandangkan korang malas cari link , balik-balik tanya kat aku kan . HAHA , aku pulak jenis tak reti buat kelainan di blog sendiri , balik-balik , copycat blog orang ni , blog orang tu . HAHA . #alamak , terjujur . HAHA , takdelah , aku ni selalunya keluarkan idea sendiri untuk bloggie aku yang dah hitam ni , tu la , mak kate jangan main kat panas terik , kan dah hitam . =________=" [okay , stop melalut!]


Ni lah rupa SLIDE SHOUTBOX =)

Okay , step first !

Macam biasa lah kan ,

DESIGN => ADD A GADGET => HTML/JavaScript .

Ha , kemudian , korang copy/paste code bawah ni :

<style type="text/css">
#at{
position:fixed;
right:300px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url( );
}
.atcontent{
float:left;
border:2px solid #CA226B;
background:url() #000000 repeat bottom center scroll ;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:5px;
}
</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()#000000 no-repeat;">
<div style="text-align: center;">

CODE SHOUTBOX KORANG

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()">CLOSE</a></div>
<br /><div align="left" float: right;><a href="URL BLOG KORANG/">by NAMA KORANG</a><div style="color: #FFFFFF;">
<span ></span></div></div>
</div></div>

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

<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:150px; right:5px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i180.photobucket.com/albums/x2/vs1e2007/notes.png" alt="PUSH" title="KLIK ME" /></a>
</div>




  • Yang TOP warna biru tu , borang boleh tukar TOP/BOTTOM/LEFT/RIGHT .
  • Yang warna MERAH itu , korang boleh tukar kepada code gambar korang sendiri =)



KEMUDIAN , Korang save , dan preview =) SIAP ! =D

LIKE dan KOMEN adalah HAK ANDA
TERIMA KASIH DAUN KELADI

7 comments:

Anonymous said...

wawa. urrmm syu nyer arn kotak tu terlebih ke bawah. cbe tgk urlovemylove.blogspot.com. Hmm cmne nk bt gmbr cam wawa bt kat tepi tu? ble klik, kuar shoutbox uee..
hmmmm

Anonymous said...

wawa. urrmm shoutbox uee tak jd lah. kotak tu terlebih. uurrrmm cbe tgk urlovemylove.blogspot.com.
pastu cmne wawa ley bt gmbr kt tepi tu? bile klik, tros kuar shoutbox. hmmm

Najwaa Malikk said...

ohh , alamak , macam wawa , gmbr tu wawa edit & adjust sndiri . try buat gmbr sndiri . maaf la ye , gmbr yang wawa letak tu wawa pakai amik dari photobucket . okay2 , wawa tukar gmbar lain :')

Qurratu Aini Mohamed said...

assalamualaikum wawa! haa tak jawab dosaaa~ ^_^
wawa wawa,nk tanya kenapa shoutbox
akudalamkotak.blogspot.com
tak boley comment eh eh??

Qurratu Aini Mohamed said...

ohh plus, mcm mana nk cari code shoutbox ek??

Najwaa Malikk said...

@Qurratu : Waalaikumusalam .
oh , code shoutbox awk amik lepas awak register kat http://www.shoutmix.com/main/

Hikk :)

Qurratu Aini Mohamed said...

ARIGATOGOZAIMASU *bow