Cara Membuat Menu Drop di Bawah Header

Asslamu'alaikum. Udah lama nih gk postingan, kebetulan ada yang nanyain soal bikin Menu, jd sekalian deh mostingan. Cara membuat menu kali ini tidak menggunakan edit Template /HTML, tapi cuma pake fasilitas Widget yang ada di Blog, tujuannya supaya rada praktis gitu (sok pinter aku ye..)

Oke bro, gak usah pake lama2 deh prolognya ntr keburu pada ngantuk, langsung ke TKP aje....

1. Buka blog anda masing-masing, jangan lupa baca Bismillah

 2. Kalo udah muncul tampilan di atas, lalu klik tombol panah yg deket tulisan : "Tentang Blog"

   

  
    keliatan gak?? itu tuuuuuu..... yang ane kasih tanda lingkaran merah, lalu

    pilih dan klik TATA LETAK  ntar muncul :

3. klik menu TAMBAH GADGET

4. Lalu cari dan klik  HTML/JavaSript, ntr muncul :

5. eh, Lupa nih, Copykan dulu kode script di bawah ini ya (garis panjangnya gk usah ikut
    dicopy ya), he3...


===============================================================

<style>

    #menunavigasihorisontal {

        background: #848484;

        width: 100%;

  

        color: #000;

            margin: 10px 0;

            padding: 0;

            position: relative;

            border-top:0px solid #960100;

            height:35px; }

    #bb2nav {

        margin: 0;

        padding: 0;}

    #bb2nav ul {

        float: left;

        list-style: none;

        margin: 0;

        padding: 0;}

    #bb2navli {

        list-style: none;

        margin: 0;

        padding: 0;}

    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {

        color: #FFF;

        display: block;

       font:bold 12px Helvetica, sans-serif;

       margin: 0;

        padding: 9px 12px 11px 12px;

            text-decoration: none;

            border-right:0px solid #627AAD;}

    #bb2nav li a:hover, #bb2nav li a:active {

        background: #2E9AFE;

        color: #FFF;

        display: block;

        text-decoration: none;

            margin: 0;

        padding: 9px 12px 11px 12px;}

    #bb2nav li {

        float: left;

        padding: 0;}

    #bb2nav li ul {

        z-index: 9999;

        position: absolute;

        left: -999em;

        height: auto;

        width: 160px;

        margin: 0;

        padding: 0;}

    #bb2nav li ul a {

        width: 140px;}

    #bb2nav li ul ul {

        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {

        left: -999em;}

    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {

        left: auto;}

    #bb2nav li:hover, #bb2nav li.sfhover {

        position: static;}

    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {

        background: #EDEFF4;

        width: 120px;

        color: #3B5998;

        display: block;

        font:normal 12px Helvetica, sans-serif;

        margin: 1px 0 0 0;

        padding: 9px 12px 10px 12px;

            text-decoration: none;

    z-index:9999;

    border:1px solid #ddd;

    -moz-border-radius:4px;

    -webkit-border-radius:4px;}

    #bb2nav li li a:hover, #bb2nav li li a:active {

        background: #627AAD;

        color: #FFF;

        display: block;}

    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {

        background: #EDEFF4;

        width: 120px;

        color: #3B5998;

        display: block;

        font:normal 12px Helvetica, sans-serif;

        padding: 9px 12px 10px 12px;

            text-decoration: none;

    z-index:9999;

    border:1px solid #ddd;

        margin: 1px 0 0  -14px;}

    #bb2nav li li li a:hover, #bb2nav li li li a:active {

        background: #627AAD;

        color: #FFF;

        display: block;}

    </style>

    <div id='menunavigasihorisontal'>

              <ul id='bb2nav'>

                <li>

                  <a href='#'>Home</a>

                </li>

                <li>

                  <a href='#'>PNPM Mandiri</a>

                </li>

                <li>

                  <a href='#'>Tentang UPK</a>

                     <ul>

                        <li><a href='http://upk-ciampea-bogor.blogspot.com'>Latar Belakang</a></li>

                        <li><a href='http://upk-ciampea-bogor.blogspot.com'>Visi dan Misi</a></li>

                        <li><a href='http://upk-ciampea-bogor.blogspot.com'>Struktur Organisasi</a></li>

                      </ul>

                </li>

                <li>

              

                  <a href='http://upk-ciampea-bogor.blogspot.com'>Laporan Keuangan ▼</a>        <ul>

                    <li><a href='http://upk-ciampea-bogor.blogspot.com'>Neraca Program</a></li>

                    <li><a href='http://upk-ciampea-bogor.blogspot.com'>Neraca Micro Finanance</a></li>

                    <li><a href='http://upk-ciampea-bogor.blogspot.com'>Perkembangan Kelompok</a>

                   <ul>

                    <li><a href='http://upk-ciampea-bogor.blogspot.com>Periode 2007-2008</a></li>

                    <li><a href='http://upk-ciampea-bogor.blogspot.com'>Periode 2009-2010</a></li>

                    <li><a href='http://upk-ciampea-bogor.blogspot.com'>Periode 2011-2012</a></li>

                  </ul>

                  </li>

                  </ul> </li></ul>

                  </div>

=====================================================================================

6.  Paste (Ctrl V) kode script di atas yg udah dicopy. kalo belum sana mending ngopi dulu, 

      sekalian pesenin satu buat aku, he3....

      *** Tulisan yang berwarna Merah ganti dengan alamat BLOG teman masing-masing,

              yang warna Hijau bisa diganti dengan tulisan menu lainnya.

7.  kalo udah tekan tombol SAVE / Simpan

Selesai dweh !!  tapi buat informasi aje, menu di atas belum di link ke postingan yang sesuai dengan sub-menu, ntr kpan2 disambung, yg penting bikin menunya jadi dulu, lumayan buat nambah2 tampilan Blog dulu, oke? Jika ada masalah segera hubungi Dokter terdekat, he3....

 

Pokok'e berhasil tidak berhasil, jangan lupa tulis komentarnya di bawah ini, ups hampir

lupa, mohon maaf ye kalo ade kate yg gk enak dibace. mklm ane lage bete, heeeeeeeeee