CSS3 Dropdown For Blogger

Berikut menu dropdown lain sederhana namun menakjubkan dengan CSS3 murni dibuat oleh Andrew dari "http://script-tutorials.com/" yang saya telah membuat beberapa modifikasi kecil sehingga bisa dengan mudah beradaptasi dalam template Blogger kita.

Di sudut kanan atas menu ini kita memiliki hubungan kontak dan ikon media sosial untuk Facebook, Twitter, Google Plus dan RSS feed. Di bawah link ini, kita memiliki menu navigasi drop-down dan di sisi kiri, form pencarian.

Untuk mencapai antarmuka pengguna yang lebih baik dan interaksi, menu dropdown CSS fitur sub kategori yang muncul dengan sentuhan yang bagus dari CSS3 box-shadow, text-shadow dan transisi keren sekali link orangtua diaktifkan oleh hover.

Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian. Ketik kode di bawah ini dalam kotak pencarian dan tekan Enter untuk menemukannya.

</header>

Sudah ketemu, copy paste kode berikut tepat dibawah kode diatas

<div id='contact-links'>
<div id='my-links'>
<a href='#'>About</a>
<a href='#'>Contact</a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzhkYCfL15s5ro-z1l3Rq0rW96q7nCu0Y6onpO57L9WuXUQ9_TKPcKJcF-DYH8noK7sxVvDgRGuZy0ATM491jjHuc_npTc0kclioqWGFZtDQ0qX6WPGfGqxM_ZZxud92Z31M3hNI6RWwZF/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR58Zli7HZKzvEHMDnHgrJ8vlx_P6Gcb9TYbwrwvZkzza7VwkNWH2RZYZ-qRcbUcM_UIpiQTNKJVgdKbrbsRiljMLPFJBu4vLMhPVh1tvZwOR05uD9mgYtmcXN_TzDCA9AU0be0kGSdgFf/s1600/twitter.png' title='Twitter' width='18px' /></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWjKabqfOE2xe0sgz3GxWOZgteNVIs54NoEjq1Aez-9y8crkkF-S6ekcJ8UCOX_ahkSypqB8e51R4do_FnsLTgmDMVwA1pQZlUCBy_mRR_qVCZXn-4Vhn6H9OeV-rd-dDSOyG2c16Kx-zX/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh39yZEr96SVeHVAEXhJ_6r1cKmIslQ6wVdtLEbRVfiYyCCnVyekvHIicndSAoyMEdN7ylQuuqxyODZ9twBXlzBw5tHe6YqfWlDyE1LsvO8DPGPE_FuAq4sDJIdkNFikhQQvkkglLSLmR-z/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
</div>

<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'>Home</a></li>
  <li><a href='#'>Dropdown</a>
<ul>
  <li><a href='#'>Menu element 1</a></li>
  <li><a href='#'>Menu element 2</a></li>
  <li><a href='#'>Menu element 3</a></li>
  <li><a href='#'>Menu element 4</a></li>
  <li><a href='#'>Menu element 5</a></li>
</ul>
</li>
  <li><a href='#'>Dropdown</a>
<ul>
  <li><a href='#'>Menu element 1</a></li>
  <li><a href='#'>Menu element 2</a></li>
  <li><a href='#'>Menu element 3</a></li>
  <li><a href='#'>Menu element 4</a></li>
  <li><a href='#'>Menu element 5</a></li>
</ul>
</li>
  <li><a href='#'>Dropdown</a>
<ul>
  <li><a href='#'>Menu element 1</a></li>
  <li><a href='#'>Menu element 2</a></li>
  <li><a href='#'>Menu element 3</a></li>
  <li><a href='#'>Menu element 4</a></li>
  <li><a href='#'>Menu element 5</a></li>
</ul>
</li>
  <li><a href='#'>Single Menu</a></li>
  <li><a href='#'>Single Menu</a></li>
  <li><a href='#'>Dropdown</a>
<ul>
  <li><a href='#'>Menu element 1</a></li>
  <li><a href='#'>Menu element 2</a></li>
  <li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
</ul>
</nav>


<div id='menu-search'>
<form method='get' action='/search'>
<input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
</form>
</div>
</div>
</div>

Ganti # simbol dengan URL link dan mengganti teks warna orange dengan judul yang ingin Anda tampilkan. Untuk mengubah ikon media sosial, menambahkan link ikon Anda bukan dengan warna orange.

Jika Anda ingin menghapus sub kategori, menghapus kode dalam tag ditandai dengan warna merah, termasuk tag ul. Untuk menghapus hanya elemen menu, menghapus bagian yang dimulai dengan <li> dan diakhiri dengan </li>

Dan sekarang mari kita tambahkan styling CSS untuk menu. Mencari potongan kode berikut: Tepat di atas tambahkan kode ini:

]]></b:skin>

Tepat di atas ]]></b:skin> tambahkan kode dibawah ini:

#contact-links {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
}
#contact-links a {
color: #4C9FEB;
}
#contact-links a:hover {
color: #3D85C6;
}
#my-links {
float: right;
font-size: 12px;
margin: 4px 10px;
overflow: hidden;
text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
margin-left: 7px;
padding-left: 8px;
text-decoration: none;
}
#my-links a:first-child {
border-width: 0;
}
#menu-container {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear: both;
height: 46px;
padding-top: 1px;
}
#neat-menu {
float: left;
}
#neat-menu a {
text-decoration: none;
}
#neat-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#neat-menu > ul > li {
float: left;
padding-bottom: 12px;
}
#neat-menu ul li a {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color: #D1D1D1;
border-image: none;
border-style: solid;
border-width: 0 1px 0 0;
color: #333333;
display: block;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 11px 15px 10px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom: 1px solid #2D81CC;
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
margin: -1px 0 -1px -1px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-radius: 5px 5px 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 #FFFFFF inset;
height: 0;
margin-top: 1px;
opacity: 0;
overflow: hidden;
width: 240px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#neat-menu ul li:hover ul {
margin-top: 0\2;
height: auto;
opacity: 1;
visibility: visible;
}
#neat-menu ul ul a {
border-right-width: 0;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
border-top-width: 0;
}
#menu-search {
margin:8px 10px 0 0;
float: right;
}
#menu-search form {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRN95kvXAzX7FqzXlImZlxnJxG2OLvQ-JlrbLRn1t0nERNHSX_xCLjqEJ-g5Cfp305ciXgs56WHh2UjMwd_Yuqpr3GTKiZAEj9SPC0TBl2NQApfyT0XTKrGn3aiY6oist0zbJv2FqjLLok/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
height: 26px;
padding: 0 25px;
position: relative;
width: 130px;
}
#menu-search form:hover {
background-color: #F9F9F9;
}
#menu-search form input {
color: #999999;
font-size: 13px;
height: 26px;
text-shadow: 0 1px 0 #FFFFFF;
background: none repeat scroll 0 0 transparent;
border: medium none;
float: left;
outline: medium none;
padding: 0;
width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
color: #C4C4C4;
}

Klik tombol Template Save untuk menyimpan perubahan ... dan Anda selesai!

Dan hasilnya akan seperti dibawah ini:

Saya harap Anda menyukai menu dropdown CSS3 ini dan jika Anda menikmati tutorial ini, silakan berbagi dan berlangganan.

CSS3 Dropdown For Blogger

0 komentar:

Post a Comment

Popular Posts

Blog Archive

About Me

My Friends

Followers

Total Pageviews

CSS3 Dropdown For Blogger

0 komentar:

Post a Comment

Updates Via E-Mail

Popular Posts

Blog Archive

About Me

My Friends

Followers

Total Pageviews