2 Langkah Membuat Menu Dropdown Horizontal pada Blog

<img alt="2 Langkah Membuat Menu Dropdown Horizontal atau membuat menu dan submenu dropdown di blog atau 2 langkah membuat menu dan submenu dropdown horizontal di blog atau 2 cara membuat menu dan sub menu pada blog Keterangan Gambar” border=”0″ src=”https://nabitanews.files.wordpress.com/2012/06/html.jpg?w=116″ title=”2 Langkah Membuat Menu Dropdown Horizontal pada Blog” />
HTML

2 Langkah Membuat Menu Dropdown Horizontal atau membuatmenu dan submenu dropdown di blog atau 2 langkah membuat menu dan submenu dropdown horizontal di blog atau 2 cara membuat menu dan sub menu pada blog__________ halo blogger, pada postingan kali ini Bloggirsan akan berbagi tutorial blogger yang sangat penting untuk diterapkan di blog manfaatnya untuk mengirit tempat pada blog, untuk menerapkan tutorial ini ada  2 Langkah yang harus dilakukan atau pengeditan html yaitu pada html dan css, 2 langkah Membuat Menu Dropdown Horizontal pada Blogini sudah banyak sekali dibahas oleh para blogger, tapi tidak ada salahnya saya juga berbagi tetang 2 langkah membuat menu dropdown horizontal. Tapi sebelumnya saya akan sedikit membahas tentang Apa menu dropdown horizontal itu. Menu adalah satu navigasi yang memudahkan para pengunjung blog untuk menelusuri elemen pada blog. Horisontal yaitu sejajar ke samping, sedangkan dropdown artinya sejajar kebawah atau turun. Jadi menu dropdown horizontal adaah navigasi sejajar kesamping di blog yang akan mengeluarkan sederet sub.menu ke bawah. Berikut 2 langkah tutorialnya : 

  •  EDIT HTML
<img alt="2 Langkah Membuat Menu Dropdown Horizontal atau membuat menu dan submenu dropdown di blog atau 2 langkah membuat menu dan submenu dropdown horizontal di blog atau 2 cara membuat menu dan sub menu pada blog” border=”0″ height=”200″ src=”https://nabitanews.files.wordpress.com/2012/06/html1.jpg?w=116″ title=”2 Langkah Membuat Menu Dropdown Horizontal pada Blog” width=”200″ />
HTML

 Masuk di blog >> desain>>pilih template >>  Peringatan UNDUH dulu html Template sobat untuk jaga jaga sebai pemulihan,,, kalu sudah di unduh lalu klik edit HTML > > centang expand template widget

Cari kode berikut atau yang mirip >>>


Lalu paste kode berikut di bawah tapi sebelum mempaste kode ini rubah dulu judul menu dan sub menu dan link warna merah dengan link yang sobat bloger inginkan karena kode dibawah adalah hasil dari menu dropdown yang saya buatkan untuk web salah satu instansi,untuk priview lihat DISINI
  •   EDIT CSS
<img alt=" lalu paste kode di bawah ini di atas kode ]]>” border=”0″ height=”200″ src=”https://nabitanews.files.wordpress.com/2012/06/css.jpg?w=111&#8243; style=”margin-left: auto; margin-right: auto;” title=”2 Langkah Membuat Menu Dropdown Horizontal pada Blog” width=”200″ />
CSS
 Cari kode css seperti ini ]]> lalu paste kode di bawah ini di atas kode ]]>
#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}
Sebelum menyimpan klik pratinjau terlebih dahulu, kalau sudah yakin bisa baru di simpan>>
Ok sobat blogger selamat mencoba menerapkan 2 Langkah Membuat Menu Dropdown Horizontal pada Blog http://bloggirsan.blogspot.com/2012/06/2-langkah-membuat-menu-dropdown.html

1 Response to “2 Langkah Membuat Menu Dropdown Horizontal pada Blog”


  1. 1 Nurmanita Irmayuni 03/06/2012 pukul 10:01

    tutorial ini sangat membantu…
    terima kasih


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s





%d blogger menyukai ini: