Mas Sehat | Blog Tentang Kesehatan | Mas Sehat ~ Blog Tentang Kesehatan | www.mas-sehat.com

Cara Memasang Slide Out Navigation Floating diatas Blog

Najibblog, Oke setelah Offline beberapa waktu, kali ini saya akan Posting memasang Slide Out Navigation Floating diatas blog, langsung saja saya terangkan cara membuat Slide Out Navigation Floating diatas blog seperti yang  sobat lihat pada blog ini, Ikuti langkah langkah seperti di bawah :




Langkah 1

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

langkah 2

Copy dan paste kode di bawah pada content HTML/Javascript.
<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>
Catatan:

1.Untuk mengubah warna background, edit kode background-color:#E7F2F9; sesuai keinginan.

2. Untuk mengubah warna tulisan, edit kode color:#60ACD8; sesuai keinginan.

3. Untuk memasukkan ID bagi akaun Facebook, Twitter , RSS Feed, Profile dan E mail anda, edit kode yang di bold dan berwarna hijau sesuai dengan kepunyaan anda.

Jangan lupa Klik Save.... dan jangan lupa koment yach.hehe.......
Disclaimer:
Terima kasih telah membaca artikel tentang Cara Memasang Slide Out Navigation Floating diatas Blog di blog Najibblog2010 , semua yang ada diblog ini hanyalah sebagai informasi semata, pemilik blog tidak berniat untuk merugikan pihak manapun, pemilik blog merekomensasikan dan mengharuskan para pengunjung blog ini untuk membeli progam atau game full version kepada pemilik software untuk mendapatkan software versi full version dan bukan hasil patch atau crack atau istilah yang sejenis lainnya. Pemilik blog menghargai hak cipta pemilik software atau hak cipta, pemilik blog akan menghapus postingan jika Anda merasa dirugikan akan postingan yang ada di blog ini sebagai pemilik software atau hak cipta. Silahkan mengirim email ke najibsangar@gmail.com untuk menghubungi pemilik blog. Pemilik blog akan merespon Anda secepat mungkin. Jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Mas Sehat | Blog Tentang Kesehatan | Mas Sehat ~ Blog Tentang Kesehatan | www.mas-sehat.com

42 komentar

pertamaxxxx.....
sip mas najib, patut dicoba

Balas

Waduh udah lama banget aku gak kesini hhe... apa kbr Sob?

Hem... Pake CSS3 nie rupanya hhe... klo ditambah Box shadow lebih ajib nie Sob... hhe... coba slide outnya bisa dibikin tanpa Jquery bener2 mantabz nie pasti :P

Tapi klo boleh tau knp langsung diarahin ke Widget semua Sob? biar gampang ya hhe.. :P

Semangat Terus N happy blogging :P

Balas

keren juga, tapi takut malah ngeberatin blog :(

Balas

kalo kita mau memasukkan blogroll gimana di navigasi itu?

Balas

Terima kasih tutorialnya. bagus ya. tetap berada di atas meskipun poniter digeser ke sana kemari.

Salam ukhuwah

Balas

@Megi Rahman

Kalo gitu tak usah dicoba juga gak papa kok sob.........hehe...

Balas

@TUKANG CoLoNG

kalo itu sih bisa sob, tp cuma linknya aja........kalo discroll mungkin gk bs.......hehe........

Thanks for comment...

Balas

@BeDa

Oke sob..salam ukhuwah juga...semoga bermanfaat..........

Balas

Blognya Keren, Gmna Gan Caranya Bisa Bikin Blog Sekeren ini, Aku mau donk diajarin, Tampilan Blog Ku Jelek Nih Reviewin donk gan http://hpcartridgerefills.com Tolong ya Agan Master...

Salam Kenal,

Novie

Balas

Thank infonya,... saya mau coba pasang moga aja berhasil..............

Balas

wahh keren sob, dari kemaren2 nyari yg beginian akhir nya ketemu juga thanks sob ..?

Balas

salam kenal .
makasih buat infonya .
thanks for share .

Balas

salam kenal .
makasih buat infonya .
keren .

Balas

salam blogger :)
follow back yah.
makassih

Balas

salam kenal .
nice post .
thanks for share .
be success .

Balas

kalau pingin berada di sebelah kanan gimana sob???

Balas

thanks atas tipsnya sudah saya coba, tapi agak berat maklum hanya pake modem usb

Balas

maksih ea !
blog qu jadi tambah okke ..

Balas

gan ko nangkring gitu, klo biar nyumpet kaya ente gmna gan?

Balas

keren abiz bang najib.... tengkyu abiz juga :D

Balas

semoga sukses dgn kontesnya Gan, kontes yg ini ataupun kontes2 yg ber

Balas

keren.... master css nih, klo ditaroh di kiri ato dikanan gmn yahh?

salam kenal, masih nubie nih

Balas

caranya biar bisa disembunyikan kayak diatas gimana min ??

Balas

mas saya mau tanya, gimana caranya bikin halaman yang bisa menampung banyak postingan seperti blog ini. mohon bimbingannya...!

ini blog saya http://i3-info.blogspot.com

Balas