Cara Membuat Menu Horizontal CSS 3D Buttons Di Blog

1.Login Ke Blogger Sobat
2.Click Desain Dan Tata Letak
3.Click Tambah Gadget Dan pilih HTML / Java Script
4.Copy Paste Code Tersebut :

 <style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style>

<div id="navcontainer">

<ul id="navlist">

<li><a href="#"><span>Link 1</span></a></li>

<li><a href="#"><span>Link 2</span></a></li>

<li><a href="#"><span>Link 3</span></a></li>

<li><a href="#"><span>Link 4</span></a></li>

<li><a href="#"><span>Link 5</span></a></li>

<li><a href="#"><span>Link 6</span></a></li>

</ul>

</div>

 - Ganti  # dengan url yang ingin anda pasang di menu, misalnya url homepage, daftar isi, label, dan lain-lain.

- Ganti Link 1, Link 2, Link 3, dan seterusnya dengan nama menu/anchor text sesuai dengan yang anda inginkan, misalnya Home, Daftar Isi, Tips, dan seterusnya.

- Jika ingin menambah/menghapus daftar menu, tambahkan/hapus baris: 

<li><a href="#"><span>Link</span></a></li> sebelum </ul>.

 

Dan DiSave