if (window.jstiming) window.jstiming.load.tick('headEnd');
Minal 'Aidin wal Faizin
Mampukah setiap tahun bertambah baik?
Sebuah tantangan bagi siapapun. Jadikan Idul fitri sebagai mement yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama.

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 «


4comments:

  1. Terimakasi kk, udah membantu aku dalam membuat menu bar blog..... mantaf kk hasilnya.....

    ReplyDelete
  2. Manteb master...
    Nubie coba dulu,kapan2 mampir sekalian minta koreksi dan pencerahanya .... Trima kasih

    ReplyDelete
  3. maksih masbro, tampilannya mantap banget..moga sukses.

    ReplyDelete
  4. keren banget mas brow blognya, bagi2 ilmunya dunk,,,,

    ReplyDelete

Terimakasih Atas Komentar Anda dan EFA akan segera menuju Blog anda...

NextPrev