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:

Drop Down Menu

• 5 Widget yang Wajib Dimiliki Oleh Blogger
• Cara Membuat Menu Horizontal Lavalamp Dengan CSS dan Jquery
• Membuat Drop Down Menu CSS3 di Blogger
• Menaruh Drop Down Menu Dengan Facebook Style
• Menaruh CSS3 Drop Down Menu Dengan CSS
• Membuat Dropdown Menu dengan CSS
• Membuat Horizontal Dropdown Menu di Blog Dengan Jquery

CSS3

• Cara Menghapus Komentar Spam Secara Otomatis
• Cara Membuat Breadcrumbs yang Terindeks Google
• Membuat Widget Recent Post Dengan Thumbnail yang Bisa Berputar
• Cara Membuat Menu Horizontal Lavalamp Dengan CSS dan Jquery
• Cara Membuat Widget Popular Post Warna Warni V.2
• Cara Membuat Widget Popular Post Warna Warni V.3
• Cara Membuat Widget Slidenote / Pesan Notifikasi Untuk Blogger
• Menambahkan Kotak Pada Label Blog Berbentuk Cloud Bagian 2
• Menambahkan Kotak Pada Label Blog Berbentuk Cloud dengan CSS3

Posted in: CSS3,Drop Down Menu