Cara Membuat Menu Cantik di Blog

Cara Membuat Menu Cantik di Blog `~` Salah satu cara memudahkan pengunjung Blog untuk mencari artikel serta informasi-informasi lainnya di blog yang mereka kunjungi yaitu adalah list Menu/Menu Drop Down mereka dapat sesuka hati untuk memilih apa yang ingin mereka baca maupun kunjungi di blog tersebut, nah disini saya akan memberikan cara membuat menu canti di blog kalian, baik langsung saja sambil santay ikuti langkah-langkah dibawah ini okeh

1. Masuk ke Blog anda
2. Pilih laman Tata Letak
3. Tambahkan Gadget baru dengan mengklick Add a Gadget/Tambahkan Gadget
4. Pilih Html/Javascript dan masukan kode HTML dibawah ini :

<div class="example">
    <div class="menuholder">
        <ul class="menu slide">
            <li><a expr:href='data:blog.homepageUrl' class="red">Home</a></li>
<li><a href="#" class="orange">Tutorials</a>
<div class="subs">
<dl>
<dt>Website/pemrograman #1</dt>
<dd><a href="#">HTML / CSS</a></dd>
<dd><a href="#">JS / jQuery</a></dd>
<dd><a href="#">PHP</a></dd>
</dl>
<dl>
<dt>Jejaring Sosial #2</dt>
<dd><a href="#">MySQL</a></dd>
<dd><a href="#">XSLT</a></dd>
<dd><a href="#">Ajax</a></dd>
</dl>
<dl>
<dt>Design Grafis #3</dt>
<dd><a href="#">HTML / CSS</a></dd>
<dd><a href="#">JS / jQuery</a></dd>
<dd><a href="#">PHP</a></dd>
</dl>
<dl>
<dt>Links #4</dt>
<dd><a href="#">MySQL</a></dd>
<dd><a href="#">XSLT</a></dd>
<dd><a href="#">Ajax</a></dd>
</dl>
</div>
</li>
<li><a href="#" class="yellow">Resources</a>
<div class="subs">
<dl>
<dt>Links #5</dt>
<dd><a href="#">PHP</a></dd>
<dd><a href="#">MySQL</a></dd>
</dl>
<dl>
<dt>Links #6</dt>
<dd><a href="#">XSLT</a></dd>
<dd><a href="#">Ajax</a></dd>
</dl>
<dl>
<dt>Links #7</dt>
<dd><a href="#">HTML / CSS</a></dd>
<dd><a href="#">JS / jQuery</a></dd>
</dl>
<dl>
<dt>Links #8</dt>
<dd><a href="#">MySQL</a></dd>
<dd><a href="#">Ajax</a></dd>
</dl>
</div>
</li>
<li><a href="#" class="green">Other</a></li>
<li><a href="#" class="blue">About</a></li>
<li><a href="#" class="violet">Back</a></li>
 </ul>
 <div class="back"></div>
 <div class="shadow"></div></div></div>

5. Klick [Tombol] Simpan
6. Sampai disini masih belum beres
7. Pilih laman Template =>Edit Html dan cari kode </head> dan masukan kode CSS berikut tepat berada diatas kode </head> tersebut.

/* demo page styles */

.example {
    position:relative;
    margin:20px auto;
    padding:15px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

/* main menu styles */
.menuholder {
    float:left;
    font:normal bold 11px/35px verdana, sans-serif;
    overflow:hidden;
    position:fixed;
}
.menuholder .shadow {
    -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    background:#888;
    box-shadow:0 0 20px rgba(0, 0, 0, 1);
    height:10px;
    left:5%;
    position:absolute;
    top:-9px;
    width:90%;
    z-index:100;
}
.menuholder .back {
    -moz-transition-duration:.4s;
    -o-transition-duration:.4s;
    -webkit-transition-duration:.4s;
    background-color:rgba(0, 0, 0, 0.5);
    height:0;
    width:100%;
}
.menuholder:hover div.back {
    height:580px;
    }
ul.menu {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0 125px;
    position:relative;
}
ul.menu li {
    float:left;
    margin:0 5px 0 0;
}
ul.menu li &gt; a {
    -moz-border-radius:0 0 10px 10px;
    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -moz-transition:all 0.2s ease-in-out;
    -o-border-radius:0 0 10px 10px;
    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -o-transition:all 0.2s ease-in-out;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -webkit-transition:all 0.2s ease-in-out;
    border-radius:0 0 10px 10px;
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    color:#eee;
    display:block;
    padding:0 10px;
    text-decoration:none;
    transition:all 0.2s ease-in-out;
}
ul.menu li a.red {
    background:#a00;
}
ul.menu li a.orange {
    background:#da0;
}
ul.menu li a.yellow {
    background:#aa0;
}
ul.menu li a.green {
    background:#060;
}
ul.menu li a.blue {
    background:#00a;
}
ul.menu li a.violet {
    background:#682bc2;
}
.menu li div.subs {
    left:0;
    overflow:hidden;
    position:absolute;
    top:35px;
    width:0;
}
.menu li div.subs dl {
    -moz-transition-duration:.2s;
    -o-transition-duration:.2s;
    -webkit-transition-duration:.2s;
    float:left;
    margin:0 130px 0 0;
    overflow:hidden;
    padding:40px 0 5% 2%;
    width:0;
}
.menu dt {
    color:#fc0;
    font-family:arial, sans-serif;
    font-size:12px;
    font-weight:700;
    height:20px;
    line-height:20px;
    margin:0;
    padding:0 0 0 10px;
    white-space:nowrap;
}
.menu dd {
    margin:0;
    padding:0;
    text-align:left;
}
.menu dd a {
    background:transparent;
    color:#fff;
    font-size:12px;
    height:20px;
    line-height:20px;
    padding:0 0 0 10px;
    text-align:left;
    white-space:nowrap;
    width:80px;
}
.menu dd a:hover {
    color:#fc0;
}
.menu li:hover div.subs dl {
    -moz-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
    margin-right:2%;
    width:21%;
}
ul.menu li:hover &gt; a,ul.menu li &gt; a:hover {
    background:#aaa;
    color:#fff;
    padding:10px 10px 0;
}
ul.menu li a.red:hover,ul.menu li:hover a.red {
    background:#c00;
}
ul.menu li a.orange:hover,ul.menu li:hover a.orange {
    background:#fc0;
}
ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
    background:#cc0;
}
ul.menu li a.green:hover,ul.menu li:hover a.green {
    background:#080;
}
ul.menu li a.blue:hover,ul.menu li:hover a.blue {
    background:#00c;
}
ul.menu li a.violet:hover,ul.menu li:hover a.violet {
background:#8a2be2;
}
.menu li:hover div.subs,.menu li a:hover div.subs {
    width:100%;
}

8. Lalu klick [Tombol] Simpan Template untuk memperbarui editan anda dan lihat hasil menunya persis akan seperti berikut.

9. Sekian saja postingan tentang Cara Membuat Menu Cantik di Blog semoga bermanfaat dn jangan lupa tinggalkan [KOMENTAR] di blog ini, terimakasih.