»Unlabelled » Cara Membuat Menu Horizontal

Cara Membuat Menu Horizontal

Sunday, January 15, 2012 by Keith Mercer

Selamat membaca .Cara Membuat Menu Horizontal | Menu flat merupakan kumpulan beberapa unification yang diletakkan secara flat dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang Cara Membuat Menu Horizontal sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari schedule flat tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam journal gum memberikan layanan kemudahan road unification bagi pengunjung journal kamu. menu horizontal Singkat kata, berikut langkah membuat schedule flat dalam journal kamu :
  • Login ke statement blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips : Sebelum melakukan modify template, sebaiknya simpan dulu model kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul schedule toolbar pencarian di bawah application (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari. /* navbar ================== */ #bg_nav { background: #ffffff; width: 850px; height: 29px; font-size: 11px; font-family: Arial, Tahoma, Verdana; color: #000000; font-weight: bold; margin: 0px machine 0px; padding: 0px; border-top: 1px solidified #000000; border-bottom: 1px solidified #ffffff; overflow: hidden; } #bg_nav a, #bg_nav a:visited { color: #000000; font-size: 11px; text-decoration: none; text-transform: uppercase; padding: 0px 0px 0px 3px; } #bg_nav a:hover { color: #000000; text-decoration: underline; padding: 0px 0px 0px 3px; } #navleft { width: 500px; float: left; margin: 0px; padding: 0px; } #navright { width: 220px; font-size: 11px; float: right; margin: 0px; padding: 3px 5px 0px 0px; } #navright a img { border: none; margin: 0px; padding: 3px 5px 0px 0px; } #nav { margin: 0px; padding: 0px; list-style: none; } #nav ul { margin: 0px; padding: 0px; list-style: none; } #nav a, #nav a:visited { background: #ffffff; color: #000000; display: block; font-weight: bold; margin: 0px; padding: 8px 15px 8px 15px; border-left: 1px solidified #ffffff; } #nav a:hover { background: #c06000; color: #000000; margin: 0px; padding: 8px 15px 8px 15px; text-decoration: none; } #nav li { float: left; margin: 0px; padding: 0px; } #nav li li { float: left; margin: 0px; padding: 0px; width: 150px; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 160px; float: none; margin: 0px; padding: 7px 30px 7px 10px; border-bottom: 1px solidified #ffffff; border-left: 1px solidified #ffffff; border-right: 1px solidified #ffffff; } #nav li li a:hover, #nav li li a:active { background: #c06000; padding: 7px 30px 7px 10px; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; display: block; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } Catatan :
  • Agar schedule flat sesuai dengan model blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
  • Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar journal kamu.
  • Untuk kode pewarnaan, kamu bisa melihatnya di kode warna ini.
    • Kemudian cari kembali kode seperti di bawah ini.
    <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> ... dan seterusnya ... </b:section> </div>
    • Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan model journal kamu).
    <div id='bg_nav'> <div id='navleft'> <div id='nav'> <ul> <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li> <li><a href='http://Link_yang_dituju'>Add Link</a></li> <li><a href='http://Link_yang_dituju'>Add Link</a></li> <li><a href='http://Link_yang_dituju'>Add Link</a></li> <li><a href='http://Link_yang_dituju'>Add Link</a></li> </ul> </div> </div> <div id='navright'> <form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/> </form> </div> </div><!-- akhir bg_nav -->
    • Jangan lupa disimpan
    http://m-wali.blogspot.com/feeds/posts/defaultterima kasih
    Angga Sanusi

    Posted in: | | |  

    Bookmark and Share

    0 comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)