Navbar Auto-Hidden disisi kanan

Screen shot

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;

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDpLqLBB2vZvgTlztslVbXNQ_YLX1gSm1PQ0TGsSM7HXDtU976KvyhNDQTsmilmpL5C_jORWPMmHDj5yUWPeiBUT4NkcnLcN67ROyp_tNBd-jiJ66_i7t91ErlenaGm3p2LomTQaOKK6A/s1600/Home.png); } ul#navigation1 .Kreasi a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrglO5SPJycp1eMlad_ClR3aJUf1WLm4S8mBAgAGb9rYx9VP1jER2P-eatkRGs76cdskcRAXMLlyddEeMH_is0B8hp_rOOf1MS7mApYgAuFDnDoPD3MAkv_QI53yESwtXXFIJguN2qR0/s1600/Kreasi.png); } ul#navigation1 .TipsTrik a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipc6LrULCySu064XlHWcD0N87JmyuELI7vAbxaKrGxJtnDG4N8XmnfYgwAuOEZjmxdxmoI8uGyoCYalScQdcCGrO4uV_f-xYO-PBqAbf93myYPupug2fBe-n0s8hvce2JhhCf9cuRbdws/s1600/Tips+Trik.png); } ul#navigation1 .Tutorial a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9CltV9Ol_GLOJjH22WQvq5gVhKTa1KT62S-9Y-0kI59r6CMHAoAQuGDR9-SnNCKV68nDkN59H1EBkcaggQ5iV2Rf8Yp83RWFIWJtpY1ZY-dO57ydn2FygoSH5S74HBUT5u3W8OQyJxHE/s1600/Tutorial.png); } ul#navigation1 .Widget a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyloyMZ9Y1KV7R33L7RfbZjmt-mOr7bMcGWPGz1u0F_9qh5tt65jyLv-ScbyjArCOLAspY5tQS76mU28sV-xmJDOIEaEGoRS1cC818DRGRkxhzfWaZ2AR-uEg4LsZjVmfa1lAmEdpjZdw/s1600/Widget.png); } ul#navigation1 .Animasi a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCC0-7mEKKAwH3pC4VBemFTERTlec2blxRZYFZWrb9EBjeDqoXs7MbFpM7NzrZ4Zhke-i5GMJ_6rcP_qLniQpIujm_XC60ud1qvVhdoxufyN1XgbD_xZ_b1397SkArsbyUfFj7SIhgRr8/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 :