Yeah! Sobat, Kali ini saya mau berbagi Tips Blog.Sebelumnya saya sudah membahas tentang
Membuat Widget Sosial Media Dengan Efek Sticky.Kali ini tentang Menu Navigasi.Selain Membuat style template menjadi keren.Menu Navigasi juga membuat pengunjung lebih gampang menjelajahi blog kita.Nah, Langung ke TKP aja.Jika anda penasaran melihat demonya ? silahkan lihat di blog ini.
CSS
/* Top Menu
----------------------------------------------- */
#top-menuwrapper {
background-color: #fff;
box-shadow: inset 0 -1px 0 rgba(163, 163, 163, 0.8), 0 1px 3px rgba(163, 163, 163, 0.4);
height: 70px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
overflow: hidden;
}
#top-menuwrap, #top-menuwrap2{width:980px;margin:20px auto;}
#top-menu{width:100%}
#top-menu ul{list-style: none;}
#top-menu ul li{float:right}
#top-menu ul li a{line-height:16px;padding:5px 0;margin-left:5px;color:#999;font-size:14px;text-transform:uppercase;display:block;text-decoration:none;padding:6px 14px;border-radius:4px}
#top-menu ul li a:hover{color:#fff;background:#80bd01}
.logo{float:left;font-family:'Montserrat', Oswald;font-size:160%;text-transform:uppercase;font-weight:300;}
#top-menu ul li a.current{color:#fff;background:#80bd01}
.logo a{color:#fff;text-decoration:none;margin-top:-5px}
.logo a:hover{color:#fff;text-decoration:none}
.logo img{margin-top:2px;}
HTML
<div id='top-menuwrapper'>
<div id='top-menuwrap'>
<div id='top-menu'>
<div class='logo'>
<a href='/'><img alt='DroidPluss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9PfzTJPVfEmoGqHM33mPZSG25n8kgWhNWFR7d2-WLdPAGd9hJDV-9_Cv_fRA3UMvkU__KlVczo01pomeQ6HpJxMfISJ5yd0vamaZKGFnbTGLEbccpt2dkDwRWl8sxviWiR3NemUUyPm9g/s1600/droidpluss.png'/></a>
</div>
<ul>
<li><a href='http://droidpluss.blogspot.com/p/kebijakan-privasi.html'>Privacy</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='http://droidpluss.blogspot.com/p/about.html'>About</a></li>
<li><a class='current' href='/'>Daftar Isi</a></li>
</ul>
</div>
</div>
</div>
Cara Pemasangan
- Untuk Cssnya Silahkan ditaruh diatas kode </style> atau ]]></b:skin>
- Untuk HTMLnya silahkan ditaruh diatas kode <div id='wrapper'>
Nah, Itulah sebagian tips dari blog adik yasdil.Dan juga saya tidak lupa untuk mengucapkan terima kasih terhadap
Kang Ismet.
Sekian dan Terima kasih.