Breaking News
Loading...

Membuat Menu Horizontal Style di Blog


Trik Blogger kali ini share  membuat menu horizontal, dan langsung saja kita ikuti langkah berikut ini :

1.    Login ke blogger

2.    Pilih tab Design -->> Edit HTML

3.    Cari kode </head>

4.    Kemudian copas kode script di bawah ini sebelum kode tadi


<style type='text/css'>

div#navmenu { margin: 0 0 0 0px; padding: 0; height: 44px; float: left;overflow:hidden;background-color:#323232;width:100%; }
div#navmenu ul { display: block; margin: 0; padding: 0 0 0 2px; height: 44px; float: left; }
div#navmenu ul li { display: block; margin: 0; padding: 0 2px 0 0; float: left; height: 44px; }
div#navmenu ul li a, div#navmenu ul li a:visited {
display: block; margin: 0; padding: 5px 0 0 0; height: 39px; line-height: 39px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px; text-transform: uppercase;
color: #ffffff;float: left;
}
div#navmenu ul li a span, div#navmenu ul li a:visited span {
display: block; float: left; margin: 0; padding: 0 0 0 26px;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a span span, div#navmenu ul li a:visited span span {
display: block; float: left; margin: 0; padding: 0 26px 0 0;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a:hover, div#navmenu ul li.current_page_item a, div#navmenu ul li.current_page a:visited {
color: #ff9600;
background: transparent url(&#39;http://i47.tinypic.com/23rq1vs.jpg&#39;) repeat-x scroll left bottom; text-decoration: none;
}
div#navmenu ul li a:hover span, div#navmenu ul li.current_page_item a span, div#navmenu ul li.current_page_item a:visited span {
background: transparent url(&#39;http://i49.tinypic.com/a4l7hi.jpg&#39;) no-repeat scroll left bottom; text-decoration: none;
color: #ff9600;
}
div#navmenu ul li a:hover span span, div#navmenu ul li.current_page_item a span span, div#navmenu ul li.current_page_item a:visited span span {
background: transparent url(&#39;http://i49.tinypic.com/2nqfle.jpg&#39;) no-repeat scroll right bottom; text-decoration: none;
color: #ff9600;
}

</style>

5.    Simpan template sobat

6.    Pilih tab Page Elemens -->> Add Gadget -->> HTML/Javascript

7.    Copi kode di bawah ini dan pastekan pada gadget sobat

<div id='navmenu'> <ul>

<li class='current_page_item'><a href='http://reaytkj.blogspot.com/'><span><span>Home</span></span></a></li>

<li class='page_item page-item-1'><a href='http;//raytkj.blogspot.com'><span><span>About</span></span></a></li>

<li class='page_item page-item-2'><a href='http;//raytkj.blogspot.com'<span><span>Contact</span></span></a></li> </ul> </div>

Simpan gadget sobat dan lihat hasilnya.

Selamat mencoba
Saya akan menjawab pertanyaan dari sobat jojo "gan log pengn nambahin menunya gmn crnya?

nih caranya. tambahkan kode dibawah ini 

</li> <li class='page_item page-item-1'><a href='http;//raytkj.blogspot.com'><span><span>About</span></span></a></li>
dan letakkan diantara kode </a></li>..dan..<li class='page_item page-item-2'>

jangan lupa ganti alamat url dan about/contact = sesuai keinginan anda.makasih


5 komentar:

  1. Hehe.. info bagus nih.. pagi2 :D ckckck

    BalasHapus
  2. wah bgus infonya ...sngt mmbntu saya..thanks

    BalasHapus
  3. gan log pengn nambahin menunya gmn crnya?

    BalasHapus
  4. sudah saya jawab lihat artikelnya paling bawah..makasih

    BalasHapus
  5. saya mencari keyword dari SE dan menemukan blog Ray Ferdian,,,, ckckck... SEOnya ampuh mas :D

    BalasHapus

Terima kasih sudah mau berkunjung ke Blog sederhana ini, Tidak ada salahnya untuk memberikan komentar untuk kemajuan blog ini.
Catatan komentar yang tidak ditampilkan :
1. Komentar SPAM
2. Komentar tidak bermutu / tidak nyambung.
3. Memasukan Link ke dalam kotak komentar blog.

 
Toggle Footer