CARA MEMBUAT MENU HORIZONTAL DROP DOWN DI BLOG

menu horizontal

adalah suatu perlengkapan utama pada suatu blog yang hampir semua para blogger menggunaka menu horizontaal, menu yang berisi suatu tema tema yang dibutuhkan. trus bagaimana cara membuatnya lasung aja kita mulai cara pembuatannya

1. login ke blog kamu
2. lalu masuk ke template
3. pilih edit HTML
4. jangan lupa cetang Expand Template Widget  
5. cari kode ]]></b:skin> dengan menggunakan ctrl + F
6. copy code berikut tepat di atas kode ]]></b:skin>

}#alie man Menu { background: warna1; width: 880px; height: 35px; font-size: 12px; font-family: Arial, Tahoma, Verdana; color: warna2; font-weight: bold; margin-bottom: 30px; padding: 2px; } #alie manbox { width: 875px; float: left; margin: 0; padding: 0; } #punch { margin: 0; padding: 0; } #punch ul { float: left; list-style: none; margin: 0; padding: 0; } #punch li { list-style: none; margin: 0; padding: 0; } #punch li a, #punch li a:link, #punch li a:visited { color: warna2; display: block; font-size: 16px; font-family: Georgia, Times New Roman; font-weight: normal; text-transform: lowercase; margin: 0; padding: 9px 15px 8px; } #punch li a:hover, #punch li a:active { background: warna2; color: warna1; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #punch li li a, #punch li li a:link, #punch li li a:visited { background: warna1; width: 150px; color: warna2; font-size: 14px; font-family: Georgia, Times New Roman; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF; } #punch li li a:hover, #punch li li a:active { background: warna2; color: warna1; padding: 7px 10px; } #punch li { float: left; padding: 0; } #punch li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #punch li ul a { width: 140px; } #punch li ul ul { margin: -32px 0 0 171px; } #punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul { left: -999em; } #punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul { left: auto; } #punch li:hover, #punch li.sfhover { position: static; }

jika sudah klik simpan template
    lalu masuk tata letak
    tambah gadget
    pilih HTML/java script
    copy code berikut tepat di kolom yg tersedia
&quot;alieman Menu&quot;       &lt;div id=&quot;alie man box&quot;&gt;

      &lt;ul id=&quot;punch&quot;&gt;

        &lt;li&gt;&lt;a href=&quot;http://zodiakcancer1.blogspot.com/&quot;&gt;beranda&lt;/a&gt;&lt;/li&gt;

        &lt;li&gt;

          &lt;a href=&quot;#&quot;&gt;tips trik &lt;/a&gt;

          &lt;ul&gt;

            &lt;li&gt;

              &lt;a href=&quot;http://zodiakcancer1.blogspot.com/search/label/tips blog&quot;&gt;tips blog&lt;/a&gt;

              &lt;ul&gt;

                &lt;li&gt;

                href=&quot;http://zodiakcancer1.blogspot.com/search/label/trik komputer&quot;&gt;trik komputer&lt;/a&gt;&lt;/li&gt;

            &lt;li&gt;&lt;a href=&quot;http://zodiakcancer1.blogspot.com/search/label/trik internet&quot;&gt;trik internet&lt;/a&gt;&lt;/li&gt;

            &lt;li&gt;&lt;a href=&quot;http://zodiakcancer1.blogspot.com//search/label/perawatan hardware&quot;&gt;perawatan hardware&lt;/a&gt;&lt;/li&gt;

            &lt;li&gt;&lt;a href=http://zodiakcancer1.blogspot.com//search/label/kesehatan&quot;&gt;kesehatan&lt;/a&gt;&lt;/li&gt;

          &lt;/ul&gt;

        &lt;/li&gt;

        &lt;li&gt;&lt;a href=http://zodiakcancer1.blogspot.com/search/label/software gratis&quot;&gt;software gratis&lt;/a&gt;&lt;/li&gt;

        &lt;li&gt;&lt;a href=&quot;http://zodiakcancer1.blogspot.com/search/label/ebook gratis&quot;&gt;ebook gratis&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;http://zodiakcancer1.blogspot.com/search/label/islami&quot;&gt;islami&lt;/a&gt;&lt;/li&gt;

      &lt;/ul&gt;

    &lt;/div&gt;

  &lt;/div&gt;

&lt;/div&gt;

 ETERANGAN : tulisan yang berwarna BIRU ganti tengan URL blog sobat

                         tulisan yang berwarna hijau  ganti dengan URL label blog sobat

                         tulisan yang berwarna HITAM ganti dengan nama tema menu yang di inginkan

GAnti tulisan yg berwarna merah dengan url yg dituj.

sekian postingan saya kali ini semoga bermanfaat.. sekian dan terima kasih

Anda baru saja membaca artikel yang berkategori tips blog dengan judul CARA MEMBUAT MENU HORIZONTAL DROP DOWN DI BLOG. Anda bisa bookmark halaman ini dengan URL http://zodiakcancer1.blogspot.com/2013/03/cara-membuat-menu-horizontal-drop-down.html. Terima kasih!

Ditulis oleh: rifki - Sunday, March 3, 2013