Assalamualaikum.
Sebelum ini aku ada buat tutorial untuk buat tab menu mudah yang menggunakan aplikasi sedia ada di blogger ni sendiri.
Oleh sebab, ada rakan blogger tanya kat aku macam mana nak buat tab menu yang boleh bergerak-gerak macam yang ada kat atas tu. Jadi sekarang ambil pen dan kertas okey. Hehe.
Caranya sangat mudah dan simple.
1. Copy code di bawah ini pada note pad.
<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>
2. Kemudian pergi
dashboard > design > page element > add gadget > edit html/java script,
paste dan
save.
3. Letakkan dibawah header.
Note
1. Untuk ubah warna button, edit kod yang berwarna
biru.
2. Untuk ubah warna background, edit kod yang berwarna
merah.
3. Untuk ubah URL dan tajuk, edit kod yang berwarna
pink.
4. Untuk ubah jarak background, edit kod yang berwarna
hijau. (rujuk gambar di bawah)
klik untuk pembesaran
5. Untuk dapatkan kod warna klik sini,
HTML color code
Selamat mencuba. Kalau ada pertanyaan sila kemukakan di ruangan komen atau terus tanya kat FB aku okey.
||tutorial di adaptasi dari
Blog Tutorial Pilihan Malaysia 2010
Sekian, wassalam.