Membuat Menu Dropdown Pure CSS3 Floating di Blog  - Pada Kesempatan Kali ini Saya akan Berbagi Tutorial Memasang Menu Dropdown Pure CSS3 Dengan Efek Floating ini Cukup Menarik Menurut saya. Cara ini Merupakan Tutorial Langsung dari Mas Taufik Pemilik dte.web.id hanya di sini saya publish ulang menurut tulisan saya sendiri. CSS3 Merupakan CSS yang Sangat Responsive dan Bisa dilihat diberbagai Browser . Pengetahuan saya Masih Sedikit Jadi Saya Tidak Bisa Menjelaskan Mengenai CSS3 Lebih Banyak Mungkin Teman Blogger bisa Menambahkannya di Komentar di bawah.

Berikut Beberapa Contoh Menu Dropdown Screen Shot Menu Dropdown Pure CSS3 Floating .
Anda Bisa Lihat Demonya di Blog Saya ini Cukup Menarik Bukan? Kalau Soal Warna Bisa Anda Modifikasi Sedikit Mudah kok Tidak Sulit.
Membuat Menu Dropdown Pure CSS3 Floating di Blog

Kita Langsung Ke Tutorial Memasang Menu Dropdown Pure CSS3 Floating di Blog ini Dengan Mudah

Langkahnya 


  • Buka Akun Blogger Anda
  • Masuk Ke Menu Template Anda 
  • Klik Edit HTML > Centang Expand Template Widget
  • Cari Kode Dibawah Untuk Memudahkan Tekan CTRL+F
]]></s:kin>

  • Setelah Mendapat Kode Tersebut Masukkan Kode Berikut Tepat diatasnya
nav{
font:bold 16px Calibri,Arial,Sans-Serif;
}
nav *{margin:0 0 0 0;padding:0 0 0 0;list-style:none;}
nav ul{
background:#fff;
background:-webkit-linear-gradient(top, #fff, #ddd);
background:-moz-linear-gradient(top, #fff, #ddd);
background:-ms-linear-gradient(top, #fff, #ddd);
background:-o-linear-gradient(top, #fff, #ddd);
background:linear-gradient(top, #fff, #ddd);
height:40px;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}
nav li{float:left;display:inline;}
nav li a{
padding:0px 15px;
line-height:40px;
color:#111;
text-shadow:0px 1px 0px rgba(255,255,255,0.3);
display:block;
text-decoration:none;
-webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
}
nav li a:hover{
-webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2);
box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2);
}
nav li a:active{
background:#fff;
background:-webkit-linear-gradient(bottom, #fff, #ddd);
background:-moz-linear-gradient(bottom, #fff, #ddd);
background:-ms-linear-gradient(bottom, #fff, #ddd);
background:-o-linear-gradient(bottom, #fff, #ddd);
background:linear-gradient(bottom, #fff, #ddd);
}
nav li ul{
display:block;
width:170px;
position:absolute;
left:auto;
z-index:10;
visibility:hidden;
opacity:0;
height:auto;
-webkit-transition:all 0.26s ease-out 0.2s;
-moz-transition:all 0.26s ease-out 0.2s;
-ms-transition:all 0.26s ease-out 0.2s;
-o-transition:all 0.26s ease-out 0.2s;
transition:all 0.26s ease-out 0.2s;
}
nav li li{
display:block;
float:none;
width:100%;
}
nav li:hover > ul{
visibility:visible;
width:200px;
opacity:1;
}
nav li li ul{
left:200px;
margin-top:-40px;
}
nav li.sub > a{
position:relative;
padding-right:30px;
}
nav li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:#0266C8 transparent transparent transparent;
position:absolute;
top:20px;
right:10px;
}
nav li.sub li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:transparent transparent transparent #0266C8;
position:absolute;
top:16px;
right:10px;
}
.clear{clear:both;}
Tanda # Merupakan Awal dari Kode Warna HTML . Jika Anda Ingin Merubahnya Silahkan Rubah Sesuai Kemauan Anda Cari Kode Warna HTMLnya disini

  • Setelah Langkah diatas Di Lakukan , Lanjutkan Mencari kode Seperti dibawah 

<div id='header-wrapper'>
Jika Anda Tidak Menemukan kode Seperti diatas Cari Kode id='header
yang agak mirip. jika tidak ada juga Lewat Tata Letak Juga bisa Penempatan Seterah Anda Sendiri. Jika ada Pertanyaaan Lebih Jelas Silahkan Bertanya dibawah



  • Setelah Ketemu Copy Berikut Lalu Pastekan Tepat Di Bawahnya.
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li class="sub"><a href="#">Jurnal</a>
<ul>
<li><a href="#">2000</a></li>
<li><a href="#">2001</a></li>
<li class="sub"><a href="#">2002</a>
<ul>
<li><a href="#">21 April</a></li>
<li><a href="#">22 April</a></li>
<li class="sub"><a href="#">23 April</a>
<ul>
<li><a href="#">Senin</a></li>
<li><a href="#">Selasa</a></li>
<li><a href="#">Rabu</a></li>
<li><a href="#">Kamis</a></li>
</ul>
</li>
<li><a href="#">24 April</a></li>
<li><a href="#">25 April</a></li>
</ul>
</li>
<li><a href="#">2003</a></li>
<li><a href="#">2004</a></li>
</ul>
</li>
<li><a href="#">Komentar</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>

Silahkan Edit Dengan Sesuka Hati  
  • Tanda # Ganti Dengan Url Blog Anda .



  • Terakhir Klik Preview dan Lihat Hasilnya Jika Sudah Memadai dan Sesuai Kemauan Anda Silahkan Klik Simpan Template Anda.

Demikian Artikel Membuat Menu Dropdown Pure CSS3 Floating di Blog Semoga Bermanfaat Untuk Anda dan Saya. Baca Artikel Menarik Berikut juga ya :
Judul : Membuat Menu Dropdown Pure CSS3 Floating di Blog
Di Tulis Oleh:MRizal Wrc
URL : http://bocahporis.blogspot.com/2013/03/membuat-menu-dropdown-pure-css3.diblog.html
Date Published : 22:03
Desription :Membuat Menu Dropdown Pure CSS3 Floating di Blog  - Pada Kesempatan Kali ini Saya akan Berbagi Tutorial Memasang Menu Dropdown Pure CSS3 De...
Rating Blog: 5 dari 5