Cara Pasang CSS Menu di Navbar Footer

Oleh Ade Sanusi

7.20.2008

Bagikan :

Tweet

Cara menampilkan Menu di [Navbar Footer] seperti di Blog ini [Dunia-Blogger] waktu chat ngobrol-ngobrol dan berikut saya buatkan Tutorialnya...!!! Tapi Sebelumnya Blog kita harus memiliki [Navbar Footer] untuk membuatnya silahkan Baca Artikel Mas Mizwar di http://kursus-blog.blogspot.com/2008/07/cara-bikin-footer-navbar.html nah jika Sudah berhasil Silahkan Ikuti Tutorial berikut ini....

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 Copy Paste 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; }

Dan 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://dunia-blogger.blogspot.com/search/label/Blog' title='Blog Tips and Trik'>BLOG</a></li>
            <li><a href='http://dunia-blogger.blogspot.com/search/label/Bisnis'>Bisnis</a></li>
            <li><a href='http://dunia-blogger.blogspot.com/search/label/Tips%20and%20Trik'>Tips and Trik</a></li>
           
<li><a Title='HTML Code dan Tutorial' href='http://dunia-blogger.blogspot.com/search/label/HTML'>HTML</a></li>
            <li><a href='http://secuil-kata.blogspot.com' target='new' title='Secuil Kata'>Secuil Kata</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... gak di isi Juga gak apa apa....
b] Kode yang Garis bawah warna Biru itu Adalah... Url menu yang di tuju... silahkan Ganti dengan selera teman teman semua...
c] Yang warna Ungu merupakan  Tampilan menunya silahkan Ganti menu yang mau ditampilkan apa saja.....

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... 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 Mencoba, oh ya artikel Ini Di Posting pukul 8 lewat 8 tanggal 8 bulan 8 tahun 08 he he

.

Tag : Berita dan Request, Tips and Trik