Minggu, 06 Januari 2013

Cara Membuat Menu Horizontal Blog Sederhana

Cara Membuat Menu Horizontal Blog Sederhana - Saya yakin anda sudah tahu apa itu menu horizontal blog, jika belum silahkan di baca pada artikel sebelumnya, menu horizontal blog di Blogspot. Pada artikel ini, saya akan membahas bagaimana cara membuat menu horizontal blog sederhana dengan menggunakan kode-kode html atau css seperti contoh gambar berikut ini

Cara Membuat Menu Horizontal Blog Sederhana

Berikut Cara Membuat Menu Horizontal Blog Sederhana
  1. Masuk ke akun blogger anda
  2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
  3. Cari kode ]]></b:skin>
  4. Masukkan kode CSS berikut tepat diatas ]]></b:skin>
    .navhorizontalpic{background:#434343 url() repeat-x top left;width:100%;height:40px;border-top:1px solid #000000;margin:0 auto;padding:0 auto}
    .navhorizontal{width:960px;height:35px;margin:0 auto;padding:12px 0}
    .navhorizontal ul{padding-left:0;color:#fff;text-transform:none;list-style-type:none;font:normal 12px Arial,sans-serif;margin:0}
    .navhorizontal li{display:inline;margin:0}
    .navhorizontal li a{background:url() no-repeat center right;float:left;display:block;text-decoration:none;color:#eee;line-height:1.5em;padding:1px 12px}
    .navhorizontal li a:visited{color:#eee}
    .navhorizontal li a:hover{color:#8a8050;text-decoration:none;-moz-transition:color .25s linear;-webkit-transition:color .25s linear;transition:color .25s linear}
  5. Cari kode dengan struktur seperti berikut ini
    <div id='header-outer'>
    <div id='header-inter'>
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
    <b:includable id='title'>
    ----------------------
    ----------------------
    ----------------------
    </b:includable>
    </b:widget>
    </b:section>
    </div>
    </div>
    </div>


    Letakkan kode berikut tepat dibawah kode </b:section> diatas

    <div class='navhorizontalpic'>
    <div class='navhorizontal'>
    <ul>
    <li><a href='/'><img alt='Panduan Template Blog' border='0' src='link url gambar' title=''/></a></li>
    <li><a href='#'>Forum</a></li>
    <li><a href='#'>Color Code</a></li>
    <li><a href='#'>Archieves</a></li>
    <li><a href='#'>Contact us</a></li>
    </ul>
    </div>
    <div style='clear:both;'/>
    </div>
  6. Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog sederhana seperti yang ada pada blog ini.
  7. Simpan Template
Okey, semoga bermanfaat dan bisa diterapkan dalam blog anda setelah membaca artikel ini, Cara Membuat Menu Horizontal Blog Sederhana

Cara Membuat Menu Horizontal Blog Sederhana Rating: 4.5 Diposkan Oleh: ana sriwahyuni

12 komentar:

  1. banyak banget kodenya gan, gak bisa kalau di sedikitin lagi ya...

    BalasHapus
  2. @bisnis online paling murah bisa saja tapi dengan tampilan monoton. klo kode diatas sudah sedikit kok, yg warna biru kode menunya..

    BalasHapus
  3. thanks gan, pas buat ku yg pemula, kunjungi balik blok ku :
    serbagratis13.blogspot.com

    BalasHapus
  4. ini yang harus dipraktekkan nih.. terima kasih...

    BalasHapus
  5. thanks info'x yaa, bermanfaat sekali bagi saya ..

    BalasHapus
  6. Cara UBahTulisan Panduan Template Blog Gimana

    BalasHapus
  7. sibb mbak tutorial nya , semoga bermanfaat,..
    salam dari orbit.co.id

    BalasHapus

  8. kode di atas b skinnya kok error gan....?

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia