Tuto camana nak buat MENU BAR cumel . . :)

Selamat Petang . .  :) 


ok .   hari nie . .  dengan RAJIN dan SEMANGATnya aku untuk membuat TUTO nie disebabakan oleh permintaan Cik Madu yang COMEL loteh je . . . ^^,


ok . . . wahai Cik Madu . .  tuto nie khas untuk anda ye . . . :)


eyp . . . BACE NIAT dulu ye . . . baru la niat untuk buat tu JADI ! hahahah.  .


Dashboard > Layout > Add Gadget > HML/JavaScript 
NOTE : 
ctrl + c = copy
ctrl + v = paste
p/s : korang kena pakai keyboard k . .  sebab blog aku ni NO RIGHT CLICK !
lepas dah add gadget . . . COPY CODE kat bawah nie . . n PASTE kat tempat yang SEPATUTNYA  . .  :)

<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}
ul, li {
margin: 0; padding: 0;
}
#blob {
border-right: 1px solid #FF75C4;
border-left: 1px solid #FF75C4;
position: absolute;
top: 0;
z-index : 1;
background: #A9D0F5;
background: -moz-linear-gradient(top, #FA5858, #FA5858);
background: -webkit-gradient(linear, left top, left bottom, from(#FA5858), to(#FA5858));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}
#lava-lamp {
background: url(URL BACKGROUND) repeat;
float: left;
border: 2px solid #FA5858;
margin: 0px 0px 15px;
padding: 8px 3px 10px 0px;
}
#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}
#lava-lamp li a {
color: #000000;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0px 20px;
}
</style>
<div id="container">
<ul id="lava-lamp">
<li id="selected"><a href="URL ANDA">HOME</a></li>
<li><a href="URL ANDA">AWARD</a></li>
<li><a href="URL ANDA">TUTORIAL</a></li>
<li><a href="URL ANDA">MORE</a></li>
</ul></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>
<script type="text/javascript">
$('#lava-lamp').spasticNav();
</script>


yang warna PINK tuh . . . letak la BACKGROUND ape2 yang korang suke macam kat SINI . . 
warna MERAH pulak . . . letak URL pae yang korang nak CAMPAK kat situh . .  hahaha . . . :p
BIRU pulak .  . boley tukar ayat yang mcam korang nak  ! hauaahahaha . . .


btw . . . SELAMT MENCUBA ye . . . ^^,


Indahnya bicaramu, seindah rupamu yang menawan

WARNING : Ini Sticky Entry !

Hye. . . aku nak cakap nie . .  kalo korang dah JEJAK page BLOG aku nie . .  tolong la tinggalkan jejak dekat SHOUTBOX ke . .  tinggalkan LINK ke . . .  so senangla aku nak cari korang balik . .  jangan tinggalkan JEJAK dekat TRAFFIC je ! TAK SUKE ! . . .  ok . . . ^^,


thank you . .  

******

yng nie pulak . .  aku nk ckp ! korang kalo dah jadi FOLLOWER BLOG CIK MICHIKO . . . jangan lupe . . amek KAT BAWAH nie ye . . !

Thank you  . .  :)


Indahnya bicaramu, seindah rupamu yang menawan

Mari Warnakan Blockquote Anda !

Assalammualaikum dan salam sejahtera . . .


tadaaa. . .  dah lme aku tak buat tuto kan . .  so meh ler . .  kite bersama2 membuat tuto kita masing2 ye . .  hehehehe . . . 


korang taw ke ape kebenda tu semua ? aku lagi la blur mase mule dlu ..  hahaha . . *gedik* . . korang taw tak . .  cmae pos entry korang tu boley ade kotak color2 yang best je mate memandang . . haaa . . ape kate aku tolong share kan ape yang aku taw . . . korang pon jangan la kedekut ILMU ye ! kang aku cepuk ang ! haahahah . . 


every BLOCKQUOTE yang korang nak buat tu . .  korang kena la tekan benda alah kat bawah nie . . . itu lah beliau ! QUOTE dekat post yang korang nak buat . . . 


