Memasang Slide out navigation floating di atas header

Untuk memasang Slide Out Navigation floating pada sebelah atas blog seperti yang anda lihat pada blog ini, hanya ikut beberapa langkah yang mudah di bawah.




Langkah 1

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

langkah 2

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

Spoiler:

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(http://4.bp.blogspot.com/_LZtXSNcp76A/TQO8L8P3ZKI/AAAAAAAABUM/CI6VTjlEZsI/s400/rss.png);
}
ul#navigation .facebook a {
background-image: url(http://1.bp.blogspot.com/_LZtXSNcp76A/TQO8LKKzUVI/AAAAAAAABT0/uDnhDlFgPuA/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO8MAfFqUI/AAAAAAAABUU/z1PwLV5UWlA/s400/twitter.png);
}
ul#navigation .about-me a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO9lg8rMiI/AAAAAAAABUk/DwJNZAO8Wnc/s400/photo.png);
}
ul#navigation .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() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

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

<ul id="navigation">
<li class="rss"><a href="http://nama-blog-anda.blogspot.com/atom.xml"><span>RSS Feed</span></a></li>
<li class="facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"><span>My Facebook</span></a></li>
<li class="twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"><span>My Twitter</span></a></li>
<li class="about-me"><a href="http://draft.blogger.com/profile/masukkan-ID-Blogger-disini"><span>My Profile</span></a></li>
<li class="e-mail"><a href="mailto:masukkan-email-disini@gmail.com"><span>My E-Mail</span></a></li>
</ul>




1.Untuk mengubah warna background, sila edit kod background-color:#E7F2F9;

2. Untuk mengubah warna tulisan, sila edit kod color:#60ACD8;

3. Untuk memasukkan ID bagi akaun Facebook, Twitter , RSS Feed, Profile dan E mail anda, sila edit kod yang di bold dengan warna merah.

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



11 komentar:

fahmee mengatakan...

BAGUUUUUUUUUUUUUUUUUUUUUS

Bisnis Newbie mengatakan...

Trik BACKLINK LEBIH SIMPEL, OTOMATIS, GRATIS, TANPA KONFIRMASI, SEKALI KLIK LANGSUNG TERPASANG....!!! Perhatikan contoh berikut :

1. Coba anda klik link berikut, BACKLINK GRATIS
2. Maka link Blog yang sedang anda kunjungi ini langsung terpasang di blog " BISNIS NEWBIE " secara otomatis!

Anda menginginkan juga Backlink otomatis seperti tadi...?? ikuti langkah2nya, klik SEO Newbie

pulsa-24 mengatakan...

Permisi...salam kenal ya..

disini ada trik supaya loading blogspot jadi super cepat ngga ?

Terima kasih sebelumnya..

Stop Dreaming. Start Action mengatakan...

@pulsa-24
salam kenal juga
ini gan cara meringankan blogg

http://bloggersejutaumat.blogspot.com/2011/01/cara-meringankan-blog-dengan-jquery.html

Rully varadita mengatakan...

ijin copas gan......

Stop Dreaming. Start Action mengatakan...

@Rully Silahkan gan... tp di link ya sumbernya.. :)

ppob mengatakan...

ijin copast juga gan . .

taufik zain mengatakan...

gmna caranya mempbuat blog yang bagus dari awal

johan mengatakan...

thanks tipsnya, gimana bikin berat apa g?

iwan mengatakan...

Kutil Di Bibir Kemaluan | Kutil Di daerah kemaluan | obat alami kutil di kemaluan | obat kutil di kemaluan wanita

iwan mengatakan...

Obat Sipilis Parah l Penyebab Sipilis l Obat Sipilis Alami l Obat Sipilis manjur l Obat Sipilis herbal l Obat Sipilis resep dokter l nama obat untuk penyakit sipilis l Obat Sipilis l Obat Sipilis yang ampuh l Obat Sipilis tradidional

Related Posts Plugin for WordPress, Blogger...