Horizontal Menu Hanya Menggunakan CSS3

Setiap blog / situs web harus dan wajib memiliki menu horizontal / vertikal di atas blog yang membantu pembaca untuk dengan mudah menavigasi melalui blog Anda, juga membantu Anda untuk mengatur link penting Anda pada menu. Sekarang saya akan berbagi menu horisontal indah yang bekerja murni dengan CSS3 dan dirancang oleh dynamicdrive.

Ketika melayang setiap menu di atasnya akan muncul batu bata pada link yang meningkatkan keindahan menu ini, saya juga sangat suka :) Seperti yang saya sebutkan keuntungan terbesar dari menu ini adalah bekerja dengan hanya CSS3 , tidak ada gambar apapun tunggal digunakan dalam menu ini juga bata melayang-layang terbuat dengan CSS3. Bekerja dengan CSS3 hanya memiliki beberapa limitations. Jadi adalah satu gol dari titik menu ini bukan menu drop down itu adalah tunggal horisontal menu: ( Hal ini baik untuk blog kecil yang memiliki jumlah kurang dari links. Jadi tanpa menunggu lagi mari kita lansung bahas Horizontal Menu Horizontal Menu Hanya Menggunakan CSS3, sebelumnya lihat dulu demonya di bawah ini.

Live Menu Demo ▼

---

Cara Membuat Horizontal Menu Horizontal Menu Hanya Menggunakan CSS3

---

Berikut ini adalah Cara Membuat Horizontal Menu Horizontal Menu Hanya Menggunakan CSS3 yang sangat mudah dan simple. Silahkan ikuti petunjuk untuk mulai memasangnya pada blogger Anda.

1. Login ke Akun blogger Anda.

2. Pada Dabor klick Tata Letak ➨ Tambah Gadget ➨ Pilih elemen HTML/Java Script.

3. Penempatan Gadget tersebut seperti gambar berikut.

4. Sekarang copy kode berikut ini dan paste atau letakkan di elemen HTML/Java Script tadi.

tambah gadget

<style type="text/css">

/* Only CSS3 Horizontal Menu For Blogger By http://www.otowebsite.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;
}

/* Only CSS3 Horizontal Menu For Blogger By http://www.otowebsite.blogspot.com/ */

</style>



<div class="topbar">
</div>
<ul class="claybricks">
 <li><a href="http://www.otowebsite.blogspot.com/">Home</a></li>
 <li><a href="#">CSS Codes</a></li>
 <li><a href="#">Forums</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">Gallery</a></li>
 <li><a href="http://www.otowebsite.blogspot.com/">Blogger Widgets</a></li>
</ul>

5. Simpan.

Dari kode di atas ada yang beberapa kode yang harus Anda ganti.

• Ganti teks yang di block merah dengan Url/Link Anda.
• Ganti teks yang di block hijau dengan nama menu Anda.

Saya rasa cukup untuk kali ini silahkan tinggalakan tanggapan atau komentar Anda tentang tutorial di atas.