cara membuat menu di blog
Cara Membuat Menu di blog,
apa yang di maksud dengan menu… ..? menu merupakan suatu pilihan,
ketika kita akan sarapan di rumah makan maka di sana terdapat beberapa
menu, begitu pula di dalam blog, jadi ketika kita berkunjung di blog
dan menemukan beberapa menu maka blog tersebut menyediakan beberapa
pilihan yang di sediakan oleh blog itu sendiri.
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 :
- 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
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 :
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;} |
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
0 komentar:
Posting Komentar