Cara Membuat Menu Pada Blogger Dengan Mudah

Cara Membuat Menu  Blogger - Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. 

Cara Membuat Menu Pada  Blogger Dengan Mudah 

Caranya :

    * Login ke account blogger kamu.

    * Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Catatan : Sebelum melakukan edit template, sebaiknya simpan dulu template 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 kode berikut di atasnya.

Catatan : Kalau susah mencarinya, centang kolom Expand Template Widget, kemudian coba tekan ctrl + f (secara bersamaan). kamu tinggal memasukkan kode diatas kedalam kotak pencariannya.

    /*=== Navigasi pulldown ===*/
    body{ behavior:url("csshover2.htc"); }
    .NavMenuPD {
    float:left;
    padding:0;
    margin:0;
    color: #FFFFFF;
    background: transparent;
    width:100%;
    border:solid 1px #004080; clear:both;} /*Warna Navigasi Utama*/
    .NavMenuPD a, .NavMenuPD a:visited {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:12px;
    color: #FFFFFF;
    background-color: transparent;
    text-decoration: none;}
    .NavMenuPD ul {list-style-type:none;padding:0; margin:0;}
    .NavMenuPD ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
    .NavMenuPD ul li a {color: #FFFFFF;background: transparent;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
    .NavMenuPD ul li ul {display:none; border:none;color: #FFFFFF;background: #000000; width:1px}
    .NavMenuPD ul li:hover a {background-color:#C0C0C0; text-decoration:none; color:#000000;} /*Warna main cells mode hover */
    .NavMenuPD ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
    .NavMenuPD ul li:hover ul li a {display:block; width:100px; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#C0C0C0; color:#FFFFFF;} /*warna subcells mode normal */
    .NavMenuPD ul li:hover ul li a:hover {background-color:#808080; text-decoration:none;color:#FFFF00;} /*Warna subcells mode hover*/
    .NavMenuPD ul li a:hover {background-color:#C0C0C0; text-decoration:none;color:#0000FF;} /*warna main cells mode hover */
    .NavMenuPD ul li a:hover ul {display:block; width:100px; position:absolute; z-index:999; top:29px; left:0; }
    .NavMenuPD ul li ul li a:visited { background-color:#C0C0C0; color:#FFFFFF;} /*Warna subcells normal mode*/
    .NavMenuPD ul li a:hover ul li a {display:block; width:100px; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#C0C0C0; color:#FFFFFF;}
    .NavMenuPD ul li a:hover ul li a:hover {background-color:#00FFFF; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
    /*= by bangnes url blog: http://bangnesdotcom.blogspot.com =*/



Catatan : Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode dan sesuaikan dengan blog kamu.

* 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 template blog kamu).

    <div class='NavMenuPD'>
    <ul><li><a href='/'>BERANDA</a>
    </li></ul>

    <ul><li><a href='http://faikhkwnict.blogspot.com/search/label/Informasi'>INFORMASI</a>
    </li></ul>

    <ul><li><a href='#'>TIPS dan TRIK</a>
    <ul>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/Tips%20dan%20Trik%20Internet'>Tips dan Trik Internet</a></li>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/Tips%20dan%20Trik%20Komputer'>Tips dan TipsKomputer</a></li>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/Tips%20Blog'>Tips dan Trik Blog</a></li>
    <li><a href='http://faikhkwnict.blogspot.com//search/label/Tips%20dan%20Trik%20HP'>Tips dan Trik HP</a></li>
    </ul>
    </li></ul>

    <ul><li><a href='#'>BLOG</a>
    <ul>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/SEO'>SEO</a></li>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/CSS'>CSS</a></li>
    </ul>
    </li></ul>

    <ul><li><a href='#'>SOFTWARE</a>
    <ul>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/Anti%20Virus'>Anti Virus</a></li>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/Audio'>Audio</a></li>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/Video%20Software'>Video</a></li>
    <li><a href='http://faikhkwnict.blogspot.com//search/label/Internet%20Sofware'>Internet Software</a></li>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/Design%20Graphic'>Graphic Design</a></li>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/Tools'>Tools</a></li>
    <li><a href='http://faikhkwnict.blogspot.com//search/label/Utility'>Utility</a></li>
    </ul>
    </li></ul>

    <ul><li><a href='#'>HANDPHONE</a>
    <ul>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/Aplikasi%20HP'>Aplikasi HP</a></li>
    <li><a href='http://faikhkwnict.blogspot.com/search/label/Game%20HP'>Game HP</a></li>
    </ul>
    </li></ul>

    <ul><li><a href='http://faikhkwnict.blogspot.com/search/label/Komputer'>KOMPUTER</a>
    </li></ul>
    </div>

Kemudian jangan lupa di Save.

Catatan : Silahkan ganti alamat URL nya dengan alamat URL punya kamu.