Kumpulan Tips & Trik Seputar Teknologi

Friday 6 March 2015

Cara Membuat Menu Dropdown di Blog Dengan Css Dan HTML

Cara Membuat Menu Dropdown di Blog Dengan Css Dan HTML Rating: 4.5 out of 5 1

Cara Membuat Menu Dropdown di Blog Dengan Css Dan HTML - ini sangatlah mudah, banyak sekali tutorial tentang bagaimana membuat doropdown menu yang keren, tanpa harus menguasai kode-kode script anda sudah dapat langsung comot saja dari blog tutorial dan hanya butuh sedikit pemahaman untuk memodifikasi tampilannya agar sesuai dengan  selera anda.

Membuat menu dropdown Horizontal ini di penting bahkan blog/web profesional pun sudah banyak yang memasang menu dropdown ini selain mempercantik tampilan blog anda dropdown menu juga sangat efektif membantu memperbanyak pageview anda. dengan mengelompokkan sub-sub menu akan membantu pengunjung untuk mencari konten atau artikel yang di butuhkan.

Cara Membuat Menu Dropdown di Blog Dengan Css Dan HTML

Lalu bagaimana cara memasang dropdown menu di blog atau web anda? ikuti langkah-langkah di bawah ini.

Cara Membuat Menu Dropdown Di Blogspot

  • Pertama login terlebih dahulu ke-blog anda kemudian pada dasbor pilih template
  • Klik Edit HTML dan jangan lupa centang "Expand Template Widget".
  • Kemudan anda pasang terlebih dahulu kode Css-nya. biasanya kode css terletak di atas kode ]]></b:skin> ikuti cara cepat mencari kode tersebut tekan Ctrl-F kemudian paste-kan kode tersebut di kolom Search Setelah ketemu paste-kan Kode di bawah ini tepat di atasnya.
#menuwrapperpic {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibvM1K0q4MbG41Vbrygve64cv-RT1a412PE48ZYHjfxqnEen9-YuhaqmEFBMhZCHhjYh0fjzaZBtZI8NK5KvoEuSTGiyW1ihUAijP2NVB3tzvIG9GdnuYibf59BVmixAZMPLWGShbx8wM/s1600/nav.png) repeat-x;
width:1080px;
margin:0 auto;
padding:0 auto
}

#menuwrapper {
width:1080px;
height:30px;
margin:0 auto
}

.menusearch {
width:300px;
float:right;
margin:0 auto;
padding:0 auto
}

.clearit {
clear:both;
height:0;
line-height:0;
font-size:0
}

#menubar {
width:100%
}

#menubar,#menubar ul {
list-style:none;
font-family:Arial,serif;
margin:0;
padding:0
}

#menubar a {
display:block;
text-decoration:none;
font-size:12px;
font-weight:700;
text-transform:uppercase;
text-shadow:0 1px 1px #000;
color:#f2f1f1;
border-right:1px solid #666;
padding:9px 10px 8px
}

#menubar a.trigger {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEo1BM9dLD9s2-08mM1Ds7xhKfpZDdEDCsjko9sIdmhJJ1YzhYqHB1rcOIYLUSRrIik0-3PDGVwyjaG8B80F2nUqfAcH2v82AMn-JM-3WPTmlsrfOXnbt1RzeCVHC7fFKjESBNses6GY/s1600/arrow_white.gif);
background-repeat:no-repeat;
background-position:right center;
padding:9px 24px 8px 10px
}

#menubar li {
float:left;
position:static;
width:auto
}

#menubar li ul,#menubar ul li {
width:170px
}

#menubar ul li a {
text-align:left;
color:#fff;
font-size:12px;
font-weight:400;
text-transform:none;
font-family:Arial;
border:none;
padding:5px 10px
}

#menubar li ul {
z-index:100;
position:absolute;
display:none;
background:#222;
padding-bottom:5px;
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)
}

#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a {
background-color:#222;
color:#E98C0A
}

#menubar li:hover ul,#menubar li.hvr ul {
display:block
}

#menubar li:hover ul a,#menubar li.hvr ul a {
color:#edfdfd;
background-color:transparent;
text-decoration:none
}

#menubar li ul li.hr {
border-bottom:1px solid #444;
border-top:1px solid #000;
display:block;
font-size:1px;
height:0;
line-height:0;
margin:4px 0
}

#menubar ul a:hover {
background-color:#555!important;
color:#fff!important;
text-decoration:none
}
  • Setelah selesai langkah berikutya yaitu memasang kode html dropdownnya
  • [CATATAN] Jika anda ingin Memasang Menu Dropdown di bawah header maka cari kode <header> (dengan langkah seperti saat mencari kode di css di atas) Jika kode tersebut ada dua maka Pilih Kode yang paling bawah.
  • Kemudian copy dan Pastekan Kode HTML di bawah ini Tepat di bawah Kode <header>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='#'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjelQfWpfchkjPXA2zj8gMb1WnC3DYakBFrVGqqWulhmQBImwwDN3JKYO8DGWXQYjVyVJSRrFumnNxhShgstsQ95oNtd0-QsNxIN3Biwb6App9ixleQr-oA3wyIJ7nFWIrRc2i_DdWpU/s800/Beranda.png' width='20px'/></a></li>
<li><a href='#'>About Us</a></li> <li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Culture</a></li>
<li><a class='trigger' href='#'>Tips and trick</a>
<ul>
<li><a href='#'>Moding s60v3</a></li>
<li class='hr'/>
<li><a href='#'>Trick komputer</a></li>
<li class='hr'/>
<li><a href='#'>Tips kehidupan</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Kabar teknologi</a>
<ul>
<li><a href='#'>hardware</a></li>
<li class='hr'/>
<li><a href='#'>software</a></li>
<li class='hr'/>
<li><a href='#'>system oprasi</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Muslim</a>
<ul>
<li><a href='#'>Bacaan Sholat</a></li>
<li class='hr'/>
<li><a href='#'>Kumpulan Do&#39;a</a></li>
<li class='hr'/>
<li><a href='#'>Cerita islami</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>
<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
  • [CATATAN] Jika ingin menambahkanbahkan Sub menu copy paste code <li><a href='#'>Health</a></li> di atas tag <li> atau di bawah kode </li>.
  • Jika ingin menambahkan bilah menu yang mempunyai Sub menu silahkan copy paste code  copy dan paste kode di bawah ini
<li><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
  • Di atas tag <li> atau di bawah kode </li>
  • Ganti # pada Kode html dengan Link label atau url yang anda inginkan
Jika Seudah Selesai Klik simpan Dan tunggu Beberapa menit sampai proses simpan berakir kemudian reload halaman Blog anda dan lihat hasilnya. Lakukan dengan teliti semoga berhasil. Terimakasi telah memabaca artikel cara membuat menu dropdown di blog dengan Css dan HTML Semoga bermanfaat.

8 Responses to "Cara Membuat Menu Dropdown di Blog Dengan Css Dan HTML"

  1. Replies
    1. nggak nampak gimana gan coba lebih sepesifik.

      mungkin langkah-langkahnya ada yang terlewatkan coba di cek lagi gan,

      Delete
  2. cara mengurang panjang menubarnya gimana

    ReplyDelete
  3. Makasih banyak gan,sangat membantu
    tapi masih ada yang bingung
    pada sub menu ada
    li class='hr'/>

    itu perlu diisi pada penambahan sub menu lagi atau tidak?dan itu fungsinya untuk apa..?trimakasih gan,mohon bantuanya

    ReplyDelete

Silahkan berkomentar sesuai dengan topik pada artikel di atas. Dengan ketentuan di larang Menyisipkan Link pada komentar, Berkomentar dengan berlebihan atau SPAM, Promosi dan sebagainya.

Terimakasi telah mematuhi peraturan di Blog ini. Sebagai rasa terimakasih Tentu saya akan berkunjung kembali ke blog Anda.