Assalamualaikum semue…….
Arinie aku nak berkongsi gan korang semua camne nak wat gadjet slide out Navigation mcam aku punye tue (yang kat tepi belah kiri tue). Tutorial nie aku ambik dari internet tpi die dalam bahase inggeris n payah kot nak paham kalo yang baru2 nak blajo tentang bloging2 nie. Tpi kalo korang nak tengok, leh lah korang tengok kat SINI. So arinie aku nak ajo gan korang secara simple. Iaitu ikut beberapa langkah yang mudah di bawah nie…
Langkah 1
Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 200px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .aboutme a {
background-image: url(url pic korang);
}
ul#navigation .facebook a {
background-image: url(url pic korang);
}
ul#navigation .twitter a {
background-image: url(url pic korang);
}
ul#navigation .myemail a {
background-image: url(url pic korang);
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
<ul id="navigation">
<li class="aboutme"><a href="http://draft.blogger.com/profile/ID Blogger"><span>About Me</span></a></li>
<li class="facebook"><a href="http://www.facebook.com/profile.php?ID Facebook "><span>Facebook</span></a></li>
<li class="twitter"><a href="http://twitter.com/#!/ID Twitter"><span>Twitter</span></a></li>
<li class="myemail"><a href="mailto:Alamat Email"><span>My Email</span></a></li>
</ul>
p/s:
1. Kalo korang nak nampak petak tue ber`shadow’. Bolehlah korang tambah kod kat bawah nie kat selepas kod -khtml- border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
2. Untuk ubah colour background, sila edit kod background- color:#CFCFCF;
3. Untuk ubah tahap ke`trasparent’, sila edit opacity : 0.6;
4. Masuk ID bagi akaun Facebook, Twitter ,, Profile dan E mail anda di tempat yang telah disediakan.
5. Jika korang nak tambah kotak, korang kne tambah lagi kod
Ul #navigation .facebook a {
Ba ckground-image: url(url pic korang);
}
Dan kod
<u l id="navigation">
<li cl ass="title ape korang nak letak"><a href="link yang hendak diletak"><span>About Me</span></a></li>
