Jom Keep In Touch ..

Wednesday, February 2, 2011

Ruangan OTAJ : Navigation Menu / Menu Bar

ape itu ruangan OTAJ?? ruangan OTAJ itu adelah salah satu daripada seringan yang ada dalam blog aku nie...yelah kalu potpek pasal diri sendiri je, boring la orang nak baca...
so, OTAJ itu bermaksud.. "Orang Tanya,Aku Jawab (OTAJ)"..
so sebab dah ramai sangat orang tanye.. 
(eh amy, macam mana nak buat menu bar yang macam kat blog ko tu? eh amy, yang header kt blog ko tu punye navigation menu macam mana nak buat eh??)

jadi dengan ini lahirlah karangan pertama aku untuk membuat tutorial ini.. Nahh kalian yang setia sebagai readers/stalkers/followers akan ku ajari kalian... terima kasih daun keladi yerh.

sebenarnya sesetengah template dah lama pun ade menu bar tu sendiri.. cume perlu edit tentang link die..tu yang jadi macam aku punye.. aq letak 
"home.about me.myspace.facebook.formspring.video" sebagai menu.. 
tapi ade jugak sesetengah templates yang lain masih mengekalkan design yang lama so xdek la menu bar tu..
oleh itu, ikuti lah langkah tarian ku ini..hwa3

Langkah-langkah

1. Login ke menu blogger. Klik Design ->Page Elements

2. klik Add a Gadget kemudian pilih 
HTML/JavaScript

3. Salin dan paste kod di bawah pada HTML/Javascript tersebut.

<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}

ul, li {
margin: 0; padding: 0;
}

#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-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: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 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: #DDDCD8;
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="http://link-di-sini.blogspot.com">Home</a></li>
<li><a href="http://link-di-sini.blogspot.com">About</a></li>
<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>
<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>
<li><a href="http://link-di-sini.blogspot.com">Contact</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>




catatan tambahan ; 


1.Untuk mengubah warna button, edit kod yang di bold berikut.


background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));

2.Untuk mengubah warna background, edit kod yang di bold berikut.

background: #32312E;

3.Untuk mengubah URL dan Title, edit kod yang di bold berikut.


<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>

<li><a href="http://link-di-sini.blogspot.com">About</a></li>

<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>

<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>

<li><a href="http://link-di-sini.blogspot.com">Contact</a></li&gt

3.Untuk mengubah jarak background (rujuk gambar di bawah), edit kod yang di bold berikut.

padding: 8px 430px 10px 0px;;

4. kalau dah paste kan, save dan view.. kalau okeyh..takpayah la buat ape-ape.. kalau x sesuai.. korang edit balik ikut kesesuaian blog masing-masing...

5. kat mana nak tukar kod warna eh?  yerh sila lah pilih sendiri n klik Kod Warna.


6. Kalau malas/ x tau sangat, biar jelah macam tu.. hwa3 n please leave a feedback.. bukan ape.. cuma nak tau membantu atau tidak post kali ini..;p
p/s : selamat mencuba...

4 orang membebel kat entry ni:

Liyana Deli said...

amy
aku adew 1 soalan
cmne ngn nuffnang 2?
ape function dye?
pas2 cmne nk letak kat blog
harap ko sudi jawab
hehe

aMy SiDeK said...

@LiyanaDelioh yang itu ke? boleh saje...
next entry nanti aku jawab yerh...;p

Liyana Deli said...

ok
terima kasih CIKGU AMY
;p

aMy SiDeK said...

@LiyanaDeli jangan la panggil saya cikgu..malu laa..saya hanya membantu ape yang saya tahu..;p

Post a Comment

thanks sudi komen,
i will try my best to hit u back..>_<