Welcome to my blog. Feel free to read my stories and etc. I rarely update this blog. Sixteen.


home. | le owner. | stuff. | affiliates. | flavors. | chatbox.

Jumaat, 8 April 2011

Tutorial - Cara pasang Jquery Slide Out Navigation di Blog Kita

pic source : mari bina blog

Selain menggunakan cara float pada bahagian tepi blog untuk button-button seperti Facebook, Twitter, Youtube dan sebagainya seperti yang boleh anda lihat pada tutorial Cara pasang Floating Button di sisi blog, terdapat satu lagi cara yang sangat menarik iaitu Slide Out Navigation untuk anda cuba kerana ia menggunakan efek Jquery yang ringan.

Untuk memasang Jquery Slide Out Navigation pd sebelah kanan blog (blogspot), hanya ikut beberapa langkah yang mudah di bawah. Untuk melihat demo yang telah di pasang pada blogspot, sila klik di sini.

1.Login Blogger Dashboard ---> Design ---> Add A Gadget ---> HTML Javascript

2.Copy dan paste kod di bawah pada content HTML/Javascript.

pic source : mari bina blog


<style>

ul#navigation1 {
position: fixed;
margin: 0px;
padding: 0px;
top: 120px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#navigation1 li {
width:100px;
border:0px;
display: block;
padding-top:1px;
padding-bottom:1px;
}

ul#navigation1 li a {
display: block;
margin-right: -2px;
width: 120px;
height: 70px; 
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation1 .rss a{
background-image: url(http://4.bp.blogspot.com/_LZtXSNcp76A/TQO8L8P3ZKI/AAAAAAAABUM/CI6VTjlEZsI/s400/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(http://1.bp.blogspot.com/_LZtXSNcp76A/TQO8LKKzUVI/AAAAAAAABT0/uDnhDlFgPuA/s400/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO8MAfFqUI/AAAAAAAABUU/z1PwLV5UWlA/s400/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO9lg8rMiI/AAAAAAAABUk/DwJNZAO8Wnc/s400/photo.png);
}
ul#navigation1 .e-mail a {
background-image: url(http://2.bp.blogspot.com/_LZtXSNcp76A/TQO9lQ5T9GI/AAAAAAAABUc/Nyk6OTOMOH8/s400/mail_edit.png);
}

</style>


<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(function() {
$('#navigation1 a').stop().animate({'marginLeft':'85px'},1000);

$('#navigation1 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'85px'},200);
}
);
});
</script> 

<ul id="navigation1">
<li class="rss"><a href="http://masukkan-nama-blog-disini.blogspot.com/atom.xml"></a></li>
<li class="facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"></a></li>
<li class="twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"></a></li>
<li class="profile"><a href="http://draft.blogger.com/profile/masukkan-ID-Profile-disini"></a></li>
<li class="e-mail"><a href="mailto:masukkan-email-disini@gmail.com"></a></li>
</ul>

P/S :

1. Untuk mengubah jarak ketinggian; sila edit angka pada kod top: 120px;


2.Untuk mengbah jarak tepi kanan jika efek terkeluar terlalu jauh, sila edit kod width: 120px;


3.Untuk memasukkan ID bagi akaun Facebook, Twitter , RSS Feed, Profile dan E mail anda, sila edit kod yang di bold dengan warna merah.
<ul id="navigation1">
<li class="rss"><a href="http://masukkan-nama-blog-disini.blogspot.com/atom.xml"></a></li>
<li class="My Facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"></a></li>
<li class="My Twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"></a></li>
<li class="My Profile"><a href="http://draft.blogger.com/profile/masukkan-ID-Profile-disini"></a></li>
<li class="My Email"><a href="mailto:masukkan-email-disini@gmail.com"><span>My E-Mail</span></a></li>
</ul>
4.Kalau nak tukar icon,korang gantikan kod yg di bold dgn warne oren....

Akhir skali, klik Save.

Sila Drag kotak Jquery Slide Out Navigation dan letakkan di bawah post jika terdapat tanda yang keluar pada efek tersebut.

Jika anda ingin mengubah icon, anda boleh dapatkan icon-icon yang menarik di Dryicons.com,Photobucket dan Glitter Graphics..........


Dah tu je..papai...

Credit : Mari Bina Blog (Nescafe ais)


BTW,yang sye boldkan wrne turqouise tu,tu utk nma,contoh klau korang x de account rss,tukar le..

Tiada ulasan: