HOSTING MURAH 2014

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

• 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/AVvXsEj8g_3osaiUPFtrRRTlq5WA882gYTDmR5h8TsaIhI7wyUTNsk_u-Pc3DarkAzoIrs3gRYWjW0ts4RcmdRzGVx-fMr8Qq8Iww_S0fN_j6J6UlrPUUrymm7XL2GM59RRpIA8dG-P-anKC_Pc/s1600/Home.png);
}
ul#navigation1 .Kreasi a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIsHsq4nHBoqCt2KgQMm4jOIZeCD3OBdJHXcI335yse8X_uMJDN0tmNUNVcuuUSt2ATfQsOqz7VM4rsAUdWFntGOfCrotygzudOVQtaUS88ZVcu8D_ytw9xsiYH2J1cYGvjNXFzZ97eAE/s1600/Kreasi.png);
}
ul#navigation1 .TipsTrik a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgowXPbZt9T2Ho_7p8aNWRFg0_84a7x1-cMnHkCTzazUutKGnF5aWtEa8hb-Z4pxSdvi3hTDD9-fIXyZYqkkqbCrYnCi3Q7w8Nfo3uV9LEEjqorhcDraCeOw1HEsIU5n0op3v9bnI1mwNI/s1600/Tips+Trik.png);
}
ul#navigation1 .Tutorial a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2WNibjCiIDSv6hRUssS2WBwg8dYW4NAS5GNooRoBdG-lLeDT2h4AORZrMVn_bvdIDu0dQmcrRkvmHvq4yESmL3Ccn3T5gE-OPZhm3-3-PlKBLYPN4SyqS3nVtU3w94JXJ44uiyz51N-8/s1600/Tutorial.png);
}
ul#navigation1 .Widget a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC_131mL7gtWZ0z9TUO18CWpGXTDaPaJyG55FXeH5M_Fn1xvI8qOHRqSlZBFVTEEK7N28mLhSZAqPSuma4xjLAkIMO0LVPKoETWcCLuJHQScnrGKTx2O0goRDR1G5Mtd-sTK_sEh9wqv8/s1600/Widget.png);
}
ul#navigation1 .Animasi a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iw5DxjJ99cAAg3IAu5PyXCcNfukIGHiXqKshd67HV802v9e775hJytZehyYiGw0JJZTSvTf6fnw2qV6K7WUaoRu_3JjWaw1WJUy1posLv0GK_7ElSgdFnMCs2DqwcRUzmr3atGHKTKM/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

• Selamat Mencoba, sukses selalu :