Wednesday, January 26, 2011

cara-cara nak letak menu bar di blogger

Salam u all.. sepanjang cuit ni saya sibuk sikit dengan peperiksaan,,oke lah hari ni saya nak tunjukkan cara nak buat menu bar diblogger dari permintaan seorang rakan..mcm yang anda lihat di gambar diatas adalah contoh menu bar yang akan saya terangkan..tutorial ini amat mudah..

1,buka akuan blogger anda,

2,pergi ke add a gadjet(pastikan kord yang saya ber diletak dibawah header)/html java script.

3,salin semua kord dibawah.

<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: 5px 10px 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://aerol-rianbow.blogspot.com/">Home</a></li>
<li><a href="http://twitter.com/how_to_be_famou">Twitter</a></li>
<li><a href="http://tip-tipberguna.blogspot.com/">Blogger Tip Menarik</a></li>
<li><a href="http://www.myspace.com/aerol-plane">myspace</a></li>
<li><a href="http://penjualanemailspider.blogspot.com/">software terbaik dunia</a></li>
<li><a href="http://www.facebook.com/profile.php?id=1329582786">Find to Facebook</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>





4.pergi ke add a gadjet/html script dan paste kord di bawah header..

Peringatan........ tulisan yang bewarna biru tu korang gantikan dengan url korang dan yang warna merah tu korang letak ape yang korang nak paparkan di menu bar nanti... pastikan url korang bersesuian dengan perkataan yang korang letak contoh 'find me on facebook,pastikan korang letak url facebook korang di perkataan find me on facebook itu tadi'...
selain tu korang boleh adjust warna dan saiz menu bar korang..
okeh..
kalau anda tak faham,sila beri respon..saya akan bantu.
.

2 comments:

  1. SYA XPHM LA MCM MANA NK BUAT MENU BAR DI BLOG...HEHE...BOLEH JELASKAN LBEH LNJUT??=)

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...