Cara Membuat Menu Horizontal CSS 3D Button Blog

Tuesday, October 16, 2012

You are Here > Home > tips , tips blog > Cara Membuat Menu Horizontal CSS 3D Button Blog

Cara Membuat Menu Horizontal CSS 3D Button Blog

ECHO 17 - Menu/navigasi horizontal Blogger/Blogspot ini juga dibuat dengan HTML dan CSS murni tanpa sentuhan javascript maupun jquery., sama seperti menu/navigasi horizontal sebelumnya. Cara membuat dan memasangnya pun sangat sederhana dan tanpa mengedit template HTML, karena aturan CSS saya buat menyatu dengan HTML nya.

Cara membuat/memasang widget horizontal menu/mavigation 3d button Blogger/Blogspot:

1. Copy dan edit kode di bawah ini:

 <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>.

2. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

3. Setelah pop up window muncul, pilih opsi HTML/Javascript

4. Kemudian masukkan Kode yang sudah diedit tersebut ke kolom configure HTML/Javascript.

5. Klik save.

6. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget).

7. Save lagi.

8. Done! menu/navigasi horizontal Blog Blogger anda siap digunakan.

Judul: Cara Membuat Menu Horizontal CSS 3D Button Blog; Ditulis oleh echo sd; Rating Blog: 5 dari 5

Baca Juga Yang Ini, Seru Loo!!

tips blog