Panduan membuat menu horizontal blogger

    Login ke dashboard blogger
    Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
    Klik Add Gadget / Tambah Gadget.
    Pilih/klik opsi HTML/Javascript
    Kemudian masukkan kode menu horizontal yang saya tulis diakhir artikel ini.
    Klik Save / Simpan
    Selesai

Nah itulah tutorial bikin menu horizontal blogger.

Catatan :
Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)

Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 - 5)

    <style>
    /*---------------------------------------------------------------------------------*/
    /* CATEGORY MENU */

    /*---------------------------------------------------------------------------------*/
    #cat-menu { background:url(pop.png) no-repeat center top; height:35px;}
    /* category navigation */
    .nav { width:100%;z-index:99; float:left; margin:10px 0 0 0; padding:0px; list-style:none; line-height:1; height:35px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}
    .nav a { position:relative; color:#999; display:block; z-index:100; text-decoration:none; }
    .nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
    .nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
    .nav li a:hover, .nav li a:active, .nav li.current-cat, .nav li.current-cat-parent { background:none; color:#004276; text-decoration:underline;}
    .nav li ul { background:#444; position:absolute;width:172px; margin:0px 0px 0px -2px; border:1px solid #333; border-width:1px 1px 0px; z-index:999; }
    .nav li ul li {border-bottom:1px solid #333; border-right:none; }
    .nav li ul li a { background:#444; width:147px; padding:7px 12px; color:#fff; font-size:11px; font-weight:normal; }
    .nav li ul li a:hover { background:#f9f9f9; color:#004276; text-decoration:underline; }
    .nav li ul ul { margin:-31px 0px 0px 171px; }
    </style>
    <div id='cat-menu'>
    <ul class='sf-menu nav' id='cat-nav'>
    <li><a href='/'>Home</a></li>
    <li><a href='#'> Menu 1</a></li>
    <li><a href='#'> Menu 2</a></li>
    <li><a href='#'> Menu 3</a></li>
    <li><a href='#'> Menu 4</a></li>
    <li><a href='#'> Menu 5</a></li>
    </ul>                    
    </div>

Keterangan.

    ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.
    Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.