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 kawan dekatkan, dan akan kembali sembunyi bila mouse kawan pindahkan] yang saya beri Nama Menu Navbar Auto Hidden disisi kanan :z;
Cara membuatnya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Tata Letak - Tambah Gadget
- Pilih tanda [+] pada HTML / JavaScript
- Copas kode 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: 40px;border:0px;display: block;padding:1px;}
ul#navigation1 li a {display: block;width: 150px;height: 30px;padding: 5px 10px 0 20px;margin-top: 10px;color: #F00;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:1px solid #ccc;-moz-border-radius:100px;-html-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/AVvXsEgwmV1e0nrZK6n486H3W3s7hqH6leoTs9h8FQE1muC6wLq0kGTEcSYP3JDtoZbUOFjM4mkqkpW210ROOLY8zjPo3gX2CGxxqgozl3-R3ytSDkkKx58MLRiWcOG55QpWRA3NaaB5cpCGAGIM/s1600/Home.png);}
ul#navigation1 .Daftar-isi a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_S6QBZp2D9sGcBNN-byjEzjjlhLMhSqB1EXorqhH0E-ELsa8YP0avuRz0XiOZwUKd7IOo2QP5Nk2mYZs3mGiiYKIq5A6N1xQG1DWPihtzEZWj0vnnd00e0bPVpVVB8mdWtMwQtP3bkfua/s1600/Daftar+Isi.png);}
ul#navigation1 .Hubungi-saya a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1sazJDHV6bumRCm12JGiyejKA4qgbQvOwSNOPswPPzPscahR6-PLQJZO7fJBzcV9Cim5qOGaQjdqp6o9NWz75Gisrte9nmQPRC8TyA2VAE8sRM39R7RzkM8r8f56XVRzJbbcNSYNDq9gY/s1600/Hubungi+saya.png);}
ul#navigation1 .Template a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXI0XqbAqHRDfGQtZmpRp-oLyyAAJSqUMo6kUxK_nwNSwe7GMD2YHQM_S8BkikdQxsiKeIi4ZoJXNWIOTpux_Hen_68SxqdbKMbV1xY1MQ_qpjwRuNfv6slx-J-Bo7nOb77pCFDI8cAV1v/s1600/Template.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="Daftar-isi"><a href="http://blogbego-creation.blogspot.com/2012/01/site-map-blogbego-creation.html" target="_blank" title="Daftar Isi BlogBego Creation">DAFTAR ISI</a></li>
<li class="Hubungi-saya"><a href="http://blogbego-creation.blogspot.com/2012/01/contact-us.html#.UsQxJdJdVQo" target="_blank" title="Cara menghubungi saya">CONTACT US</a></li>
<li class="Template"><a href="http://blogbego-creation.blogspot.com/search?q=template+blogger" target="_blank" title="Template Gratis untuk kawan">TEMPLATE</a></li>
</ul>
- Teks yang saya beri warna biru [top:150px] posisi Navbar dari atas
- Silahkan kawan ganti teks yang berwarna merah dengan Link kawan
- Teks yang saya beri warna violet adalah Jquery, seandainya pada Template kawan sudah ada bisa dihilangkan [ biasanya berada dibawah ]]></b:skin> ]
- Silahkan ganti Nama Navbar yang saya beri huruf tebal atau kawan bisa menambahkan dengan Menu yang lain sesuai kebutuhan
- Simpan Blog kawan
pasang di atas </head
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
hasilnya
