Cara Membuat Menu Horisontal Cantik

Menanggapi permintaan beberapa sahabat Blogger mania tentang cara membuat menu horisontal molor cantik seperti punya EFA, Maka EFA akan mencoba mempostingkanya dan berbagi dengan sobat blogger mania. dan mudah mudahan bisa terpasang diblog sobat. karna cara membuatnyapun sangat mudah. tetapi itu untuk blog EFA. Nah bila sobat blogger mania ingin mencoba silahkan dicoba, tapi EFA tidak janji apakah sesuai dengan template sobat atau tidak, tetapi mudah mudahan berhasil. cukup ikuti langkah langkah berikut ini:

==> Login ke Blogger

==> Pilih rancangan

==> Pilih tambah gadget kemudian copy pasti script dibawah ini didalamnya.

Dan terakhir dan paling utama simpan dan lihat hasinya

<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/AVvXsEiURyiy3d8zWURIlYf0mrScNn2g9BOOxgPcun1Lfzz1KyzWlDGJhZ35BCnmpq7288vAek_n18KAcngP9Elzk5q1rtDxQrt_-WmdnYbl5vPiK4wYcF7LRopdtpdjVCUE7FYC6h-NCElQ0HM/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="link/"><b>gubhug reyot</b></a>
        <a href="link"><b>Tanty Template Modification</b></a>
        <a href="link"><b>bgsgr Tutorial</b></a>
        <a class="last" href="link"><b>Mas Gitosamin</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>

Selanjutnya ubah tulisan link yang berwarna biru dengan link-link blogsobat dan ubah tulisan dengan tek yang sobat inginkan. misalnya Home, Inspirator, Ghubuk reyot, Naskah pidato bahasa inggris dan seterusnya. 

Demikian yang bisa EFA posting dan semoga bisa berhasil ditemplate sobat.

Apabila pada template sobat tidak terdapat elemen dibawah header silahkan baca tutorial di Cara membuat menu horisontal alternatif

Semoga Bermanfaat.............

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «