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>
Nara sumber ; http://blogonol.blogspot.com/
0 comments:
Post a Comment