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..
11 ulasan:
yeahhh ~ smart !
mcm mne klau nk ubah size die n warna?? ubah kod yg mne??
Boleh tanya? Macam mana nak center kan menu bar itu?
center?
okeh...
tambah code nh kat code html yang saya beri diatass.
<center>masukkan code yang saya beridiatas</center>
terbaik la. aku nak try
waa...mohon share info dari sini..boleh??nanti saya tag nama kamu sekali...
nice blog! :D
terbaik plus stylo! huhu
nak tanya kit...regarding nak bg center kan menu bar tuh, msukn kod center tuh tp nak selit kat ne (sy bru lgi dlm bege membege blog ni..tq)
kalau nk bga center .. ..awk perlu copy code saya bagi ni
<center>PASTE CODE MENU YG SAYA BAGI KAT ATAS DITENGAH INI</center>
wah~! tengs 4 the tutorial~! try yer!
hajar latif:
buat lah,kalau apa2 hal inform kt inbox fb yea
Catat Ulasan