Cara Membuat Menu Horizontal dengan CSS dan HTML di blogger

Masih seputar menu yang kang Roni dulu pernah share Cara Paling Mudah Buat Menu Navigasi Dropdown dan sekarang kang Roni juga share lagi tentang menu yang kayaknya lebih keren,lihat aja judulnya
Cara Membuat Menu Horizontal dengan CSS dan HTML di blogger
Menu Horizontal adalah menu yang mendatar seperti halnya milik kang Roni di atas (kalo belum di hapus,sebab kang Roni sukanya utak atik blog sampai-sampai amburadul semua,lihat aja kayak gini jadinya..hixhixhixxxx....)sengaja kang Roni tidak memberi demo gambarnya karena untuk meringankan blog agar lebih seo and Naikkan pagerank yang dari dulu masih nol aja.

Perlu sobat ketahui keunggulan menu css adalah tidak terlalu membuat berat loading blog,berbeda dengan menu yang menggunakan kode javascript meski lebih keren dan cantik akan tetapi membuat loading blog lebih berat.

Langkah Membuat Menu Horizontal dengan CSS dan HTML

1.Login Blogger.com
2.Rancangan --> Edit HTML
3.Download template lengkap untuk keamanan bila terjadi kesalahan edit
4.Centang kotak Expand Template Widget untuk menampilkan semua kode template
5.Cari kode ]]></b:skin>
Dan masukkan kode css dibawah ini tepat diatas kode tadi

/* 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;
}

6.Selanjutnya kita terapkan kode HTML nya.

Cari kode seperti ini <div id='content-wrapper'>
atau kode seperti ini <div id='outer-wrapper'>

karena setiap template berbeda-beda jadi sobat sesuaikan aja untuk mencari kodenya,
kalo sudah ketemu letakkan kode dibawah ini tepat di atasnya

<div id='menu'>
<ul id='pagenav'>
<li><a href='http://roningasinanblog.blogspot.com/' title='Home'>Home</a></li>
<li><a href='http://roningasinanblog.blogspot.com/' title='About'>About</a></li>
<li><a href='http://roningasinanblog.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='http://roningasinanblog.blogspot.com/' title='Link'>Link</a></li>
<li><a href='http://roningasinanblog.blogspot.com/' title='Archive'>Archive</a></li>
<li><a href='http://roningasinanblog.blogspot.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://roningasinanblog.blogspot.com/' target='_blank' title='Aggregator'>Aggregator</a></li>
<li><a href='http://roningasinanblog.blogspot.com/' title='Bottom'>Bottom</a></li>
</ul>
</div>

7.Save template sobat dan blablabla Menu Horizontal dengan CSS dan HTML nya udah jadi.

Kalau mau mengubah warna,lebar,tinggi dan font stylenya silahkan sobat ubah kode cssnya ini

font-family: Arial, "Trebuchet MS", Verdana, Tahoma;
width: 988px;
height: 28px;
background: #eee;

dan jangan lupa link http://roningasinanblog.blogspot.com/ di ganti dengan link sobat,dan text anchornya seperti HOME,ABOUT,CONTACT..

Selamat berkreasi semoga sukses

Related Post:

8 comments:

Aldo said...

kalo ga ada div id gimana donk??

roni said...

Coba diteliti lagi apakah sobat udah memberi centang pada kotak Expand Template Widget

dan cara mencari kode yang tepat yaitu dengan menekan tombol F3,setelah itu akan keluar kotak pencarian dibawah bila menggunakan browser firefox dan pojok kanan atas bila menggunakan google crome
setelah itu masukkan salah satu kode pada langkah nomor enam diatas pada kotak yang keluar tadi.

roni said...

Bila tidak ada juga (kode div id) sobat kembali aja kehalaman Rancangan kemudian klik Tambah gadget ditempat yang sobat kehendaki kemudian pilih HTML/JavaScript lalu masukkan kodenya dijamin jadideh.....bila masih bermasalah juga kangroni siap bantu lagi jangan kawatir....oke

N.A_dj said...

masihh bingung

roni said...

Lakukan dengan pelan2 saja pasti bisa

ASSAMEDA terminal digital said...

kog punyaku jadinya vertikal ? div nya gak ketemu
gmn ???? mpe pusinng aq..

ASSAMEDA terminal digital said...

siip,akhirnya jadi,.. pusing nyari div,. enak langsung tambah gadget,. jadi langsung,. bs horisontal beneran,. thanks

roni said...

Sama2 and thanks atas kunjungannya

Post a Comment