Rabu, 27 Juli 2011

Cara Pasang CSS Menu di Navbar Foote




Untuk menambahkan ke dalam Navbar Footer, Pertama kita Harus Membuat CSS Menu... untuk Membuatnya silahkan kunjungi http://cssmenumaker.com/ dan pasang kodenya di Blog kita.... atau jika gak mau ribet silahkan masukan Kode di bawah Ini:
  


/* Menu Navigation ----------------------------------------------- */ #menu{ height:2.2em; line-height:2.2em; margin:0; background:#000000; color:#00FF00; }  #menu li{ float:left; list-style:none; border-right:1px solid #ffffFF; }  #menu li a{ display:block; padding:0 10px; font-size:0.8em; font-weight:bold; text-transform:uppercase; text-decoration:none; background-color:inherit; color: #ffffff; } * html #menu a {width:1%;} #menu .selected,#menu a:hover{ background:#00FF00; color:#ffffff; text-decoration:none; } 




Pasang Kode Tersebut di bawah kode:



#header img {

  margin-$startSide: auto;

  margin-$endSide: auto;

}




Atau jika gak mau Pusing silahkan pasang di Atas kode ]]></b:skin>

Nah Jika Selasai... Sekarang Copy Kode Menu di bawah Ini:



      <div id='menu'>
       
        <ul>
            <li><a href='/' title='Home'>HOME</a></li>

                        <li><a href='http://URL-anda.blogspot.com/search/label/Blog' title='Blog Tips and Trik'>Blog</a></li>
            <li><a href='
http://URL-anda.blogspot.com/search/label/healthy'>Healthy</a></li>
            <li><a href='
http://URL-anda.blogspot.com/search/label/tips and trick'>Tips and Trik</a></li>
           
<li><a Title='HTML Code dan Tutorial' href='
http://URL-anda.blogspot.com/search/label/tutorial'>Tutorial</a></li>
            <li><a href='http://URL-yang-dituju.blogspot.com' target='new' title='Label'>Label</a></li>
        </ul>

    </div>



Kemudian Simpan Di Notepad/Microsoft Word: Karena ada beberapa hal yang perlu di Rubah yaitu:




a] Kode yang Warna merah Adalah Judul menu...

b] Kode yang Garis bawah warna Biru itu Adalah... Url menu yang di tuju... silahkan Ganti dengan selera sobat semua...

c] Yang warna Pink merupakan  Tampilan menunya silahkan Ganti menu yang mau ditampilkan apa saja.....


d] Yang warna coklat itu URL tujuan sobat, terserah sobat mau buat link kawan / buat apa,, terserah aja. emang gw pikirin :D hehehe



Nah... sekarang Saatnya memasang Kode di atas hasil editan kita jangan lupa Backup yah... dan Masuk Ke [Layout] - [Edit HTML] dan Pasang kode di atas letakan diantara kode  <div id='navbar-footer'> dan </div>



Nah Selamat Mencoba Semoga berhasil...  oiya jgn lupa gunakan Kode <center>    </center> Supaya posisinya Berada di tengah... misalnya:



<div id='navbar-footer'>

 <center>



Kode yang mau di Tampilkan



 </center>

</div>



Silahkan lihat Contohnya,,,,,














Selamat Bereksperimen,, Jika tidak berhasil juga,, Hub 911... :D..








Tidak ada komentar:

Posting Komentar