if korang nk tengok dengan lebih jelas . .  korang enlargekan la k . .  aku tak kesah ! hahaha . .  tpi jangan COPY ! hahaahhah . . .  buekkkkk . . .
kite mulakan ok . . . 
mule2 . . .  korang kenala . .  pergi sini ye . . 
Layout / Edit HTML / tick Expand Widget Templates
dengan menggunakan  . . 
ctrl + f 
untuk mencari code kat bawah nie ye . . . 
.post blockquote {margin:1em 20px;} 
korang gantikan code di atas itu dengan kode kat bawah nie ok . . . ^^,
lepas tu . . .  korang gunakan 
ctrl + c untuk copy . .  ctrl + v untuk paste 
.post blockquote {background: #FFCCFF;-moz-border-radius-topleft: 10px;-moz-border-radius-bottomright: 10px;padding: 6px;Border: 1px solid #000000;margin:1em 20px;} 
yang aku bold kan tuh merupakan color yang korang nak tukar sendiri ye . .  ingat ! koang pon boley ejas size border tersebut . . .  korang boleyha la change color kat SINI ! 


****

ok  . . yang tadi tu merupakan BLOCKQUOTE berkaler sahaja . .  if korang nak pakai BACKGROUND anime ke . .  ape2 je pon boley .  .

step yang same seperti di atas ! cuma . .  korang copy & paste kan code kat bawah ni taw . . 
.post blockquote {
background: url(http://i155.photobucket.com/albums/s304/bethx3kaye/Hearts.png) ;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px dashed #000000;
margin:1em 20px;
}

yang aku BOLD kan dengan COLOR BIRU tuh ! korang dapatkan la background dekat http://photobucket.com ke . .  ato pon http://www.glitter-graphics.com . .  macam2 pilihan yang ade ..  hehehe . .





selamat mencube ye ! daaaa . . . ^^, 


Indahnya bicaramu, seindah rupamu yang menawan

FACEBLOG !

Hye semua . . . .


baru2 nie . . aku ade gak dengar pasal Faceblog nie . . hihihih. . . tak sangke pulak memang wujud ye . . . memang gempak lah . .  ape taknye . .  sambutan yang hangat sekarang ini ialah Facebook + Blog = FaceBlog . .  memang best la . .  comel je aku tengok . . . pink pulak tuh . . hahah . .  aku nie berminat je dengan semua colorful color . .  janji bagi aku color tu aku suke ! hahahaha . . . 



SELAMAT DATANG DIUCAPKAN KEPADA SEMUA YANG SUDI HADIR KE THE FACEBLOG. TUJUAN FACEBLOG DIWUJUD IALAH ATAS DASAR UNTUK MENGUMPUL DAN MEMBINA SATU KOMUNITI BLOGGER KHUSUSNYA DI SELURUH MALAYSIA DAN DUNIA AMNYA. MARILAH KITA BERSATU DAN BERKERJASAMA DALAM MEMBANTU RAKAN-RAKAN BLOGGER KITA DI SELURUH MALAYSIA. SEPERTIFACEBOOK, KAMI JUGA MEMPUNYAI TUJUAN YANG SAMA IAITU MENJALINKAN HUBUNGAN YANG LEBIH ERAT ANTARA PARA BLOGGER DI SELURUH MALAYSIA SELARAS DENGAN TEMA YANG KAMI GUNAKAN IAITU SEAKAN-AKAN TEMAFACEBOOK. SERTAILAH KAMI DAN BERSAMA KITA MEMERIAHKAN DUNIA BLOG MALAYSIA.TERIMA KASIH


if korang dah bace entry aku nie . . . korang boley la daftarkan blog korang dekat Faceblog nie ye . . . hihihih . . . tapi  . . . ingat ! KLIK SINI !


Sebelum tuh :



  • *BLOG ANDA AKAN DIPANTAU UNTUK MEMASTIKAN BLOG ANDA TIDAK MENGANDUNGI UNSUR-UNSUR LUCAH,BERUNSUR PERKAUMAN DAN SEBAGAINYA.
  • *PASTIKAN ANDA TELAH MELETAKKAN BANNER DARI KAMI PADA BLOG ANDA.PIHAK KAMI AKAN MEMANTAU PERKARA TERSEBUT SEBELUM MELETAKKAN BLOG ANDA DALAM SENARAI KAMI.
  • *TERIMA KASIH ATAS KERJASAMA DARI PIHAK ANDA.
 Selamat mencube ye . . . ingat ! blog korang kena bersih taw . . hihihihhk . . . ooppssyy dizzy . . . n jangan lupe . . . must follow yer ! hehehehe


daaa . . . ^^,


Indahnya bicaramu, seindah rupamu yang menawan

Ape Bende FAVICON tu ?

WARNING . . 
ctrl + f  untuk cari code . . .
ctrl + c untuk copy . . .
ctrl + v untuk paste . . .

haaa . . . korang taw ke ? Favicon tu. . .  merupacan icon kecik yang ade dekat kite punye tab kat atas tuh . .  
senang cerita aku bagi korang contoh la ye . .  hihih . .  aku pon tak taw sngt . . tpi aku tengok la blogger2 yang hebat . . . yang pndai dlm bab2 tuto ni . .  hihih . .  so aku mule la bodek2 gak . .  hihih . . .

ni sebelum korang buat FAVICON tuh  .. 


yng ni pulak selepas korang buat . .  hasilnya ..  sngt CUTE ! hahaha . .


ok . . . nk buat . .  kita bace bismillah k . . . n niat ! muahahah  . . .

macam biase la . . . 
Dashboard > Design > Edit HTML > Tick Expand Widget Templates > Carik code ini </head>
lepas je korang jumpe kod tuh . . . paste kan code kat bwah ni kat bawah code </head> tu . . 
 <link href='Direct Link' rel='shortcut icon' type='image/x-icon'/>
 dekat 'Direct Link' tu . . . korang semua boley  la tukar dengan URL gmbar comel yang korang nak . . 


selamat mencube ye . . .


credit to : Oh Ninie . . .  tenx coz bnyk bagi info  . .


Indahnya bicaramu, seindah rupamu yang menawan

Kita Buat Menu Bar Nak ?

selamat pagi . . ..  ^^,


Menu Bar ? korang taw ke ape bende tuh ! mase aku mule2 tengok tuto ni pon . .  aku tak taw ape kebende tu . .  hihihih .  . . rupe2nye . . . bende alah macam Menu, Home, dan segala macam la korang boley buat . .  hahaha . . eceh  . . melebey lak aku ni kan ! lempang je ! hahaha . . . 


conothnye ~

tadaaa . . . . cun tka ? hahahaha . . . !  hihihi . . . kejap nampak pekat kejap nmpk kusam ! ha ? tak paham ? aku pon ! muahahahahah . . . buekkk .. .. ingat ! korang pon boley add lebih dari 3 menu bar taw ! nk buat banyk2 pon boley ! hihihih . . . jom follow me ! 

dah ! STOP making nonsense ok ! hahah . . . jom kite buat ! hihihi . . .

Dashboard > Posting > Edit Pages > Tekan New Page

wei . .  korang kene buat entry post dlu taw baru boleh buat menu bar tuh . .  ^^, contoh :
untuk TUTORIAL . . . aku buat entry post pasal tuto macam kat bawah ni . . . clear ?
tapi belom siap lagi ye ! WAIT ! haa . .  ni yang best nie . .  hihhih . . . aku nak tunjuk cmane korang buat menu bar yang cun n tak selawa aku punye ! muahahaha ...  dush !

ok. . . .  bace niat lagi . . 

Dashboard > Design > Add A Gadget > Add HTML/Javascript > Tekan Edit HTML

dah buat ? ok . . . pandai . .  lepas tu  . . korang letak code kat bawah ni ye . . 

<center><a href="URL LINK" target="_blank" title="TITLE MENU"><img border="0" src="URL IMAGE " style="opacity: 0.4; " onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a><a href="URL MENU " target="_blank" title="TAJUK MENU "><img border="0" src="URL IMAGE " style="opacity: 0.4; " onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a><a href="URL LINK " target="_blank" title="TITLE MENU "><img border="0" src="URL IMAGE " style="opacity: 0.4; " onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a></center>




"ctrl + c" untuk copy dan "ctrl + v" untuk paste dekat ruang bolat yang kat bawah ni taw ! haaaa . . . 




anda paham ? ihihihi . . .  ok . . next step . . korang kene edit perkataan yang aku bold + kaler tu ye . . . if not . .  tk menjadi la . . .  nak jadi kan ? so ikut properly ! hahaha . .


link yang boley korang jenguk !
1) http://cooltext.com/
2) http://www.glitter-graphics.com
3) http://cute-smiley.com/


dah ! jgn nak mintak lebey ! n jagnan jadi pemals ! hahahah . . . korang google la sendiri ye . .  hiih ^^,


if korang nak lebeyh dari 3 menu bar, korang boley add code kat awah ni taw ! korang repeat la brpe bnyk untuk dapatkan menu bar yang korang nak . .  k . .. 


<a href="URL MENU " target="_blank" title="TAJUK MENU "><img border="0" src="URL IMAGE " style="opacity: 0.4; " onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a>



jgn lupe untuk tukar perkataan bold + kaler tu ye . . . selamat mencube . .  ^^,


ooppssyy dizzy ! hihhiih . . .


Indahnya bicaramu, seindah rupamu yang menawan

Kita Tukar OLDER POST, HOME & NEW POST kepada new icon jom !

aku nak buat tuto ni sebab aku dah berjaya buat . ..  taw . .  hihihi . . . tk percaya ? nah . . .  aku tunjukkan bukti aw ! muahahahah . . . .

hihihi . . .  aku buat pink taw haaaa . . .  tenx to Mommy Pinky again sebab banyka tunjuk ajar kat aku . .  hihihih . .  dye juga la inspirasi aku untuk buat tuto aku tu jadi warne pink ! hahaha . . . seriously . .  dlu aku tak suke pink . .  hahaha . . . tapi skang dah suke . . . sebab aku suke combine antara PINK &amp; PURPLE ! hahaha . . . suke gila la aku . . .  ok . . . asal aku membebel nih . . . jom kite start buat . . . hihih . .  berator cepat ! hihihi . . .

mule2. . .  macam sebelum2 ni . . .  hahah . . . 
Dashboard > Layout > Edit HTML > Download Full Template[penting sebagai backup]

lepas tuh . . . korang jangan lupe TICK Expand Template Widget ntuh memudahkan anda semua ye . . . nak lagi senang . .  tekan ' ctrl + f ' dekat papan kekunci korang tu ye . .  korang cari la code yang aku bold kan dengan kaler macam2 tuh  . . hihihih . . . buat ! taw ! haaa . . .  

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
dah jumpe ? ok . . . korang tukarkan code yang bold + kaler tuh dengan code yang ade kat bawah ni ye . .
  
<img src="Image URL" />

ehhh . .  jap ! jangan lupe . .  tukar code dekat kaler MERAH  tuh dengan icon kesukaan korang semua ye . . korang boleyh pilih macam2 yang korang nak . .  asalkan kiut ! muahahahah . . 

kalo korang nak ikon menarik ! tekan CLICK atau pun CLICK sini . . . ^^,
harap korang berjaya ! if ade pape . .  jgn lupe nk tnye ! mmmuah tok korang ! hihihi . . .


Indahnya bicaramu, seindah rupamu yang menawan

No Right Click Please !

Korang annoying tak bila korang letak gmabar ke pe . . .  orang lain senang je nak copy n paste kan . . hahaha . . tapi itu bukan tujuan pertama aku ! aku cume nak kongsikan je kat korang cmane nak 'prang' kengkawan kite . .  biaw padan muke dorang . .  hihih hihihi . . . dah nme pon suke-suki an . . . so ape lagi . .  jom la kite buat hal jap kat blog kite . .  hihihi . . . 


