Cara pasang Jquery Slide Out Navigation di blogspot


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 pada 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.

Langkah 1

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

langkah 2

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

<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>

Akhir sekali, 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

{ 27 comments.. read them below or add one }

Liyana Lunia. Liyana Lunia. 11:04 AM
harapan la aku nak pakai jquery ke java ke :(
Pensel Kontot Pensel Kontot 4:51 PM
menarik..nanti saya cuba ye
bardboo bardboo 9:50 PM
menarik..nnt nak try wat gak..
mie mie 1:02 AM
menarik ni..
nak kena cuba..
Anwar Naim Anwar Naim 7:15 AM
Dryicons.com tu silap tarok link tu..
nora nora 1:51 PM
datang melawat sifu =)
Nescafe ais Nescafe ais 2:32 PM
@Anwar NaimTerima kasih bro. Link dan di betulkan.kehkeh
Thalhah Amir Thalhah Amir 8:17 PM
singgah blog nescafe jap. cari shoutbox xjumpa. :D
Nescafe ais Nescafe ais 11:25 PM
@Thalhah AmirShoutbox dia kadang-kadang ada kadang-kadang tak ada. Tapi selalunya tak ada.kehkeh.

Tq sebab sudi singgah bro.
HASS'S COLLECTION HASS'S COLLECTION 12:10 AM
npe label utk navigation ni xde erk? cth nye facebook, profile etc just kuar icon je.. xsma pun cm awk nye...
Nescafe ais Nescafe ais 12:14 AM
@HASS'S COLLECTIONBenda ni untuk pasang kat tepi. Kalau nak ada tulisan, kena tukar background image. Kalau nak buat tulisan melintang, kena tambang koding kat css tu. Nak menambah kod yang leceh sikit tu.kehkeh
Takuimi Takuimi 7:11 AM
Macam mana nak letak die kat atas?
Fakhri Norman Fakhri Norman 5:09 PM
kalau nak letak dia kat atas mcm mne??
Hyda Hyda 8:13 PM
thanks..sharing is caring
ms_sykin89 ms_sykin89 6:06 PM
salam, saya nk tukar ke kiri la..macam mane eyk?
eyya eyya 1:23 AM
ade tak image formspring utk floating button ? kalo ade plzz hantar kt my shout box okey .

thnx
eyyahazel.blogspot.com
Shafiq Rosli Shafiq Rosli 3:42 PM
ade yg utk ltk sblh kiri x?
*cimOt* *cimOt* 3:11 PM
tak reti nak tukar icon cner...
redzuan redzuan 3:03 AM
@Nescafe ais

so mknanya xboleh la bro . bro mcm mne nak pasang auto read more kat blog. entri sy smua pnjang berjela..
Nescafe ais Nescafe ais 11:20 AM
@redzuanGuna readmore yang blogger punya pun boleh juga. Ramai yang tak minat guna auto readmore
BUDAK BARU BELAJAR BUDAK BARU BELAJAR 3:34 PM
This comment has been removed by the author.
Almazt Almazt 10:55 PM
Bagus nih. Tapi kalo pengen ada dikiri gimana ya ? Masih newbi nih gan. Tolong donk :)
aisyaazman aisyaazman 6:07 PM
Salaam,

Thanks sebab buat tutorial ni! Memang menjadi.

Tapi kan, macam mana nak tukar dia sebelah kiri? dah puas tweak sana sini.

:)
A.13 A.13 8:30 PM
yeah!! Awesome!! At last berjaya jugak!! X)