Membuat navigasi keren

Print this page

• Home
• Profile
• JUDUL 1
• JUDUL 2
• JUDUL 3
• Contact

Berikut ini kode yang digunakan dan cara membuatnya :
Cara pembuatan sederhana namun tampilannya tidak kalah menarik dengan navigasi horizontal lainnya.

• Login ke akun blog anda
• Klik Rancangan Klik Edit HTML 
  Copy kode berikut dan letakan di bawah kode ]]></b:skin>

<style type='text/css'>
#top_navigation{background:transparent; width:800px; height:77px; list-style:none; margin-top:7px; margin-bottom:11px; width:100%}
ul.nav{background:transparent; width:800px; height:57px; line-height:31px; list-style:none; padding:0 10px; font-size:14px}
ul.nav li{display:inline; padding:0; background:transparent}
ul.nav a{background:transparent; height:30px; font-size:16px; color:#808080; float:left; padding:11px 19px 11px 16px; text-decoration:none; border-top:1px solid #252525; border-bottom:4px solid #252525; border-left:1px solid transparent; border-right:1px solid transparent; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px}
ul.nav a:hover{background:#252525; border-top:1px solid #252525; border-bottom:4px solid #000; border-left:1px solid #252525; border-right:1px solid #252525; color:#FFF; padding:11px 19px 11px 16px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px}
</style>

• Selanjutnya Klik Simpan atau Save Template
• Klik lagi Rancangan. Bila anda menggunakan blogger new interface dashboard silahkan klik Layout.
• Klik Tambah Gadget
• Pilih HTML/JavaScript
• Masukkan kode berikut ke dalamnya

<div id="top_navigation">
<ul class="nav">
<li><a href="http://ALAMAT BLOG ANDA.blogspot.com/">Home</a></li>
<li><a href="http://ALAMAT PROFILE ANDA/" rel="nofollow" target="_blank">Profile</a></li>
<li><a href="http://ALAMAT LINK ANDA/" rel="nofollow" target="_blank">JUDUL 1</a></li>
<li><a href="http://ALAMAT LINK ANDA/" rel="nofollow" target="_blank">JUDUL 2</a></li>
<li><a href="http://ALAMAT LINK ANDA/" rel="nofollow" target="_blank">JUDUL 3</a></li>
<li><a href="http://ALAMAT KONTAK ANDA/" rel="nofollow" target="_blank"> Contact </a></li></ul>
</div>

Artikel Terkait