Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Dropdown Menu Dengan CSS3 Bergaya Klasik

by Irsyad Aslam , at 7/07/2013 , has 1 comment
Dropdown Menu adalah sebuah bar yang menampilkan menu (Halaman) yang dibuat untuk ditampilkan. dropdown ini sudah tersedia pada blogger, namun dropdown ini hanya berbentuk dropdown tunggal (tidak ada sub menu) atau widget laman.

Dropdown Menu ini adalah dropdown menu yang dibuat dengan kode css3 dan sebagai pelengkapnya menggunakan kode HTML, tentunya dengan memasang dropdown menu ini blog anda lebih menarik untuk dilihat.

Cara Untuk Memasang Dropdown Menu Dengan CSS3 Bergaya Klasik


  • Silahkan Masuk Ke Akun Blogger Anda.
  • Setelah itu, Klik menu Template, Simpan terlebih dahulu template yang anda gunakan, kemudian, klik tombol Edit HTML.
  • Cari kode ]]></b:skin> dengan menekan CTRL+F, Lalu Masukan Kode CSS3 Berikut ini :
#YBB_klasik-menu {
     width:900px;
background:#222 url(http://2.bp.blogspot.com/-cBGjIceUXEc/Udjb61-ZLWI/AAAAAAAAD9s/teYmoPirTaQ/s1600/ybb_klasik_menu_atas_bg.png) repeat-x scroll top;
color:#ddd;
height:35px;
-webkit-box-shadow:0 1px 5px #aaa;
-moz-box-shadow:0 1px 5px #aaa;
-ms-box-shadow:0 1px 5px #aaa;
-o-box-shadow:0 1px 5px #aaa;
box-shadow:0 1px 5px #aaa;
border-bottom:1px solid #000;
padding-top:8px;
border:none 5px #000000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
#YBB_klasik-menu ul,#YBB_klasik-menu li {
     margin:0 auto;
padding:0 0;
list-style:none;
}
#YBB_klasik-menu ul {
    height:35px;
width:980px;
}
#YBB_klasik-menu li {
     float:left;
display:inline;
position:relative;
font:14px;
text-transform:none;
}
#YBB_klasik-menu a {
     display:block;
line-height:35px;
padding:0 14px;
text-decoration:none;
color:#ddd;
}
#YBB_klasik-menu li a:hover {
     color:#fff;
}
#YBB_klasik-menu input {
     display:none;
margin:0 0;
padding:0 0;
width:80px;
height:30px;
opacity:0;
cursor:pointer;
}
#YBB_klasik-menu label {
     font:bold 30px Arial;
display:none;
width:35px;
height:36px;
line-height:36px;
text-align:center;
}
#YBB_klasik-menu label span {
     font-size:12px;
position:absolute;
left:35px;
}
#YBB_klasik-menu ul.menus {
     height:auto;
overflow:hidden;
width:180px;
background:#f1eeed url(http://4.bp.blogspot.com/-FMnRI_6Z0ZA/Udjb-9WcE2I/AAAAAAAAD90/9Uhgk46ZD2I/s1600/submenu_bg.png);
position:absolute;
z-index:99;
display:none;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
#YBB_klasik-menu ul.menus li {
     display:block;
width:100%;
font:12px Arial;
text-transform:none;
text-shadow:none;
}
#YBB_klasik-menu ul.menus a {
     color:#333;
}
#YBB_klasik-menu li:hover ul.menus {
     display:block;
}
#YBB_klasik-menu a.submenu {
     padding:0 27px 0 14px;
}
#YBB_klasik-menu a.submenu::after {
     content:"";
width:0;
height:0;
border-width:6px 5px;
border-style:solid;
border-color:#ddd transparent transparent transparent;
position:absolute;
top:14px;
right:9px;
}
#YBB_klasik-menu ul.menus a:hover {
     background:#ddd;
color:#333;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.page-YBB_klasik-menu {
     width:70%;
margin:18px auto;
padding:0;
float:right;
text-shadow:0 1px 0 rgba(0,0,0,0.7);
}
.page-YBB_klasik-menu ul {
     list-style:none;
color:#ddd;
width:700px;
margin:0 auto;
padding:0;
}
.page-YBB_klasik-menu ul li {
     list-style:none;
line-height:32px;
display:inline-block;
}
.page-YBB_klasik-menu li a{
     color:#ddd;
display:block;
font-size:14px;
font-family:Arial;
position:relative;
text-decoration:none;
text-transform:capitalize;
padding:0 10px;
}
.page-YBB_klasik-menu li a:hover,.page-YBB_klasik-menu .selected {
     color:#fff;
text-decoration:none;
background: rgba(0,0,0,.4);
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;
}


  • Setelah itu, Klik Menu Tata Letak, --> Klik Add Gadget, --> Klik Widget HTML, Kemudian Masukan kode berikut ini, pada widget tersebut :

<div id="YBB_klasik-menu">
<ul>
<li><a href="/">Home</a></li>
<li><a class="submenu" href="#">Menu</a>
<ul class="menus">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a class="submenu" href="#">Menu 2</a>
<ul class="menus">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

Keterangan:
  1. Ganti Kode berwarna Merah dengan menu anda.
  2. Ganti Kode berwarna Kuning dengan submenu anda.
  • Kemudian, Klik tombol Simpan.


Selamat Mencoba,
Salam Sukses,




Your-BelajarBLOG
Irsyad Aslam
About
Cara Membuat Dropdown Menu Dengan CSS3 Bergaya Klasik - written by Irsyad Aslam , published at 7/07/2013, categorized as Widget . And has 1 comment
1  comment Add a comment
Pernah ngeliat menu ini deh :D
dimana ya tp hehe tp nice lah ijin coba dulu
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger