cara membuat menu horisontal CSS3 Gradient

Menu horisontal yang akan kita buat kali ini adalah menu horisontal yang akan menggunakan fungsi tombol tombol yang akan kelihatan lebih mewah karena menyatukan CSS3 border-radius, kotak-bayangan, dan gradien linier untuk membuat tombol menu mengkilap ada beberapa pilihan yang bisa kamu pake sebagai tombol menu nya : untuk menggunakan menu horisontal css3 gradien pertama

1. Login ke blogger
2. masuk Rancangan 
3. Edit html >>tip: untuk menjaga kemungkinan gagal download lengkap dulu template 
4. Cari kode ]]></b:skin> lalu letak kan kode css di bawah ini tepat di atas kode ]]></b:skin>

Css3 kode :

<style type="text/css">

.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.gradientbuttons li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.gradientbuttons li a:hover{
color: lightyellow;
}

.redtheme li a{
font-size:18px;
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));
}

.greentheme li a{
font-size:12px;
background: green;
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));
}

.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
}

.orangetheme li a{
font-size:14px;
background: #e55e3f;
background: -moz-linear-gradient(center top, #ecad9a, #e5937c 25%, #cf4c2a 45%, #e5937c 85%, #ecad9a);
background: -webkit-gradient(linear, center top, center bottom, from(#ecad9a), color-stop(25%, #e5937c), color-stop(45%, #cf4c2a), color-stop(85%, #e5937c), to(#ecad9a));
}

</style>

5. save template
     Dan untuk pemanggilan kode Html nya sobat bisa pilih di antara  contoh 3 menu di bawah ini

1. Untuk Contoh menu Garadien

<div class="gradientbuttons"align="center">
 <ul>
 <li><a href="Link yang di tuju">Home</a></li>
 <li><a href="Link yang di tuju">DHTML</a></li>
 <li><a href="Link yang di tuju">CSS</a></li>
 <li><a href="Link yang di tuju">Forums</a></li>
 <li><a href="Link yang di tuju">Gif Optimizer</a></li>
 </ul>
 </div>

2. Untuk Contoh menu redtheme

div class="gradientbuttons redtheme"align="center">
<ul>
<li><a href="Link yang di tuju">Home</a></li>
<li><a href="Link yang di tuju">DHTML</a></li>
<li><a href="Link yang di tuju">CSS</a></li>
<li><a href="Link yang di tuju">Forums</a></li>
<li><a href="Link yang di tuju">Gif Optimizer</a></li>
</ul>
</div>

3. Untuk Contoh menu greentheme

<div class="gradientbuttons greentheme"align="center">
<ul>
<li><a href="Link yang di tuju">Home</a></li>
<li><a href="Link yang di tuju">DHTML</a></li>
<li><a href="Link yang di tuju">CSS</a></li>
<li><a href="Link yang di tuju">Forums</a></li>
<li><a href="Link yang di tuju">Gif Optimizer</a></li>
</ul>
</div>

Dan untuk melihat semua Contoh menu di atas silahkan di lihat di blog demonya disini

Oke selamat mencoba dengan menu menu horisontal css3 gradient semoga berhasil

Judul Artikel :cara membuat menu horisontal CSS3 Gradient

Terima Kasih Sobat sudah membaca Artikel saya Tentang cara membuat menu horisontal CSS3 Gradient Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih