Cara Membuat Menu Horizontal di Blogger Dengan CSS dan HTML

Oleh: Pada: 17 April, 2018
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.