Nah,melanjutkan posting yang kemarin,tentang Cara buat daftar isi blog sederhana dengan tombol geser (otomatis),kali ini ane akan membahas tentang cara membuat menu horizontal sederhana.So pasti sederhana,karena cara buatnya juga simpel,tinggal tambah gadget baru,copy paste dan selesai.contohnya seperti gambar di atas atau bisa lihat demonya
1. Masuk/login di blog anda
2. Klik Rancangan / Tata letak
3. Klik Tambah Gadget
4. Pilih menu HMTL/Javscript
5. Masukan kode di bawah ini ke dalamnya.
<ul class='nav'><li><a href='/'>
Home</a></li> <li><a href='link url anda'>
Menu 1</a></li> <li><a href='link url anda'>
Menu 2</a></li> <li><a href='link url anda'>
Menu 3</a></li> <li><a href='link url anda'>
Menu 4</a></li> <li><a href='link url anda'>
Menu 5</a></li> </ul> <style type="text/css">
.nav
{ background: #EEE; width: 100%; float: left; margin: 0; padding: 0; list-style: none; border-top: 5px solid #CCC }
.nav a
{ position: relative; color: #555; display: block; text-decoration: none }
.nav li
{ float: left; width: auto; border-right: 1px solid #d9d9d9 }
.nav li a
{ font: bold 11px/15px Arial, serif; padding: 10px; text-decoration: none; text-transform: uppercase; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out }
.nav li a:hover
{ background: #CCC; color: #F0A; text-decoration: none; }
</style>
Home</a></li> <li><a href='link url anda'>
Menu 1</a></li> <li><a href='link url anda'>
Menu 2</a></li> <li><a href='link url anda'>
Menu 3</a></li> <li><a href='link url anda'>
Menu 4</a></li> <li><a href='link url anda'>
Menu 5</a></li> </ul> <style type="text/css">
.nav
{ background: #EEE; width: 100%; float: left; margin: 0; padding: 0; list-style: none; border-top: 5px solid #CCC }
.nav a
{ position: relative; color: #555; display: block; text-decoration: none }
.nav li
{ float: left; width: auto; border-right: 1px solid #d9d9d9 }
.nav li a
{ font: bold 11px/15px Arial, serif; padding: 10px; text-decoration: none; text-transform: uppercase; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out }
.nav li a:hover
{ background: #CCC; color: #F0A; text-decoration: none; }
</style>
Note :
- Copy paste kode di atas ke dalam notepad,di sebabkan kurang rapi,
karena bawaan template.
- Ganti tulisan "link url anda " dengan link url sesuai keinginan anda.
Description: cara membuat menu,membuat menu horizontal,membuat menu horizontal sederhana, Rating: 4.5
EmoticonEmoticon