Cara membuat menu horizontal mempesona

1. Masuk ke akun blogger

2. Pilih rancangan

3. Pilih menu elemen laman

4. Tambah gadget, pilih html/java script
Masukkan kode berikut

<div class='widget-content'>
<style type="text/css">
#ddabaheader {
    background: #444;
    height:30px;
    width:495px;
    padding:5px;
    position:relative;
    border-radius:12px;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    }
#ddabaheader a, #ddabaheader a:visited, #ddabaheader a:hover, #ddabaheader a:active, #ddabaheader a:focus {outline:0;}   
#ddabaheaderisi {
    position:absolute;
    left:5px; top:5px;
    width:740px;
    overflow:hidden;
    }
dl.ddabaheaderisimenu {
    width:286px;
    float:left;
    margin:-32700px -187px 0 0;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
dl.ddabaheaderisimenu a {overflow:hidden;
    display:block;
    height:22px;
    padding:3px; 
    color:#76edfb;
    font:normal 12px/20px verdana, sans-serif;
    text-decoration:none;
    text-indent:11px;
    border:2px solid red;
    border-width:1px 2px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -moz-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;       
   
    }
dl.ddabaheaderisimenu a:hover {       
    width:300px;
    box-shadow:2px 5px 15px #000;
    -moz-box-shadow:2px 5px 15px #000;
    -o-box-shadow:2px 5px 15px #000;
    -webkit-box-shadow:2px 5px 15px #000;
    }   
dl.ddabaheaderisimenu a b {
    display:block;
    background:#777;
    border:1px outset #555;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    font-weight:normal;
    text-shadow:2px 2px 2px #000;
    }   
dl.ddabaheaderisimenu a.last {
    border-width:0 2px 2px 2px;
    }
dl.ddabaheaderisimenu a b:hover{
    border:1px inset #000;
    color: #FFFF00;
    background:red;
    }
dl.ddabaheaderisimenu a:visited {
    color:#000;
    }
dl.ddabaheaderisimenu dt {
    float:left;
    padding:0;
    margin:32700px 0 0 0;
    position:relative;
    z-index:50;
    }
dl.ddabaheaderisimenu dd {
    float:left;
    padding:0;
    margin:0;
    position:relative;
    z-index:10;
    }
dl.ddabaheaderisimenu dt a {
    width:90px;
    }
dl.ddabaheaderisimenu dd a {
    background: #111;
    width:176px;
    }
dl.ddabaheaderisimenu dt a:hover, dl.ddabaheaderisimenu dt a:focus, dl.ddabaheaderisimenu dt a:active,
dl.ddabaheaderisimenu dd a:hover, dl.ddabaheaderisimenu dd a:focus, dl.ddabaheaderisimenu dd a:active{
    margin-right:1px;
    background:#777;
    color:#fff;
    }
dl.ddabaheaderisimenu dt a:hover b, dl.ddabaheaderisimenu dt a:focus b, dl.ddabaheaderisimenu dt a:active b, dl.ddabaheaderisimenu dd a:hover b,
dl.ddabaheaderisimenu dd a:focus b, dl.ddabaheaderisimenu dd a:active b {
    background:#aaa;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBLAS90YdbjnrPhSQNOIhOFI7eAEz3v1BLhmUlxq-XEg2be0DxgVXTCiozoDX7UtDUacI7IgGUNG4b9ZLoocEiUeKZ4WHIW8bISmvdRP-7j3PH4b7EKQ_6TtOhyETJMnAiUFEZx-OD_24/s400/bgsGR-bgGreenFade432.png) top center repeat-y;
    text-shadow:2px 2px 2px #000;
    }
</style>

<div style="height:40px;border:2px solid #888;padding:1px 2px;background:#111 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/template%20GR-2/th_menuheaderbloggerstuars.png) repeat 0 -3px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;">
<div id="ddabaheader">
<div id="ddabaheaderisi">

<dl class="ddabaheaderisimenu">
    <dt>
        <a href="link"><b>Home</b></a>

    </dt>
</dl>
<dl class="ddabaheaderisimenu">
    <dt>
        <a href="link"><b>Inspirator Template</b></a>
    </dt>

    <dd>
        <a href="http://rizkyguna1.blogspot.com/"><b>blog  Tutorial</b></a>

        <a href="link"><b>Tanty Template Modification</b></a>
        <a href="http://rizkyguna1.blogspot.com/"><b>blog  Tutorial</b></a>
        <a class="last" href="http://rizkyguna1.blogspot.com"><b>blog  Tutorial</b></a>

    </dd>

</dl>
<dl class="ddabaheaderisimenu">
    <dt>
        <a href="link"><b>Anak Sekolah</b></a>
    </dt>
    <dd>
        <a href="link"><b>Daftar Nilai B. Inggris</b></a>
        <a href="link"><b>Pidato B.Inggris</b></a>

        <a href="link"><b>Simulasi Nilai Kelulusan</b></a>
        <a href=link"><b>SKL SMP</b></a>
        <a href="link"><b>Kalender Pendidikan</b></a>                     
        <a href="link"><b>Latihan TOEFL</b></a>
        <a href="link"><b>English specch</b></a>
        <a class="last" href="link"><b>soal SNMPTN</b></a>
    </dd>

</dl>
<dl class="ddabaheaderisimenu">
    <dt>
        <a href="link"><b>SEO</b></a>

    </dt>
    <dd>
        <a href="link"><b>seo web directory</b></a>
        <a href="link"><b>Free back link</b></a>

        <a href="link"><b>Social Monkee</b></a>
        <a class="last" href="link"><b>Meningkatkan kunjungan blog</b></a>
    </dd>

</dl>
<dl class="ddabaheaderisimenu">
    <dt>
        <a href="link"><b>Guru</b></a>
    </dt>

    <dd>
        <a href="link"><b>Download KTSP SMP</b></a>
        <a href="link"><b>KTSP SMP Berkarakter</b></a>
        <a class="last" href="link"><b>KTSP SD Berkarakter</b></a>
    </dd>
</dl>

<dl class="ddabaheaderisimenu">
    <dt>
        <a href="link"><b>Centricle</b></a>

</dt></dl>

<dl class="ddabaheaderisimenu">
    <dt>
        <a href="link" /><b>Alat</b>
    </a></dt>
    <dd>
</dd></dl>
<dl class="ddabaheaderisimenu">
   <dt></dt></dl></div></div></div></div>

Ganti tulisan yang berwarna biru sesuai keinginan.
Semoga berhasil  




 

Sumber ghubugreyot.blogspot.com