Navbar Auto-Hidden disisi kanan

Kastaone - Minggu, 19 Agustus 2012 - 07:00 wita
Sebelumnya saya membahas tentang Cara Membuat Navbar Menu Bertingkat, sekarang  kembali saya akan membahas Menu Navigasi yang pada umumnya Navbar berada diatas atau dibawah Header Blog, tapi    yang ini letaknya di sisi kanan Blog dengan variasi Auto Hidden :y; [akan keluar kalau mouse komputer kawan dekatkan, dan akan kembali sembunyi bila mouse kawan pindahkan] yang saya beri Nama Menu Navigasi Auto Hiden :z;

Screen shot

Setelah kawan melihat dan mencoba Demonya, mari kita lanjutkan ke Cara membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML/JavaScript atau bisa digabung dengan Gadget yang ada :w;
  • Copas Script berikut kedalamnya

<style>
ul#navigation1 {
position: fixed;
margin: 0px;
padding: 0px;
top: 150px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#navigation1 li {
width: 42px;
border:0px;
display: block;
padding:1px;
}
ul#navigation1 li a {
display: block;
width: 150px;
height: 42px;
padding: 20px 5px 0 20px;
margin-top: -20px;
color: #FFF;
text-align: center;
font-family:"Tahoma", Verdana;
font-size:16px;
font-weight:bold;
background-color:transparent;
background-repeat:no-repeat;
background-position:left center;
border:0px solid #F00;-moz-border-radius:100px;-khtml-border-radius: 100px;-webkit-border-radius: 100px;
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation1 .Home a {
background-image: url(http://2.bp.blogspot.com/-jEnaOCXD030/UC89WVqJCkI/AAAAAAAAEDU/LG5Jr5NHRq8/s1600/Home.png);
}
ul#navigation1 .Kreasi a {
background-image: url(http://4.bp.blogspot.com/-21Gsi16JYYY/UC89adFmEWI/AAAAAAAAEDc/9GcIajitFOI/s1600/Kreasi.png);
}
ul#navigation1 .TipsTrik a {
background-image: url(http://2.bp.blogspot.com/-SSMAfdEh0g0/UC89fIm6dBI/AAAAAAAAEDs/PVphrlnZ4xQ/s1600/Tips+Trik.png);
}
ul#navigation1 .Tutorial a {
background-image: url(http://3.bp.blogspot.com/-StarlN8Io4M/UC89iL3IYeI/AAAAAAAAED0/q2L7SYOUsVQ/s1600/Tutorial.png);
}
ul#navigation1 .Widget a {
background-image: url(http://3.bp.blogspot.com/-0Hdv3f0Ands/UC8-qmWL6CI/AAAAAAAAEEE/kR9ODBMAkQg/s1600/Widget.png);
}
ul#navigation1 .Animasi a {
background-image: url(http://3.bp.blogspot.com/-Fe1Bttf5Ze0/UC89c6D-7DI/AAAAAAAAEDk/ed4gwWdD2Hs/s1600/Navbar.png);
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation1 a').stop().animate({'marginLeft':'5px'},1000);
$('#navigation1 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-112px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'5px'},200);
}
);
});
</script>
<ul id="navigation1">
<li class="Home"><a href="http://blogbego-creation.blogspot.com/" target="_blank" title="Kembali ke Halaman Depan">BERANDA</a></li>
<li class="Kreasi"><a href="http://blogbego-creation.blogspot.com/search/label/kreasi" target="_blank" title="Artikel dengan Katagori Kreasi">KREASI</a></li>
<li class="TipsTrik"><a href="http://blogbego-creation.blogspot.com/search/label/tips%20trik" target="_blank" title="Artikel dengan Katagori Tips Trik ">TIPS TRIK</a></li>
<li class="Tutorial"><a href="http://blogbego-creation.blogspot.com/search/label/tutorial" target="_blank" title="Artikel dengan Katagori Tutorial">TUTORIAL</a></li>
<li class="Widget"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Widget">WIDGET</a></li>
<li class="Animasi"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Animasi">ANIMASI</a></li>
</ul>
  • Teks yang berwarna merah adalah Image Navbar, silahkan ganti yang sesuai dengan tampilan, 
  • Teks yang berwarna Violet adalah URL saya silahkan ganti dengan URL Blog kawan begitu juga dengan Judulnya 
  • sedangkan untuk Target="_blank" title=".................." silahkan diganti juga dan bisa dihilangkan
Contoh Image Navbar

    • Selamat Mencoba, sukses selalu :



    Berbagi Artikel :

    Navbar Auto-Hidden disisi kanan
    Rate this posting:
    {[["☆","★"]]}

    Kalau pada Artikel Navbar Auto-Hidden disisi kanan
    kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
    mudah-mudahan saya bisa segera memperbaiki
    ---ooOOOoo---
    P.pw - Shorten urls and earn money!

    Artikel Menarik Lainnya

    About me


    Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

    Tidak ada komentar

    BERIKAN KOMENTAR SESUAI TOPIK
    DENGAN BAHASA YANG SOPAN,
    JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

    Klik Emoticon untuk melihat Kodenya

    Dapatkan Update Terbaru
    BlogBego Creation di Email Kawan





    BANNER [300x250]
    © 2013 - BLOGBEGO CREATION | Powered by Blogger
    Design Template by : Blogger Edan