Dijual Rumah di Kota Bandung
LT 140 m2 LB 110 m2 Harga Nego
untuk info KLIK disini

Senin, 06 Agustus 2012

Tutorial Membuat Menu Bar Dropdown pada Blogspot

Kebetulan template saya adalah template bawaan default-nya blogspot sehingga tidak ada menubar-nya apalagi berbentuk dropdown. Langsung googling dan saya coba eh... lumayan bisa, tapi perlu sedikit keterampilan tambahan dan keuletan karena ketika saya pasang ke template yang lain eh malah acak-acakan. Tapi ini sebagai bahan dasar untuk berlanjut ke yang lebih rumit.

Karena banyaknya sobat blogger yangmasihkebingungan membuat menubar. Ini langkah-langkahnya:

  1. Login pada blogger
  2. masuk ke halaman Template
  3. Edit HTML lalu Lanjutkan
  4. Klik centang pada Expand Template Widget
  5. Cari kode ]]></b:skin> (gunakan ctrl+f)
  6. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
height:32px;
background:#de360f;
float:center;
margin-bottom:10px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnya


Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:


Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
<li><a href='http://eppoh.blogspot.com//'>judul</a></li>
<li><a href='#'>judul</a>
<ul>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
</ul></li>
</ul>
</div>

'Keterangan:
  • Ganti tulisan yang berwarna Merah muda dengan url link menubar yang diinginkan, misal: link postingan, link kategori, label, link halaman statis ataumalalui contoh : diganti denga url label : http://eppoh.blogspot.com/search/label/internet/
  • Ganti tulisan berwarna Biru muda (judul) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
  • Untuk sub menu tidak perlu menggunakan url cukup diberi tanda #' dan "nama" ganti sesuai nama sub judul atau sub menu.
  • Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
  • Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.


blognya-reggy

5 comments:

  1. Saya mencoba memasang menu bar dropdown,tapi ketika saya mencari kode div id="content-wrapper">,saya tidak menemukannya.Mohon solusinya mba,makasih banyak sebelumnya..

    BalasHapus
    Balasan
    1. Terimakasih kunjungannya.
      oh ya memang setelah saya coba cari pada edit html blog saya yang lain ada juga yang tidak kode content-wrapper.

      Kalau begitu silahkan cari < /header > (menulis tanda < dan > pada kata header harus disatukan, karena kalau saya tulis kode tersebut disatukan tidak bisa muncul pada balasan komentar)

      lalu letakan sub menu (menu dropdown anda) di atasnya (diatas < /header >).

      atau boleh juga dicoba letakan dibawah kode //]]>

      Jangan lupa mencentang (cecklist) pada Expand Widget Templates di Edit Html anda
      lalu save.

      selamat mencoba dan semoga membantu.
      Kalau belum bisa saja, silahkan berkomentar lagi sampai bisa, InsyaAllah saya akan bantu semampu saya... okey ...

      Hapus
  2. thanks tutorialnya..... visit me back...

    BalasHapus
  3. thanks tutorialnya..... visit me back...

    BalasHapus