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 :
Silahkan copy dan paste kode berikut kedalam notepad++ atau editor yang serupa kemudian simpan dengan file index.html.
Dari scrip di atas akan coba saya jelaskan file yang ada didalam tag — 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
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
#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 :
#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
Untuk memasang di blogspot anda hanya perlu mengambil scrip yang ada didalam
dan cssnya
Terimakasih semoga bermanfaat..
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
#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 :
#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
Untuk memasang di blogspot anda hanya perlu mengambil scrip yang ada didalam
dan cssnya
Terimakasih semoga bermanfaat..
Tidak ada komentar:
Posting Komentar