Selasa, 09 September 2014

Membuat Menu Bar pada Blog

Unknown 02.21 , Tidak ada komentar :
Berbicara tentang menu,  sebenarnya ada beberapa type menu yang bisa kita gunakan, namun disini saya akan coba jelaskan tentang  menu horizontal yang kebetulan sering saya gunakan di dalam blog maupun ketika kita belajar membuat sebuah halaman website, berikut adalah contoh gambar menu tersebut :

Dalam membuat menu di blog ini saya menggunakan dua file yakni yang pertama menggunakan file html dan di dukung dengan css untuk membuat tampilannya menjadi lebih menarik, untuk membuat menu di blog ini ada beberapa tahapan berikut tahapan tahapan tersebut :
  1. Silahkan copy dan paste kode berikut kedalam notepad++ atau editor yang serupa kemudian simpan dengan file index.html.
?
1
2
3
4
5
6
7
8
9
<div id="menu">
<ul>
    <li><a href="#">home</a></li>
    <li><a href="#">profil</a></li>
    <li><a href="#">galeri</a></li>
    <li><a href="#">contack Us</a></li>
    <li><a href="#">about Us</a></li>
</ul>
</div>
Dari scrip di atas akan coba saya jelaskan file yang ada didalam tag <head>—</head> adalah file yang digunakan untuk memanggil file css yang disitu dinamakan file css.css untuk nama file css.css ini bebas tergatung dari pembuatan sobat bisa menggunakan filecss.css ataupun nama yang lainnya.
Sedangkan untuk file yang di buka dengan tag <div id=”menu”> merupakan file yang akan digunakan untuk membuat menu tersebut.
nah sekarang coba anda simpan dan jalankan maka akan terlihat seperti pada gambar dibawah ini
localhost poting cara membuat menu di blog
nah setelah tampil seperti di gambar di atas maka kita sudah berhasil membuat menu, namun  masih terlihat kurang manis jika menu tersebut hanya polos seperti gambar di atas, maka kita tambahkan css agar terlihat lebih menarik.
silahkan copy scrip berikut di notepad++ dan simpan denagn nama css.css
?
1
2
3
4
5
6
#menu{
background:none;
width:940px;
color: white;
margin: 0px auto;
}
nah sekarang coba anda jalankan file index.html di browser maka akan trlihat gambar seperti dibawah ini :
localhost poting 1 cara membuat menu di blog
masih terlihat kurang bagus maka kita tambahkan lagi file css berikut
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
#menu ul{
background: black;
width: 940x;
padding: 10px;
 
}
#menu li{
width: 940x;
padding: 10px;
display: inline;
 
}
#menu a{
color: white;
text-decoration: none;
}
#menu a:hover{
text-decoration: underline;
 
}
maka akan tampil seperti gambar berikut
localhost poting 2 580x41 cara membuat menu di blog

untuk memasang di blogspot anda hanya perlu mengambil scrip yang ada didalam <div id=”menu”></div> dan cssnya
jika anda kurang jelas dengan penjelasan tentang cara membuat menu di blog tersebut silahkan koment di bawah ini saya akan coba jelaskan kembali, terimakasih semoga bermanfaat

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )