Cara Membuat Horizontal Menu Dengan CSS

Banyak yang membayangkan membuat atau menaruh horizontal adalah hal yang sulit bahkan teramat sulit sekali. Padahal caranya mudah jika kita mengikuti langkah-langkahnya satu persatu. Terlebih lagi horizontal menu memiliki fungsi yang sangat penting, Tntunya selain dapat menghemat space  blog kita, dengan menggunakan horizontal menu akan semakin membuat tampilan blog kita semakin menarik.

Dan di tutorial kali ini saya akan membagikan sebuah tutorial tentang cara menaruh horizontal menu di dalam blog. Di beberapa postingan sebelumnya saya pernah membagikan cara ini, kamu bisa lihat lebih lengkapnya di daftar isi blog. 

Oh iya, horizontal menu ini di buat oleh dynamicdrive. Oke langsung saja jika kamu tertarik untuk membuat bisa kamu lihat caranya di bawah ini.

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode CSS di bawah ini.

<style type="text/css">

/* Horizontal Menu untuk Blogger By http://www.hzndi.blogspot.com/ */

div.topbar {
 height: 16px;
 background: #e16031;
}

ul.claybricks {
 font-weight: bold;
 width: 100%;
 background: #e3e490;
 padding: 6px 0 6px 0;
 margin: 0;
 text-align: left;
        font-family: calibri;
}

ul.claybricks li {
 display: inline;
}

ul.claybricks li a {
 color: black;
 padding: 6px 8px 4px 8px;
 margin-right: 20px;
 text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected {
 color: white;
 background: #5d4137;
 background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
 background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
 -moz-box-shadow: 0 0 5px #595959;
 -webkit-box-shadow: 0 0 5px #595959;
 box-shadow: 0 0 5px #595959;
 padding-top: 17px;
 padding-bottom: 6px;
}

/* http://hzndi.blogspot.com */

</style>
<div class="topbar">
</div>
<ul class="claybricks">
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
</ul>

3. Letakkan Widget di bawah header blog.

4. Simpan template dan lihat hasilnya.

Postingan Terkait:

Posted in: CSS3,Drop Down Menu