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/AVvXsEjT1cGWXZ2bpNmbL2PO_qWdUtku1PhNI8-DQ3tu9cVs-RIA7Ct2X46X7ccyIrEXw3AQdVgXHVCOHKN0L6MVbgGVvKdmsFcTayb_7MvtTap6pkifGEBgByzLKhvQcaxol96SyH4YuwXeyWEH/s1600/Home.png);}
ul#navigation1 .Daftar-isi a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkju2GGJcBCpb6MkpxAxoeu3udsmSrC4iSO045Uiw1j4wFoNNXJive_Fe7gUDoT6WMkkRTX_oQYJaiP-TLIbPmboUBWhfZI4rstZHxUQFDn2YJWREshYYBHpA8ZpKnneqNQNzAwiLs2XMT/s1600/Daftar+Isi.png);}
ul#navigation1 .Hubungi-saya a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHmzalyNYTIJyed4-ykUThyUiuawoSHZv4zEf_ZZ4RolmSKw2E_3rvpvVHgUGCQI7_mEs1YcTj4sN1f1K6C79Su0HxZuHu6KVXBPBz6BP-s8CprdAMGsjEbAQmhqbabhyphenhyphenVtBN_eCsnLt0N/s1600/Hubungi+saya.png);}
ul#navigation1 .Template a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuFovOdkyPNEbuF9EJsvYJyRNwYZzhD9pj_Vf_azfN4NloKqoPvooowkVCp_tjMJBk_Da78LtJNQj4i5Fu0dXeyBr8gpgymo4lwX-LVvY_82mi9FTXdMIuFmJE1atuIqlird84ORjJNFs5/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
Social Plugin