Cara Mudah Membuat Menu Horizontal Di Blog

Viyan Pradita Jumat, April 15, 2011

Postingan saya kali ini akan membahas tentang bagaimana membuat menu horizontal di blog. menu horizontal sangatlah penting dalam sebuah blog, jadi wajib kiranya menu blog ini ada di blog kita, karena sangat berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu. Biasanya pada template standart blog ada yang belum terpasang menu horizontal, Buat Blogger yang pada template-nya belum tersedia menu horizontal, sobat bisa menambahkan dengan cara berikut ini (ini cara simple-nya)

Screenshot


Langkah-langkahnya:
  • Login ke akun blogger sobat
  • Masuk Rancangan/Layout
  • Edit HTML
  • Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
  • Beri tanda centang "Expand Template Widget"
  • Carilah Kode Dibawah ini:
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
  • Jika sudah ketemu, silahkan copy paste kode berikut tepat dibawah kode-kode pada langkah diatas
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>
  • Lalu Simpan Template.
  • Lanjut lagi sob... kalo dilihat pasti menunya bukan horisontal tapi vertikal, hehee.. Nah untuk itu kita perlu menambahkan kode css, agar menu menjadi horisontal dan lebih menarik tentunya.
  • Masih pada bagian Edit HTML, dan carilah kode: ]]></b:skin>
  • Lalu copy paste kode dibawah ini tepat diatas kode: ]]></b:skin>
/*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}

Keterangan:
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.

  • Setelah itu sobat jg perlu merubah pada kode berikut (ini kode pada langkah diatas):
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>
Sobat Ubah Menjadi:
<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Tutorial Website</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div>
Keterangan:
Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. begitu jg seterusnya.

  • Simpan template dan lihat hasilnya.

Selamat mencoba dan semoga bermanfaat.

Ditulis Oleh :

Artikel Cara Mudah Membuat Menu Horizontal Di Blog ini dipublish pada hari: Jumat, April 15, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

17 komentar
Terjun Ke Kolom Komentar

  1. waaah... k'ren nih sob.

    Mantaaaap...
    Lanjutkan.

    BalasHapus
  2. coba dl ah mg2 bisa...http://biancocupido.blogspot.com/

    BalasHapus
  3. @Slazh raY va: sip bro.. thank yaa, salam kenal

    @bianco: Seeppp, silahkan sob :)

    BalasHapus
  4. gan ,
    minta link download template ini donk ,, ! :D

    BalasHapus
  5. @IX-8 BLOG: Waduh.. ini juga hasil coding2 sendiri sob?? Mau nyari link dunlud dmn, juga gak bakal nemu :))
    Kebetulan saya juga baru ganti template sob. :)

    BalasHapus
  6. @viyan : oke gan ,, !
    pingindd buat template yg kaya gini juga :D ,,,

    makasih info.a :)

    BalasHapus
  7. gimana caranya mengedit menu horizontal dari template yang kita download gan ?? dan bagaimana cara me-link-kannya dengan label/kategori tulisan yang kita buat ??

    BalasHapus
  8. @IX-8 BLOG: Ok... maaf sebelumya lo sob :)

    @Catatanku: Bisa saja sob, tinggal ganti kode CSS dan HTML yg ada di templte yg sobat dunlud, dengan kode CSS dan HTML menu horisontal yg ingin sobat pasang.
    Terus untuk meng-linkkan dengan label/kategori tiggal copy-paste link label/kategori-nya dan taruh sesuai dengan nama label di menu horisontalnya. Bila masih bingung, sobat bisa lihat "keterangan" pd postingan diatas.

    BalasHapus
  9. kode yg ini gag ketemu gan



    sudah cari pake ctrl + f tetep aja...:)]

    BalasHapus
  10. kok g kelihat ?
    maksud saya kode no 1

    BalasHapus
  11. @Catatanku: Sama2 Sob :)

    @fen32: Diblog sobat kan udah ada menu horizontal'nya tuh?? cari aja "HOME" kalo udah ketemu, nah ubek2 dibagian situ sob :)

    BalasHapus
  12. mmmmmm apa ya panggilnya, akang aja ya, gpp kan?? hehe...
    kang Menu nya pengen kaya yg punya akang, gimana tuh caranya?? keren bener,,

    BalasHapus
  13. gw cicip ya gan tutorial'a,,,, ;) ;)
    http://note-child.blogspot.com/

    BalasHapus
  14. Sudah saya coba kok tetep gak bisa ya apa bawaan dri templet asalnya. mohon pencerahannya gan.
    http://ajicena.blogspot.com

    BalasHapus
  15. nice blog bro...ane udh nyoba,,,liat nyang ane ya? trus mohon masukkannya y...mklum newbee

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers