Thursday, April 21, 2011

Membuat Menu pada blog

Pada entri ini saya akan membahas toturial cara membuat menu horizontal pada blog ini seperti pada menu blog saya ..hehehee....biasanya menambahkan menu kita perlu dengan cara rancangan atau hack template tapi kali ini tidak,,hanya dengan menambah gadget seperti yang ada pada elemen laman.... ya sudah tak perlu banyak basa basi,,langsung ke topik pembicaraan,,
lihat contoh menu tersebut :

langkah - langkahnya sebagai berikut :

1.log in ke blogger,pilih design-->>page element
2.klik pada add gadget--->>pilih HTML/Javascript
3.kemudian copastekan  kode menu horizontal anda dibawah 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> </ul> </div>
4.kemudian save ,kemudian seret gadget HTML/Javascript ke bawah header,,,akhirnya  jrengggg.... :)

catatan : 

Untuk memasukkan link anda perlu mengedit bagian ini pada kode diatas:
  <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>

  Pada tanda "#"   : ganti dengan Url link anda
  pada tanda Link 1,Link2,Link3 dan Link 4 : ganti dengan nama judul yang sesuai dengan keinginanmu

contoh :
 
<li><a href="http://dimedan.blogspot.com" ><span>menu</span></a></li>
<li><a href="http://dimedan.blogspot.com" ><span>contact</span></a></li>

 lihat contohnya pada tampilan menu blog saya
sekian dulu artikel ini ,,,terima kasih.....................................!!!!

0 komentar:

Post a Comment

Lowongan kerja Medan 2012 :

 
Design by blogger Themes | Bloggerized by agroy - Berita anak medan | Best By blogger