Kamis, 20 Februari 2014

Cara Membuat Menu Horizontal di Blogger Dengan CSS dan HTML

Tags


Cara membuat menu horizontal di blogger

Salam blogger buat kawan blogger semuanya yang mungkin sedang belajar ngeblog, mari kita belajar sama-sama, pelajaran blog untuk pemula kali ini adalah membuat menu horizontal, apa itu menu hiri zontal ? menu horizontal yaitu menu yang terlihat secara mendatar contoh seperti menu di website vivanews.com, metrotvnerws.com, detik.com dan blog saya ini.




Langkah-langkah membuat menu di blog, sederhana sekali, kali ini saya akan mengajarkan cara membuatnya dengan menggunakan bahasa html dan css saja supaya lebih mudah dipahami dan dipelajari oke.


Langkah1
Masuk dasboard >> tataletak >> edit HTML

Langkah2
{code type=xml}
Cari kode seperti ini : ]]>
{/code}
Dan masukkan kode css dibawah ini tepat diatas kode tadi
{code type=css}
/* css menu */
#menu {
font-family: Arial, "Trebuchet MS", Verdana, Tahoma;
width: 988px;
height: 28px;
background: #eee;
}
#pagenav {
display: block;
font-weight: bold;
font-size:11px;
color: #fff;
margin: 0 0 5px 0;
padding: 0 0 0 10px;
height: 28px;
line-height: 28px;
list-style-type: none;
position: relative;
}
#pagenav li {
float: left;
color:#ffffff;
}
#pagenav li a {
height:20px;
line-height:20px;
font-size:10px;
font-weight:bold;
padding: 0 6px 0 6px;
text-transform:uppercase;
}
#pagenav .current_page_item a {
color:#FFF;
}
#pagenav .current_page_item a:hover {
color:#FFF;
}
{/code}
Langka3
Sekarang tahap menerapkan kode htmlnya.
{code type=html}
cari kode seperti ini:
atau seperti ini :

{/code}
setiap template berbeda-beda kodenya, jadi kamu sesuaikan sendiri.
Lalu masukkan kode dibawah ini tepat di atasnya
{code type=html}

{/code}
Langkah4
Save template sobat dan lihat hasilnya.
Untuk warna dan lebar tinggi dan font stylenya silahkan ubah kode cssnya ini
{code type=html}
font-family: Arial, "Trebuchet MS", Verdana, Tahoma;
width: 988px;
height: 28px;
background: #eee;
{/code}
Sesuai template blog kamu supaya lebih serasi dan halus.
untuk linknya silahkan ganti link : / dengan link kamu sendiri, dan juga text anchornya. seperti home, about, contact.

Selamat mencoba dan semoga berhasil.

8 comments

Ga ada yang berubah???????????????????

Thanks buat tutorialnya...
btw, boleh nanya gak?

tuh kan udah selesai semua tuh tempelate-nya di copas. Cuma, pas udah di save, menu-nya itu terlalu di kiri. kalau menunya mau dikasih agak ke tengah caranya gimana ya?

kode mananya yang diubah?

makasih sebelumnya.

itukan ada kode seperti ini
float: left;
ganti dengan
float: center;
dan tambahkan kode ini dibawahnya
text-align:center;

selamat mencoba :D

kalo ganti warna backgroundnya gmn,sama ganti warna fontnya pusing pake kode warna,,trus cara memperbesar fontnya gmn?? coba cek nih krikilgames.blogspot.com

ubah ukuran font, silahkan ubah nilai dari font-size:10px jadi 12px misalnya... maka ukurannya jadi lebih besara, untuk backgroundnya ganti kode background misal putih #FFFFFF

Nah,ini nih dari sekian yang saya cari,yang berhasil ini,,tapii posisinya ga tepat,gmna gantinya yaa??

gak tepat gmana, bisa dicontohkan blognya

Terima kasih atas berbagi ilmunya.