Sayuri HaNa

0 LoVeR | 01/12/2012

Request dari Nadhirah....

SH cuba tunaikan...

Maafkan SH kerana ini sahaja yang mampu SH berikan buat Nadhirah...

Dah cuba cari gambar yang mampu memberikan yang terbaik, tetapi ini sahaja hasil yang dapat

Salah satu sebab juga mungkin sibuk dengan assigment tapi cuba memenuhi permintaan Nadhirah :)

Hope you like it......

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpRswWQYr7adZ3p71dyGLwvfk8E1DbiImr0ihAm37LXHq_ENuL964DM-zILBPIo-nn0HKYrQAS-E8Tx5ERZjoAz4RxF_wnlOqU-oB0LVnGtMLIyor_WhkBBht-29dGSxair3pwVaCN1AI/s1600/nickhun+1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbg1-ZKIP6doPDirwgLvFeUp7jYWFKUGtqNYwE56WMff49ZfknsDd6hsJNBSmePM9gK7I8ozL5KMbVS5OTyP-shj-oc8Wtn_Rz1rpKofkr_-dP2iDa0W0kY_rruBXjPOeomzPfCBPoKa8/s1600/nickhun+10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vcqJ6nP2jvAxdAQEAvwax4wo8panRi0SZWKyEvssbbS_fVA8qzuoI2KkhMqm7JDl4jWHxqU2t0-Iwfyt4oUv3JED-ive5qxhS2j0cyAPX0WPd14eNxtNepO8u6lyNH5lOwfpNpye6KU/s1600/nickhun+11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfQF_8NgU_TEJaFRx2u2lHIeXlTEeFhvLl0tqzM6JFKnU8HmBB35fAKt32tbYI7PSHqviiBD5QWjP859qOJoq-mTh3W155jn4KUXwk5vgMwAYqyDxt4NXrY2efcNNyKzWk1OCJkPt8Mks/s1600/nickhun+2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWkd_4-Ea5erQUalWctlGU3F6g7uLkYCNIvmLZdmv4Z-9VsYsiyedABuUfC6dSDmMx6Qde-aM7soX4oGAhgRssvGsz3jyjbA956cHsI4008cWXyrFJ8xxcrnklTLmKLBCUWutlhfxSeWQ/s1600/nickhun+3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSD0yC2PbxBaF7q3rv8SobHVC1Y6TdQBXc0fBYC9wnQ0MUX4teqTIpG0zW9IfKbn6lThjMEbd_IGfDtLYSAv-cdGj6WMyTg6Ga-ed8GjBUKRKSBWIBVguYDOn64GNNqZMZkqg6Hx5Vhi4/s1600/nickhun+4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyQJa-Fw5pi-8v3CKtlLoNjJMXKlqTzEi79OgYr2EF3_BrH3vi__jeImQVeTs3qe1YCpSH3FNpwXGF30JuoHneX7Rj3l5MGxMQd7RDyiNa0yeFRBvvvlIXT4JGT6f3_gRt4QhnuJoetUI/s1600/nickhun+5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAJwN54v7I43VQV8Xx-dgyn8CqjQq2iAX8jEcUNEmPe-dzaJEcs5c5gXDEfmPN5YbXmt8dDE7ftPDiECkaewRoMtkatcZE6wmJJqBRx1xM-TwfPE7n5hbSAbUjmNM1CjcpegPFvllGs3c/s1600/nickhun+6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUyYf80lKVS0aLl-qTLgwLuQOL90QEsn0XIXge3moZ5sdrn5ALZsxiKVOI578Y-dQnuAC3rX_lhhfVM6k4FP8DLki7psWbjB0TFZN49W-1FilxqCAG-j85Nyq3917xNqeU57oAF3qFb4/s1600/nickhun+7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNqp691omUPXX8HFzllKiGP5De3ZbK8rRSmbJA_9q4v0c51zyvTPJdr0vay_ozl-L84pi4Jf0T6P9AphTcxBFCplN5Qh5dN6oh3HgmyJ5esrjclzHSlPj8tClL6I91wVmllHOq06WHnw/s1600/nickhun+8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPPCaalO4tZSjmB6DY3_rkUJvVbBWqdQ5W_L9QkO9Qea57dQNieE-Q7nrrtuBGsqqAemOMPdiK-vW3udTkNKqxVBjl5it21ZtU3M44u7oKls8Uua9atLESCgV48NmIAXxb2zmbieNcP-A/s1600/nickhun+9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYEbMphGchI0GwwvJhcYbEN94H8mXHtHs5x_o8LDOyveCS0dC2UDNxn3KRY1qm3bA0dL3ApFSw1agrltTEDPZgycX1v0Phq62m57K0o4GkhxQzcROYMu_pEdWqi4O-3dC4G94YVMvXSs/s1600/nickhun.png

Labels: Freebies, Tutorial

1 LoVeR | 28/01/2012

++ Macam mana nak buat enjin carian ++

++ BUKAN enjin carian pak google ++

++ Tapi enjin carian untuk entry dalm blog kita ++

1. Design > Page Element > Add Gadget > HTML/Javascript

2. Copy kod bawah ni dalam HTML/Javascript

<form action="http://URL BLOG ANDA/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

3.Tukarkan URL BLOG ANDA kepada url blog anda!

4. Save!

Thanks with Love to: ++ Dhea ++
EpiloG Dunia SaYuRi.

Labels: Tutorial

0 LoVeR |

Cara nak buat Fly to top

Tuto ni untuk fly tuh muncul bila kita dah scroll down ke bawah!

Kalau kita masih di atas ia takkan muncul.

1. Design > Page Element > Add Gadget > HTML/Javascript

2. Copy kod di bawah ini kat dalam HTML/Javascript tadi.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >/***********************************************

* Scroll To Top Control script- © Dynamic Drive DHTML code library(www.dynamicdrive.com)* Modified byLyssaFaizureen***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL IMAGE FLY TO TOP" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

3. Tukarkan URL IMAGE FLY TO TOP dengan url anda!

4. Save

Nak freebies Fly to Top??

++ Klik untuk Freebies Fly to Top ++

Thanks with Love to:
EpiloG Dunia SaYuRi.

Labels: Tutorial

2 LoVeR |

Hari ni tak tau nape rajin sangat nak wat freebies :)

Ini untuk BACK TO TOP korang!

Semuanya Korean Boy freebies..

Macam SH punya lah!

Hehe sowey tak de yang lain!

Nanti baru bagi yang lain!

++ Kim Hyun Joong ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2qvj8vQI-1RwSDgcNx12HKpmuFJtBE09aRv8sIWJBkevqNwiLyqyt1mvHkSjsc5KbvNzqC6V_9Z-9MEoN6lJZO2OxvbXoGL7PyccczpAT4bsjMAGZyum7HfL5S2Tg4XV0PDSnPdp7l_8/s1600/top+KHJ.png

++ Super Junior Donghae ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPYv9njnTM5vaE1fFlmPbYdavyS-LAIRcgOJhtYoFsHtFHqbe7LBUbMfEvI5cCtCo8KVG-9wJPihpGdeMgLYP6aN7V-BnKyOzt2I3Asr4ekuts3GtFkfEA4a-E6pzVt7wNcWFx6JyvSHk/s1600/donghae+copy.png

++ Super Junior Eunhyuk ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4AHoRfPq4oa3HllS6f3O2OWG3cwBujV3Pt8PXcITYqMxhdSrv_-sjVnAaSVNZN2X5mSWgb9HwbMBrIwZnq4CMgeCWk059_ooAF-dimkyezyXffIurMyCp9XOv0ZfOq4dB6gMAG5icmZg/s1600/eunhyuk+copy.png

++ Super Junior Kyuhyun ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYL-pLOfnk08dV7-F_1uz8xafuuziRGPB1t47DcaKNCDK0z-pb5jUt1sJjWvtBGmiPdWkm2GOdy5yD3fVj_xvz0T3zVVu5TOqsWGDszT60DOaXHjEnYKKI9oflTab4Y1ouwI6BcuqeDwo/s1600/kyu+hyun+copy.png

++ Ft Island Hong Gi ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmbo9BCzKXAMZN9ua0DzlikyJXujR40pknFPNbQD4vkUoelMRZ7v1Fn8t_Eu68Xe0Wfq49PmJYTWkBdbXHAobfaaxCZrKwAb0Htuo1gUaS4C0N25uPZ3TcqVEmTj0xMrQYUd-fMIL4Bo/s1600/lee+hongi+copy.png

++ Super Junior Leeteuk ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HUOERjy6Msf11mgX5HUCE6O4zS8HQ1-OV77jynVo1wKhhhbKFkW3Rds6lCfQtT8NqtakZADVIwcBPD5Ld2egxOdjx_IEztJzILFB2X9Sce4Vio_cRuULd0793z9JMRMbVxy2xcLr0ZE/s1600/leeteuk.png

++ Lee Minho ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQwXe_JbLhuVGeASFnMvXzLuHM4j7_onR9m6DNYhYEdts9tShbpte3eNYKhc2MtVaofkUoQLjB79xWy_xKKK9zMFUUW_TMu-cTp4cW7b5oWnuI3Qk5I-8UoCYzG0RjhUQf9ttuuWyK2Y/s1600/minho+copy.png

++ Super Junior Ryeowook ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzIIu0iJ565HmP5U6B5gZkZFDjTz91yuQtLmNx-tjUphhIRPRyztT_k-94n1v7zYAStsvJ9G4TlU1yfznLzPO5NDq9aLaT3PTq29wJgTvUeUvC8yXJWlYJBLJ6Gk2gabsMUr-WTCtwvPQ/s1600/reeyok+copy.png

++ Super Junior Shindong ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9asI0wuW10oZ2OBHVaNLKYkW5uJLLBDWKDtv18HwE_3liLQ6NnHqNrFXtHolcrepTb3e8mjm-a6ROkf10HlnZSlYwyInhjQYS_c_NMS6OMKcJWx0Be1oPu0sFWJHOT4mTf-ntvl2ODq0/s1600/shindong+copy.png

++ Super Junior Siwon ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTgYTK7YqvVC6WJV-_IHMVinZaPYGKONHwKb9gUOGdhbrVXIfPcKYnPqzr7dM6hKREokVDqayOFDOBrPLTd-r3XGGrjae9Vt2nFSFds_-Ee6tPmWcfV5yOC_GViTpYgdZO_ZaY5SSRnVI/s1600/siwon+2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_O3L2gs9-KwnZp4OAe5495DYWrri78jv5RTPN5CmFDDrHIjxJQxOFJ4fj2SqeRdXdJQ1xiqs1wZ8weXxjyAoNhRB9aCaErkCrB5ZhMtmChDGM-E9HjQHdTjgxHeaRFHrq7Pm4ELSLwF0/s1600/siwon.png

Setakat ni je yang rajin nak buat!

Sedang mencari lagi gambar2 yang boleh di edit!

So akan di update dari semasa ke semasa k!

Thanks with Love to:Pak google
EpiloG Dunia SaYuRi.

Labels: Tutorial

3 LoVeR | 09/11/2011

Tuto kedua untuk masa ini...
Dah lama tak buat benda ni sebab tumpu pada coding kat Mr Putty je hahaha

Okies, SH nak menjawab soalan Cik Fiqa berkenaaan Assalamualaikum diatas ini...

Yup SH buat sendiri lah Gambar ini Cik Fiqa...

Ukuran yang SH guna

500x100

SH buat guna photoshop okies..
Tapi kalau Cik Fiqa nak , boleh lah cari di beloG yang menyediakan gambar seperti diatas tuh...

Cara nak buat pun senang sahaja..
1. Dashboard > Setting > Formating
2. Cari Post Template
3. Ada ruang kan kat dalam post template tuh, maka copy aha coding ni

<center><img src="URL ASSALAMUALAIKUM"/></center>

* Gantikan perkataan Biru dengan Image URL yang korang suka
4. Dah Ganti korang boleh lah save okies!
5. Benda ni otomatik setiap entry akan ada! Tak payah ulang banyak kali buat!

Haa kalau nak URL perkataan assalamualaikum, SH tak sediakan sebab SH dah penat bermain dengan Photoshop satu hari ni!
Maka SH kredit tuh DIA atas perkataan yang kiut miut ni!

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG_bIbMeIK_YS3tRiFKz3drZ55D24dJPWf0G7p_6-SOJu7X8nKNXOabB2xSvZ6xYXE0mSNjVEdC5jWwZla75aHxYKySdhCrRfuVscu_R1H-5pmkVZeH62UOahnwZQNXyLLNkMXGSoI53o/s1600/assalamualaikum.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjAhjO8aM0NeLpNKTdbxchrcT0mq36rIK8xnopuw93eucNmWhhuIOyJXv92_BdvhPB4HTE4Uh8gSS_5iQV2_3Jt6CYbz0etosaj4_guEYi8omcJgte5GFEWkKb0O4pKpvWv-9l8uRL6AQ/s1600/assalamualaikum1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBbJk2fiCYcaINm-EMgqelEUeyxamuJgrP1JJAPYiGaobOQPw9r3diIJm-K5-qRM1c6FOWVzRrZ-DpsPDC8P86E_DmvM5lPMIc79FS5oxtImYO38Xw-atuKgYkkdDF0GHZmA_antZ9cA/s1600/assalamualaikum2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0c2TBWAXmCV2CkPrhdO1RCg7NJg7cFKsMlyN9joOJLND93If56F_ojfDgGzfVWPbSS57ynV9SfIjj_n5F0VrSTFdLcm65giFgZnxFbhZSXwtqI2x-rHhqP8ADNqIGITNjK2sSX7uCPCQ/s1600/assalamualaikum3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNqqkwrEZ1Dtfh41JBRDN-kXSEr6b9WMmxW8nhMlv0LrrXzOhcxDCyx-Hvf3tRdHWUc1cIXWaHW2YXFGNQiKKoiHMU3IBmkMJMGU6_tTiFPCqi13ksCsLJPmVAYlHCmwC67Xbqu2AL_Q/s1600/assalamualaikum6.png

Thanks with Love to: lYssa Secret
EpiloG Dunia SaYuRi.

Labels: Tutorial

1 LoVeR |

Okies SH baru selesai mengedit beloG Mak Cik Shida
Tak de lah banyak sangat SH edit sebab tuannya tuh kata "terpulang pada SH kan"
Maka SH pun tak tahu nak buat pe lagi...!
Background, header, song adalah permintaan beliau..!
Dan SH cuma edit yang lain-lain tuh je hehehe...!

Dan alkisahnya terbiarlah beloG SH ni seketika..!
Jadi bila on je beloG SH ni, eh ade something kat shoutmix SH ni lah!

Apa dia???
Inilah -->

Okies, Cik Fiqa tanya SH dua soalan!
SH jawab yang "GAMBAR BERGERAK KETEPI" dulu k!

Cik Fiqa kata gambar beliau bergerak ke atas...!
Perkara tuh senang je!
Kena tukar sedikit coding je :)

1. Dashboard > Design > Page Elemen > Add a Gadget > HTML/Javascript
2. Then copy link kat bawah ni

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width="100%" height="200" align="center">
<img src="URL GAMBAR ANDA" height="200" width="190" />
<img src="URL GAMBAR ANDA" height="200" width="190" />
<img src="URL GAMBAR ANDA" height="200" width="190" />
<img src="URL GAMBAR ANDA" height="200" width="190" />
</marquee>

3. Korang cuma tukar

URL GAMBAR ANDA tuh dengan gambar yang korang nak.
Warna Biru dengan saiz gambar ikut kesesuaian korang
Warna Jingga : Kenapa SH highligt benda ni...ha buat pengetahuan Cik Fiqa, benda ni yang tentukan arah mana gambar kita bergerak.. Kalau UP , keatas lah... Kalau Down, kebawahlah dan seterusnya.... Jadi tukar aje "up" ---> "left"...Dah jadi macam SH punya gambar!

Senang je kan...
Untuk Soalan yang lain, tunggu next entry k hehehe!

Thanks with Love to: Web Programming
EpiloG Dunia SaYuRi.

Labels: Tutorial

3 LoVeR | 07/09/2011

Bismillahirahmannirahim..
Assalamualaikum w.b.t
Dear BeloG,

Alamak tetiba hari ini ada pertanyaan dr sahabat blogger SH lah :)
Cik Aisyah , SH pun belajar dari orang buat benda ni..
Tapi , Insyaallah SH tolong apa yang SH paham :)

Benda yang Cik Aisyah tanya ni adalah :

Kotak untuk header di luar entry ..
Nak buat ni pun banyak main ngan nombor dy..
Agak jiwa kacau jugalah SH nak men'center' kan benda alah ini...

Step 1 :

Dashboard >> Design >> Edit HTML

Step 2 :

Find code h2.date-header {

Step 3 :

Copy and paste code kat bawah ni di bawah h2.date-header {

height:40px;
margin:-20px -20px -500px -180px;
padding: 45px 300px 105px 35px;
background: url(URL DATE HEADER ANDA) no-repeat;position:absolute !important; position:relative; float:right;text-align:;font-family: MuchaFrenchCapitals; color: #000000;}

Maka ia akan jadi begini :

h2.date-header {
height:40px;
margin:-20px -20px -500px -180px;
padding: 45px 300px 105px 35px;
background: url(URL DATE HEADER ANDA) no-repeat;
position:absolute !important; position:relative; float:right;
text-align:;
font-family: MuchaFrenchCapitals; color: #000000;
}

Step 4 :

Edit coding untuk kesesuaian blog anda
Biru - Letaklah url gambar date header yang korang ada !
Merah - Pandai2 korang edit untuk kedudukan gambar date header korang
Purple - Edit untuk kedudukan date korang
Orange - Kedudukan date header korang !

Notes** coding merah dan unggu ni biasanya SH hanya ubah yang itu... tak tahu kalau korang kena ubah yang lain gak..Pandai2lah bermain dengan nombor tuh :)

Step 5:

Preview & save

Kalau nak buat sendiri Header date korang pun boleh.. SH buat dengan 181x96 yerk..ikut suka hati korang lah...

Thanks with Love to: Cik Kemetot Chomel
EpiloG Dunia SaYuRi.

Labels: Tutorial

0 LoVeR | 03/09/2011

Bismillahirahmannirahim..
Assalamualaikum w.b.t
Dear BeloG,

Baru aja belaja wat benda [atas ni] ..
Agak menyenangkan juga lah :)
Korang pun boleh letak apa-apa je kat sini..
Example : Shoutbox, about you dll...

Ok , Mula-mula :

Dashboard >> Design >> Page Elements >> Add A Gadget >> HTML/Javascript

Pastekan Kod ini kat ruangan HTML/Javascript.

<center><div id="widget" style="background:url(URL BACKGROUND) no-repeat left top; width:80;height:300px;padding: 30px 10px 0px;text-align: center;line-height: 1 ">

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width:100px; /* Main Menu Top Width */
text-align:center ; height: 30px; /* Top High Main Menu
*/
padding-top:8px; vertical-align:middle; border:2px solid #ffffff; /* Top Menu border color */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Top Fonts Main Menu */
font-weight:bold; color:#000; /* Main Menu Font Color Top */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #dedede; /* Background colors on Main Menu */ }
div.TabView div.Pages {clear:both; border:2px solid #FFFFFF; /* Main Box border color */ overflow:hidden; background-color:#FFFFFF; /* Main Box background color */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>TAJUK 1</a>

<a>TAJUK 2</a>

</div>
<div style="width:200px; height:290px; " class="Pages">
<div class="Page">
<div class="Pad">

ISI TAJUK 1

</div>
</div>
<div class="Page">
<div class="Pad">

ISI TAJUK 2

<div class="Page">
<div class="Pad">

<script type="text/javascript">
tabview_initialize('TabView');
</script>

</div></div><center/></center></div></div></div></div></form></div></center>

URL BACKGROUND : Nak letak boleh tak letak pun boleh...

BIRU : Isi perkataan / kod yang korang nakkan ..!

Thanks with Love to:

EpiloG Dunia SaYuRi.

Labels: Tutorial

<< OLDER

NEWER >>

0 LoVeR | 01/12/2012

Request dari Nadhirah....

SH cuba tunaikan...

Maafkan SH kerana ini sahaja yang mampu SH berikan buat Nadhirah...

Dah cuba cari gambar yang mampu memberikan yang terbaik, tetapi ini sahaja hasil yang dapat

Salah satu sebab juga mungkin sibuk dengan assigment tapi cuba memenuhi permintaan Nadhirah :)

Hope you like it......

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpRswWQYr7adZ3p71dyGLwvfk8E1DbiImr0ihAm37LXHq_ENuL964DM-zILBPIo-nn0HKYrQAS-E8Tx5ERZjoAz4RxF_wnlOqU-oB0LVnGtMLIyor_WhkBBht-29dGSxair3pwVaCN1AI/s1600/nickhun+1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbg1-ZKIP6doPDirwgLvFeUp7jYWFKUGtqNYwE56WMff49ZfknsDd6hsJNBSmePM9gK7I8ozL5KMbVS5OTyP-shj-oc8Wtn_Rz1rpKofkr_-dP2iDa0W0kY_rruBXjPOeomzPfCBPoKa8/s1600/nickhun+10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vcqJ6nP2jvAxdAQEAvwax4wo8panRi0SZWKyEvssbbS_fVA8qzuoI2KkhMqm7JDl4jWHxqU2t0-Iwfyt4oUv3JED-ive5qxhS2j0cyAPX0WPd14eNxtNepO8u6lyNH5lOwfpNpye6KU/s1600/nickhun+11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfQF_8NgU_TEJaFRx2u2lHIeXlTEeFhvLl0tqzM6JFKnU8HmBB35fAKt32tbYI7PSHqviiBD5QWjP859qOJoq-mTh3W155jn4KUXwk5vgMwAYqyDxt4NXrY2efcNNyKzWk1OCJkPt8Mks/s1600/nickhun+2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWkd_4-Ea5erQUalWctlGU3F6g7uLkYCNIvmLZdmv4Z-9VsYsiyedABuUfC6dSDmMx6Qde-aM7soX4oGAhgRssvGsz3jyjbA956cHsI4008cWXyrFJ8xxcrnklTLmKLBCUWutlhfxSeWQ/s1600/nickhun+3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSD0yC2PbxBaF7q3rv8SobHVC1Y6TdQBXc0fBYC9wnQ0MUX4teqTIpG0zW9IfKbn6lThjMEbd_IGfDtLYSAv-cdGj6WMyTg6Ga-ed8GjBUKRKSBWIBVguYDOn64GNNqZMZkqg6Hx5Vhi4/s1600/nickhun+4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyQJa-Fw5pi-8v3CKtlLoNjJMXKlqTzEi79OgYr2EF3_BrH3vi__jeImQVeTs3qe1YCpSH3FNpwXGF30JuoHneX7Rj3l5MGxMQd7RDyiNa0yeFRBvvvlIXT4JGT6f3_gRt4QhnuJoetUI/s1600/nickhun+5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAJwN54v7I43VQV8Xx-dgyn8CqjQq2iAX8jEcUNEmPe-dzaJEcs5c5gXDEfmPN5YbXmt8dDE7ftPDiECkaewRoMtkatcZE6wmJJqBRx1xM-TwfPE7n5hbSAbUjmNM1CjcpegPFvllGs3c/s1600/nickhun+6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNqp691omUPXX8HFzllKiGP5De3ZbK8rRSmbJA_9q4v0c51zyvTPJdr0vay_ozl-L84pi4Jf0T6P9AphTcxBFCplN5Qh5dN6oh3HgmyJ5esrjclzHSlPj8tClL6I91wVmllHOq06WHnw/s1600/nickhun+8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPPCaalO4tZSjmB6DY3_rkUJvVbBWqdQ5W_L9QkO9Qea57dQNieE-Q7nrrtuBGsqqAemOMPdiK-vW3udTkNKqxVBjl5it21ZtU3M44u7oKls8Uua9atLESCgV48NmIAXxb2zmbieNcP-A/s1600/nickhun+9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYEbMphGchI0GwwvJhcYbEN94H8mXHtHs5x_o8LDOyveCS0dC2UDNxn3KRY1qm3bA0dL3ApFSw1agrltTEDPZgycX1v0Phq62m57K0o4GkhxQzcROYMu_pEdWqi4O-3dC4G94YVMvXSs/s1600/nickhun.png

Labels: Freebies, Tutorial

1 LoVeR | 28/01/2012

++ Macam mana nak buat enjin carian ++

++ BUKAN enjin carian pak google ++

++ Tapi enjin carian untuk entry dalm blog kita ++

1. Design > Page Element > Add Gadget > HTML/Javascript

2. Copy kod bawah ni dalam HTML/Javascript

<form action="http://URL BLOG ANDA/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

3.Tukarkan URL BLOG ANDA kepada url blog anda!

4. Save!

Thanks with Love to: ++ Dhea ++
EpiloG Dunia SaYuRi.

Labels: Tutorial

0 LoVeR |

Cara nak buat Fly to top

Tuto ni untuk fly tuh muncul bila kita dah scroll down ke bawah!

Kalau kita masih di atas ia takkan muncul.

1. Design > Page Element > Add Gadget > HTML/Javascript

2. Copy kod di bawah ini kat dalam HTML/Javascript tadi.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >/***********************************************

* Scroll To Top Control script- © Dynamic Drive DHTML code library(www.dynamicdrive.com)* Modified byLyssaFaizureen***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL IMAGE FLY TO TOP" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

3. Tukarkan URL IMAGE FLY TO TOP dengan url anda!

4. Save

Nak freebies Fly to Top??

++ Klik untuk Freebies Fly to Top ++

Thanks with Love to:
EpiloG Dunia SaYuRi.

Labels: Tutorial

2 LoVeR |

Hari ni tak tau nape rajin sangat nak wat freebies :)

Ini untuk BACK TO TOP korang!

Semuanya Korean Boy freebies..

Macam SH punya lah!

Hehe sowey tak de yang lain!

Nanti baru bagi yang lain!

++ Kim Hyun Joong ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2qvj8vQI-1RwSDgcNx12HKpmuFJtBE09aRv8sIWJBkevqNwiLyqyt1mvHkSjsc5KbvNzqC6V_9Z-9MEoN6lJZO2OxvbXoGL7PyccczpAT4bsjMAGZyum7HfL5S2Tg4XV0PDSnPdp7l_8/s1600/top+KHJ.png

++ Super Junior Donghae ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPYv9njnTM5vaE1fFlmPbYdavyS-LAIRcgOJhtYoFsHtFHqbe7LBUbMfEvI5cCtCo8KVG-9wJPihpGdeMgLYP6aN7V-BnKyOzt2I3Asr4ekuts3GtFkfEA4a-E6pzVt7wNcWFx6JyvSHk/s1600/donghae+copy.png

++ Super Junior Eunhyuk ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4AHoRfPq4oa3HllS6f3O2OWG3cwBujV3Pt8PXcITYqMxhdSrv_-sjVnAaSVNZN2X5mSWgb9HwbMBrIwZnq4CMgeCWk059_ooAF-dimkyezyXffIurMyCp9XOv0ZfOq4dB6gMAG5icmZg/s1600/eunhyuk+copy.png

++ Super Junior Kyuhyun ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYL-pLOfnk08dV7-F_1uz8xafuuziRGPB1t47DcaKNCDK0z-pb5jUt1sJjWvtBGmiPdWkm2GOdy5yD3fVj_xvz0T3zVVu5TOqsWGDszT60DOaXHjEnYKKI9oflTab4Y1ouwI6BcuqeDwo/s1600/kyu+hyun+copy.png

++ Ft Island Hong Gi ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmbo9BCzKXAMZN9ua0DzlikyJXujR40pknFPNbQD4vkUoelMRZ7v1Fn8t_Eu68Xe0Wfq49PmJYTWkBdbXHAobfaaxCZrKwAb0Htuo1gUaS4C0N25uPZ3TcqVEmTj0xMrQYUd-fMIL4Bo/s1600/lee+hongi+copy.png

++ Super Junior Leeteuk ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HUOERjy6Msf11mgX5HUCE6O4zS8HQ1-OV77jynVo1wKhhhbKFkW3Rds6lCfQtT8NqtakZADVIwcBPD5Ld2egxOdjx_IEztJzILFB2X9Sce4Vio_cRuULd0793z9JMRMbVxy2xcLr0ZE/s1600/leeteuk.png

++ Lee Minho ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQwXe_JbLhuVGeASFnMvXzLuHM4j7_onR9m6DNYhYEdts9tShbpte3eNYKhc2MtVaofkUoQLjB79xWy_xKKK9zMFUUW_TMu-cTp4cW7b5oWnuI3Qk5I-8UoCYzG0RjhUQf9ttuuWyK2Y/s1600/minho+copy.png

++ Super Junior Ryeowook ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzIIu0iJ565HmP5U6B5gZkZFDjTz91yuQtLmNx-tjUphhIRPRyztT_k-94n1v7zYAStsvJ9G4TlU1yfznLzPO5NDq9aLaT3PTq29wJgTvUeUvC8yXJWlYJBLJ6Gk2gabsMUr-WTCtwvPQ/s1600/reeyok+copy.png

++ Super Junior Shindong ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9asI0wuW10oZ2OBHVaNLKYkW5uJLLBDWKDtv18HwE_3liLQ6NnHqNrFXtHolcrepTb3e8mjm-a6ROkf10HlnZSlYwyInhjQYS_c_NMS6OMKcJWx0Be1oPu0sFWJHOT4mTf-ntvl2ODq0/s1600/shindong+copy.png

++ Super Junior Siwon ++

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTgYTK7YqvVC6WJV-_IHMVinZaPYGKONHwKb9gUOGdhbrVXIfPcKYnPqzr7dM6hKREokVDqayOFDOBrPLTd-r3XGGrjae9Vt2nFSFds_-Ee6tPmWcfV5yOC_GViTpYgdZO_ZaY5SSRnVI/s1600/siwon+2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_O3L2gs9-KwnZp4OAe5495DYWrri78jv5RTPN5CmFDDrHIjxJQxOFJ4fj2SqeRdXdJQ1xiqs1wZ8weXxjyAoNhRB9aCaErkCrB5ZhMtmChDGM-E9HjQHdTjgxHeaRFHrq7Pm4ELSLwF0/s1600/siwon.png

Setakat ni je yang rajin nak buat!

Sedang mencari lagi gambar2 yang boleh di edit!

So akan di update dari semasa ke semasa k!

Thanks with Love to:Pak google
EpiloG Dunia SaYuRi.

Labels: Tutorial

3 LoVeR | 09/11/2011

Tuto kedua untuk masa ini...
Dah lama tak buat benda ni sebab tumpu pada coding kat Mr Putty je hahaha

Okies, SH nak menjawab soalan Cik Fiqa berkenaaan Assalamualaikum diatas ini...

Yup SH buat sendiri lah Gambar ini Cik Fiqa...

Ukuran yang SH guna

500x100

<center><img src="URL ASSALAMUALAIKUM"/></center>

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG_bIbMeIK_YS3tRiFKz3drZ55D24dJPWf0G7p_6-SOJu7X8nKNXOabB2xSvZ6xYXE0mSNjVEdC5jWwZla75aHxYKySdhCrRfuVscu_R1H-5pmkVZeH62UOahnwZQNXyLLNkMXGSoI53o/s1600/assalamualaikum.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjAhjO8aM0NeLpNKTdbxchrcT0mq36rIK8xnopuw93eucNmWhhuIOyJXv92_BdvhPB4HTE4Uh8gSS_5iQV2_3Jt6CYbz0etosaj4_guEYi8omcJgte5GFEWkKb0O4pKpvWv-9l8uRL6AQ/s1600/assalamualaikum1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBbJk2fiCYcaINm-EMgqelEUeyxamuJgrP1JJAPYiGaobOQPw9r3diIJm-K5-qRM1c6FOWVzRrZ-DpsPDC8P86E_DmvM5lPMIc79FS5oxtImYO38Xw-atuKgYkkdDF0GHZmA_antZ9cA/s1600/assalamualaikum2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0c2TBWAXmCV2CkPrhdO1RCg7NJg7cFKsMlyN9joOJLND93If56F_ojfDgGzfVWPbSS57ynV9SfIjj_n5F0VrSTFdLcm65giFgZnxFbhZSXwtqI2x-rHhqP8ADNqIGITNjK2sSX7uCPCQ/s1600/assalamualaikum3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNqqkwrEZ1Dtfh41JBRDN-kXSEr6b9WMmxW8nhMlv0LrrXzOhcxDCyx-Hvf3tRdHWUc1cIXWaHW2YXFGNQiKKoiHMU3IBmkMJMGU6_tTiFPCqi13ksCsLJPmVAYlHCmwC67Xbqu2AL_Q/s1600/assalamualaikum6.png

Thanks with Love to: lYssa Secret
EpiloG Dunia SaYuRi.

Labels: Tutorial

1 LoVeR |

Okies, Cik Fiqa tanya SH dua soalan!
SH jawab yang "GAMBAR BERGERAK KETEPI" dulu k!

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width="100%" height="200" align="center">
<img src="URL GAMBAR ANDA" height="200" width="190" />
<img src="URL GAMBAR ANDA" height="200" width="190" />
<img src="URL GAMBAR ANDA" height="200" width="190" />
<img src="URL GAMBAR ANDA" height="200" width="190" />
</marquee>

3. Korang cuma tukar

URL GAMBAR ANDA tuh dengan gambar yang korang nak.
Warna Biru dengan saiz gambar ikut kesesuaian korang
Warna Jingga : Kenapa SH highligt benda ni...ha buat pengetahuan Cik Fiqa, benda ni yang tentukan arah mana gambar kita bergerak.. Kalau UP , keatas lah... Kalau Down, kebawahlah dan seterusnya.... Jadi tukar aje "up" ---> "left"...Dah jadi macam SH punya gambar!

Senang je kan...
Untuk Soalan yang lain, tunggu next entry k hehehe!

Thanks with Love to: Web Programming
EpiloG Dunia SaYuRi.

Labels: Tutorial

3 LoVeR | 07/09/2011

Bismillahirahmannirahim..
Assalamualaikum w.b.t
Dear BeloG,

Kotak untuk header di luar entry ..
Nak buat ni pun banyak main ngan nombor dy..
Agak jiwa kacau jugalah SH nak men'center' kan benda alah ini...

Step 1 :

Dashboard >> Design >> Edit HTML

Step 2 :

Find code h2.date-header {

Step 3 :

Copy and paste code kat bawah ni di bawah h2.date-header {

height:40px;
margin:-20px -20px -500px -180px;
padding: 45px 300px 105px 35px;
background: url(URL DATE HEADER ANDA) no-repeat;position:absolute !important; position:relative; float:right;text-align:;font-family: MuchaFrenchCapitals; color: #000000;}

Maka ia akan jadi begini :

h2.date-header {
height:40px;
margin:-20px -20px -500px -180px;
padding: 45px 300px 105px 35px;
background: url(URL DATE HEADER ANDA) no-repeat;
position:absolute !important; position:relative; float:right;
text-align:;
font-family: MuchaFrenchCapitals; color: #000000;
}

Notes** coding merah dan unggu ni biasanya SH hanya ubah yang itu... tak tahu kalau korang kena ubah yang lain gak..Pandai2lah bermain dengan nombor tuh :)

Step 5:

Preview & save

Kalau nak buat sendiri Header date korang pun boleh.. SH buat dengan 181x96 yerk..ikut suka hati korang lah...

Thanks with Love to: Cik Kemetot Chomel
EpiloG Dunia SaYuRi.

Labels: Tutorial

0 LoVeR | 03/09/2011

Bismillahirahmannirahim..
Assalamualaikum w.b.t
Dear BeloG,

Baru aja belaja wat benda [atas ni] ..
Agak menyenangkan juga lah :)
Korang pun boleh letak apa-apa je kat sini..
Example : Shoutbox, about you dll...

Ok , Mula-mula :

Dashboard >> Design >> Page Elements >> Add A Gadget >> HTML/Javascript

Pastekan Kod ini kat ruangan HTML/Javascript.

<center><div id="widget" style="background:url(URL BACKGROUND) no-repeat left top; width:80;height:300px;padding: 30px 10px 0px;text-align: center;line-height: 1 ">

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width:100px; /* Main Menu Top Width */
text-align:center ; height: 30px; /* Top High Main Menu
*/
padding-top:8px; vertical-align:middle; border:2px solid #ffffff; /* Top Menu border color */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Top Fonts Main Menu */
font-weight:bold; color:#000; /* Main Menu Font Color Top */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #dedede; /* Background colors on Main Menu */ }
div.TabView div.Pages {clear:both; border:2px solid #FFFFFF; /* Main Box border color */ overflow:hidden; background-color:#FFFFFF; /* Main Box background color */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>TAJUK 1</a>

<a>TAJUK 2</a>

</div>
<div style="width:200px; height:290px; " class="Pages">
<div class="Page">
<div class="Pad">

ISI TAJUK 1

</div>
</div>
<div class="Page">
<div class="Pad">

ISI TAJUK 2

<div class="Page">
<div class="Pad">

<script type="text/javascript">
tabview_initialize('TabView');
</script>

</div></div><center/></center></div></div></div></div></form></div></center>

URL BACKGROUND : Nak letak boleh tak letak pun boleh...

BIRU : Isi perkataan / kod yang korang nakkan ..!

Thanks with Love to:

EpiloG Dunia SaYuRi.

Labels: Tutorial

<< OLDER

NEWER >>