2 Membuat Menu Navigation Horizontal Sliding Door

Oleh sabia | Rabu, Juni 22, 2011 | Tags:
  Untuk mempermudah pencarian topik, setiap web atau blog biasanya memasang  label dan menu navigasi dalam halamannya . Tetapi yang akan saya tulis kali ini adalah cara membuat menu navigasi, karena kalau untuk label, dalam blogspot pihak blogger telah menyediakannya .


  Menu navigasi yang saya buat ini dinamakan " Navigasi Sliding Door ". Saya menggunakan aplikasi CSS tab Designer untuk membuatnya . Jadi disini cuma share saja dan ada beberapa kode CSS yang sedikit saya rubah .

Menu Sliding Door

Pertama simpan kedua image di bawah ketempat penyimpanan online :






Keterangan Gambar :
Dalam image diatas terdapat 3 warna, warna yang atas tampil ketika pengunjung datang ke halaman web atau blog, warna yang tengah akan muncul ketika pointer mouse di arahkan atau diletakan diatas menu atau sebagai hover, sedangkan warna yang bawah menunjukkan menu yang aktif di halaman tersebut atau ketika mouse di klik .

Kemudian masuk dalam Edit HTML di blog .
Jangan Centang Expand Template Widget .

Copy kode berikut ini :


<div id="navigation">
<ul>
                             
<li id="current"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Tutorial</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Javascript</span></a></li>
<li><a href="#"><span>Tentang Saya</span></a></li>

</ul>
</div>


Pastekan di antara  <body> dan </body>.

Sekarang membuat kode untuk style dari menu itu, tentunya ini menggunakan CSS .

Copy kode css dibawah :


#navigation {
       margin-left:5px;
       float:left;
        border-bottom: 1px solid #A1A1A1;
        margin: 1em 0 0;
        padding: 0.6em 0 0;
        font-weight: bold;
}
#navigation ul, #navigation ul li {
        list-style: none;
        margin: 0;
        padding: 0;
}
#navigation ul {
        padding: 5px 0 5px;
        text-align: center;
}
#navigation ul li {
        display: inline;
}
#navigation ul li a {
        background: url(http://alamat gambar/tableft.gif) no-repeat left top;
        color: #FFF;
        text-decoration: none;
        padding: 5px 0;
}
#navigation ul li span {
        background: url(http://alamat gambar/tabright.gif) no-repeat right top;
        padding: 5px 7px 5px 3px;
        margin: 4px 0 4px 4px;
}
#navigation ul li a:hover span {
        text-decoration: none;
        background-position: 100% -75px;
}
#navigation ul li a:hover {
        background-position: 0 -75px;
}
#navigation #current a {
        background-position: 0 -150px;
}
#navigation #current a span {
        background-position: 100% -150px;
}



Kemudian pastekan diantara tag <head> dan </head> , atau kalau dalam blogspot diatas kode ini ]]></b:skin> .

Setelah selesai semuanya tekan tombol supaya perubahan yang terjadi disimpan dan di proses oleh mesin blogger .




KOLOM TUTORIAL BELAJAR
Garut, 22 Juni 20011

Ada 2 komentar Untuk: Membuat Menu Navigation Horizontal Sliding Door

Manusia es Menuliskan komentarnya pada hari, Jumat, Januari 27, 2012

(http://alamat gambar/tableft.gif)???
maksudnya diisi pkai almt dr mna?
visit my blog:http://myindolife45.blogspot.com/

Manusia es Menuliskan komentarnya pada hari, Jumat, Januari 27, 2012

(http://alamat gambar/tableft.gif)???
maksudnya diisi pkai almt dr mna?
visit my blog:http://myindolife45.blogspot.com/

Posting Komentar Untuk Artikel Ini :