Horizontal menu Hanya Menggunakan CSS3 Untuk Blogger

Setiap blog / situs web harus 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.Today saya berbagi menu horisontal indah yang bekerja dengan murni CSS3 dan dirancang oleh dynamicdrive Ketika melayang setiap pengguna di atasnya batu bata muncul pada link yang meningkatkan keindahan menu, saya juga sangat suka :) Seperti yang saya sebutkan keuntungan terbesar dari menu ini. bekerja dengan hanya CSS3 , tidak ada gambar apapun tunggal digunakan dalam menu ini juga bata melayang-layang terbuat dengan CSS3.As bekerja dengan CSS3 hanya memiliki beberapa limitations.Here 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.Now tanpa menunggu lagi mari kita pergi ke tutorial.See preview menu di bawah gambar. 

1. Pergi ke Blogger Dashboard> Layout
2. Klik Pada Menambahkan Tab Link Gadget (Di bawah header)
3. Paste Kode Dan Simpan Hal.

Copy :

<style type="text/css">

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

</style>

<div class="topbar">

</div>

<ul class="claybricks">

 <li><a href="http://www.helperblogger.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.helperblogger.com/">Blogger Widgets</a></li>

</ul>

Sekarang ganti link dan nama link dengan Anda sendiri di baris di atas disorot.

Akhirnya simpan dan Anda selesai :)