Screenshot :
Preview GIF :
2. Dashboard - Template.
3. Edit HTML.
Proses Pembuatan :
1. Temukan <CTRL+F> 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.
9 comments
keren bro
btw mampir juga ke filkom.gunadarma.ac.id
wah mantap ni artikel.. sukses terus buat blognya
nice posting gan, ini yang saya cari-cari..sekali lagi makasih min :)
ini yang ane cari gan :D
ane pakai wp gan
wew keren
sayangnya ane make wp
iya makasih gan...
tq broo..
dapat ilmu baru lagi nie..
Notes :
- Tidak Diperbolehkan untuk Mempromosikan Barang atau Berjualan
- Disarankan Berkomentar Menggunakan Bahasa Indonesia yang sopan