Cara Membuat Menu Horizontal di Blogger Dengan CSS dan HTML

Niammuddin Mz Februari 20, 2014

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 komentar :

Reader's Comments

  1. Dika28 September 2011 pukul 19.52

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

    BalasHapus
  2. Rhynnierhyme19 November 2011 pukul 00.39

    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.

    BalasHapus
  3. Admin (niamblog)19 November 2011 pukul 01.48

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

    selamat mencoba :D

    BalasHapus
  4. Rizal19 November 2011 pukul 19.22

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

    BalasHapus
  5. Admin (niamblog)19 November 2011 pukul 19.43

    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

    BalasHapus
  6. Fuad XP30 November 2011 pukul 22.23

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

    BalasHapus
  7. Admin (niamblog)30 November 2011 pukul 22.27

    gak tepat gmana, bisa dicontohkan blognya

    BalasHapus
  8. simon13 Juli 2015 pukul 03.44

    Terima kasih atas berbagi ilmunya.

    BalasHapus