Ingat Waktu Coy

NavBar

Ext CSS

28 July 2013

Chunky Navigation

·

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:

    All Connect