Top Navigasi Diatas Header Keren

Ketemu lagi dengan saya. Di postingan ini saya akan membuat Top Navigasi Diatas Header Keren. Top Navigasi? Ini agar mempermudah pengunjung melihat fiture blog kita. mungkin kebanyakan ada Top Navigasi tapi di bawah header. Nah disini berbeda. Top Navigasi Diatas Header Keren ini bisa di isi dengan Contact US,Sitemap,Disclaimer,Privacy Policy. Nah kali ini saya akan memberi tutorial memasang Contact US,Sitemap,Disclaimer,Privacy Policy di Top Navigasi Diatas Header. Apa tujuanya? ya agar lebih rapih aja sih. Itu menurut saya.
Screenshot :

Preview GIF :

Cara Membuat Top Navigasi Diatas Header Keren

Cara Pertama :

1. Buka Blogger - Kemudian login.

2. Dashboard - Template.

3. Edit HTML.

Proses Pembuatan :

1. Temukan <CTRL+F> kode ]]></b:skin> atau </style>.

2. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>.

//* Top Navigasi Diatas Header Keren */
#topwrapper{width:100%;overflow:hidden;height:35px;}#topnav{font-weight:bold;margin:0;float:right;width:500px;overflow:hidden;height:45px;line-height:45px;list-style-type:none;padding:0 0 0 0;}#topnav li{display:block;float:left;margin:0 0 0 0;}#topnav li a{padding:0 20px;font-size:14px;display:block;text-decoration:none;}#topnav li a:hover{color:#000;box-shadow:inset 0px -3px 0px rgba(0,0,0,0.3);background:#f5f5f5;}#topnav li:nth-child(1) a:hover{box-shadow:inset 0px -2px 0px #006ECC;}#topnav li:nth-child(2) a:hover{box-shadow:inset 0px -2px 0px #0084C5;}#topnav li:nth-child(3) a:hover{box-shadow:inset 0px -2px 0px #006ECC;}#topnav li:nth-child(4) a:hover{box-shadow:inset 0px -2px 0px #006ECC;}#topnav li:nth-child(5) a:hover{box-shadow:inset 0px -2px 0px #006ECC;}#topnav li:nth-child(6) a:hover{box-shadow:inset 0px -2px 0px #FFBA0F;}#search-top{float:left;margin:4px 0px 4px 10px;display:none;}#search-top input[type="text"]{box-shadow:inset 2px 2px 0px #f0f0f0;border-radius:3px 0 0 3px;height:25px;width:100px;line-height:24px;background-color:#f8f8f8;border:1px solid #d3d3d3;outline:none;font-size:13px;padding:0 10px;float:left;}#search-top input#search-button-top{box-shadow: inset 1px 1px 0 #f9f9f9;border-radius:0 3px 3px 0;height:27px;width:30px;color:#006ECC;background-color:#f0f0f0;border:1px solid #d3d3d3;border-left:none;float:left;cursor:pointer;}#search-top input#search-button-top:hover{background-color:#e8e8e8;}

Note : Width 500px itu lebarnya jadi anda bisa menggantinya sesuai dengan template anda.

3. Temukan lagi <CTRL+F> kode <body>.
4. Copy&paste kode berikut ini, dan letakkan dibawah kode <body>.


<!--Top Navigasi Diatas Header Keren-->
<ul id='topnav'>
<li><a href='###' title='Contact us'><i class='fa fa-envelope'/> Contact</a></li>
<li><a href='###' title='Sitemap'><i class='fa fa-list'/> Sitemap</a></li>         
<li><a href='###' title='Disclaimer'><i class='fa fa-check-circle'/> Disclaimer</a></li>
<li><a href='###' title='Privacy Policy'><i class='fa fa-unlock-alt'/> Privacy Policy</a></li>
</ul>
<!---Clear-->

Note : "###" Silahkan anda isi dengan link laman anda.

5. Terakhir Simpan Template.

Sekian Top Navigasi Diatas Header Keren. Apabila ada kesalahan jangan sungkan untuk berkomentar. Semoga Bermanfaat ! dan Share : Top Navigasi Diatas Header Keren.