Tutorial Fixed Navigation Bar

wanaseoby.com

Tahun lalu, aku blogwalking ke salah satu blog dan love at the first sight sama navigation di bagian atas header, nggak hilang waktu discroll. Navigation itu kerap dipakai di platform blogskin, jadi agak susah nyari code untuk simple templatenya. Sebenernya nggak susah juga sih, ada banyak bahkan ratusan kalau cuma googling dengan keyword seperti judul postinganku. Cuma, (selain tutor yang full english jadi harus translate/ngandalin logika waktu mbaca) lumayan ribet karena main CSS yang udah profesional sedangkan aku mah apa atuh ngertinya cuma <center> sama <br> :v

But, nggak usah worry, aku bakal kasih kalian tutorial yang mudah dan pakai bahasa Indonesia. :D

Big thanks to Wanaseoby for this marvelous tutorial. Sekali nyoba langsung ngerti dan berhasil hehe. Aku yakin kalian juga bakalan gitu. Super mudah, suer deh.

1. Buka Template >> Edit HTML >> Ctrl + F, cari kode </html>.
2. Paste kode di bawah ini dan taruh di atas kode </html> tadi

<style>
.hyosung{
width:100%;
background:url(http://i.imgur.com/bbipa.png);
border-bottom:5px solid #FFEEEE;
position:fixed;
top:0px;
left:0px;
box-shadow:0 0 6px #ccc;
text-align:center;
padding:10px;}
a.jieun{
background:#FFEEEE;
text-decoration:none;
color:#FFBBBB;
padding:5px;
font:11px arial;
margin-left:5px;
margin-right:5px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
display:inline-block;
width:60px;}
a.jieun:hover{background:#FFBBBB;
color:#fff;
</style>
<div class="hyosung">
<a class="jieun" href="LINK">ABOUT</a>
<a class="jieun" href="LINK">TUTO</a>
<a class="jieun" href="LINK">LINKIES</a>
<a class="jieun" href="LINK">FREEBIES</a>
<a class="jieun" href="http://www.blogger.com/follow-blog.g?blogID=<$BlogID$>">FOLLOW</a></div>

Done!

NB : Berlaku juga untuk Blogskin / Classic Template, live preview di http://parkhyunchul.blogspot.co.id/2012/11/navigation-bar-2.html

Source and big thanks to : http://www.wanaseoby.com/2012/10/navigation-bar-2.html 

Good luck :D