so . . . jom kite buat VISSIBLE RIGHT CLICK ! muahahahaha . . .
tapi ingat ! korang kne pandai . . . use "ctr + c" untuk copy . . . then "ctr + v" untuk paste. . .  senang je . .  hihihi . . . nah . .  korang jangan mals . . hihihih

ingat ! baci bismillah dan niat anda dulu ye . . . insyaallah semuanya berjalan dengan lancar . .  hihihih . . 

mule2 . . .  hahahah sje nk buat suspend neh ! hihihi . .  jangan marah ye . . .  

Dashboard > Design > Edit HTML > Tick Expand Widget Templates > ctrl+f  > Cari perkataan ini : <body>


ok . . . kita mulakan dengan meng'copy' code kaat bawah ni then tukar dengan code tu ye . . . relex dulu . . .  belum habis  . .  ok . . . . bnyk lagi . . .   hahaha . . 


 <body oncontextmenu="return false;">


haaaaa . . .  if dah ok . . .  korang PREVIEW ye sayang ~ . . .   hihihih . . . if tiada ERROR didapati . . . korang terus la SAVE TEPMLATE ye . . . click je kat bulatan kuning tu hah . . . hihihi . .  wekk


halooo . . . kalo korang nak AYAT HEBAT & POWER . . .  korang buat ni pulak ye . .  hihihih . . . senang je . .  nih . .  ok   . . korang ikot je mcm kat bwh ni . . 


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

pastuh . . . korang paste 'ctrl + v' ok . . .  


<script language='JavaScript'>

<!--

//Disable right mouse click Script

//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message="No Right-Click!";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>




jap ! korang jangan lupe ! tukar tulisan yang kaler merah tu dengan perkataan yang korang nak ye. . . aku bagi la contoh ciket . . .

1. Sorry, NO more RIGHT click !
2. Excuse me ! ape ko buat tuh !
3. Jangan Curi ye . .  buek...

hihihih . . . itu contoh je ye . ..  kalo korang nak buat yang lagi GEMPAK hihihihih . .  kasi orang sakit hati je . . . muahahahah . . . jaht an ! hihih . . .

ooopsssyyy dizzy ! ^^,






Indahnya bicaramu, seindah rupamu yang menawan

Jom Buat Menu Bar

Akhirnya . .  aku berjaya membuat 'menu bar' yang aku idamkan selama ini. . .  hahaha . .  makin bijak aku ye ! muahahahaha . .  tenx to CIk Oh Ninie . . .  korang boleyh la tengok dye punye tuto ! aku pon tengah godek2 aku punye blog ni . .  hihihi . .  korang selamat mencube ye  ! tenx again to u dear . . .  i adore u la . .  

cute an budaknye . .  hihihih . .  comel molek je . .  bijak pulak tuh . .  huahahaha . .  kenape la anda bijak snagt ! kongsi la siket ye . .  hihihih . .  nak kene terjang je aku ni an . .  ihhihi . .  tapi tk pe . .  aku akan berkorban apa sahaja demi membuatkan blog aku ni makin cun melecun ! hhahaha . .  korang jangan jeles oukeyh ! if korang nak kene usehe dengan gigih ! tak gitu ! hihihiih . . . 


ooppsssyyy dizzy ! 


credit to : Oh Ninie


Indahnya bicaramu, seindah rupamu yang menawan

Jom Edit Blog Tutorial !

~Secara tidak langsung . .  korang boley la copy n paste bende kat bawah nie . . .  tapi ingat ! credit to me ok dear fellow !

~kepada pemilik owner yang sye paste n copy secare langsung atau tidak langsung . .  maafkan sye k. . sye cume nak kongsi kan ilmu yna gberguna . .  TUNJUK AJARKU SIFU ! ^^, btw . .  TQ ~


Tutorial



Indahnya bicaramu, seindah rupamu yang menawan