0 Cara Mudah Membuat Menu Horizontal Menggunakan CSS3 Untuk Blogger

Setiap blog / situs harus memiliki menu horizontal / vertikal di atas blog yang membantu pembaca dengan mudah menavigasi blog Anda, juga membantu Anda untuk mengatur link penting  pada menu.hari ini saya berbagi menu horizontal yang bagus yang bekerja  murni  dengan  CSS3 yang dirancang oleh dynamicdrive.

Live Menu Demo ▼

• Home
• CSS Codes
• Forums
• JavaScript
• Gallery
• Blogger Widgets

Cara Tambah menu ini Untuk Blogger?

Pergi ke Blogger Dashboard> Layout
Klik Pada Tambah Tab Link Gadget (bawah Header)
Paste Kode Dan Simpan Ini.

Click On Image To Enlarge

<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://draftbloger.blogspot.com/">Blogger Widgets</a></li>

</ul>

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

Akhirnya simpan dan selesai :)