How To Add Together Smashing Css3 Dropdown Card Inward Blogger
Monday, February 3, 2020
Edit
Here's about other unproblematic silent amazing dropdown carte amongst pure CSS3 made yesteryear Andrew from script-tutorials.com amongst about slight modifications hence that it tin forcefulness out endure easily adapted to our Blogger template.
In the upper correct side of this menu, nosotros accept the contact links in addition to social media icons for Facebook, Twitter, Google Plus in addition to RSS feed. Below these links, in that location is the drop-down navigation carte in addition to on the left side, the search form.
To accomplish a ameliorate user interface in addition to interaction, the CSS dropdown carte features sub categories that seem amongst a dainty demeanour on of CSS3 box-shadow, text-shadow in addition to a cool transition 1 time the nurture link is activated yesteryear a hover selector.
Step 2. Next, click anywhere within the code expanse in addition to press the CTRL + F keys to opened upward the search box. Type the tag below within the search box in addition to striking Enter to abide by it.
Hope you lot similar this CSS3 dropdown carte for Blogger in addition to if you lot enjoyed the tutorial, delight part in addition to subscribe.
In the upper correct side of this menu, nosotros accept the contact links in addition to social media icons for Facebook, Twitter, Google Plus in addition to RSS feed. Below these links, in that location is the drop-down navigation carte in addition to on the left side, the search form.
To accomplish a ameliorate user interface in addition to interaction, the CSS dropdown carte features sub categories that seem amongst a dainty demeanour on of CSS3 box-shadow, text-shadow in addition to a cool transition 1 time the nurture link is activated yesteryear a hover selector.
Adding the CSS dropdown navigation carte inwards Blogger
Step 1. Access your Blogger Dashboard in addition to become to "Template", in addition to hence click on the "Edit HTML" buttonStep 2. Next, click anywhere within the code expanse in addition to press the CTRL + F keys to opened upward the search box. Type the tag below within the search box in addition to striking Enter to abide by it.
</header>Step 3. Just below </header> add together the HTML construction of the dropdown menu:
<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/AVvXsEgw_khIVCyMjAX0qGr9ZWqk6Yro1q6G0TO86sMpfqOdqXLtk08M4e7yg3D_CRFudTmoc8QTQlij7JwSTHHSX8YM4NO_DPR-T6p4lalr6tIYcH8_abYUkA9xPTrFtNXoyB0ygZKxfzNzgWeD/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5y0rAYuu4o60hnU7tHnt5XLaiFFocD9yMxmIBXu78AQbKjV2lxPaUoaPpA5vWBqbVj0mUyOs-yzvVqx5aZzaoBhQIlOM_bAvjk2JOsT0_JGXgqEkXfAKn1Z6Nij7TLwSPIRuBa_aOrxEp/s1600/twitter.png' title='Twitter' width='18px' /></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwfHj1xGiLVE59686cD6ED95C5Iza9eegdfnzOFJms8e3aQTq2R1fhrE1MSmXyYEGhFOogzgVu2wGoVtFWS63jFwyB2DTcLQm7-ZQnyntGdKrmVpvcz68D0lqX7WC-LIRP70KwI-0nG6Lj/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Hy261jNYBMPmqOjBP_49K9-3pZI4xsfmoX7E8gKIxc7rSoO6GY3Umosi-YAVB7AlY8S-PNnyQ3XgXrZ6UWXcsQcR_O3x-6PEl9x9qWWlvCPkmCeDc-u6EehUQ0P3PUoojXBuUD8rk0DY/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 chemical portion 1</a></li>
<li><a href='#'>Menu chemical portion 2</a></li>
<li><a href='#'>Menu chemical portion 3</a></li>
<li><a href='#'>Menu chemical portion 4</a></li>
<li><a href='#'>Menu chemical portion 5</a></li>
</ul>
</li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu chemical portion 1</a></li>
<li><a href='#'>Menu chemical portion 2</a></li>
<li><a href='#'>Menu chemical portion 3</a></li>
<li><a href='#'>Menu chemical portion 4</a></li>
<li><a href='#'>Menu chemical portion 5</a></li>
</ul>
</li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu chemical portion 1</a></li>
<li><a href='#'>Menu chemical portion 2</a></li>
<li><a href='#'>Menu chemical portion 3</a></li>
<li><a href='#'>Menu chemical portion 4</a></li>
<li><a href='#'>Menu chemical portion 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 chemical portion 1</a></li>
<li><a href='#'>Menu chemical portion 2</a></li>
<li><a href='#'>Menu chemical portion 3</a></li>
<li><a href='#'>Menu chemical portion 4</a></li>
<li><a href='#'>Menu chemical portion 5</a></li>
</ul>
</li>
</ul>
</nav>
<!-- menu-search shape -->
<div id='menu-search'>
<form method='get' action='/search'>
<input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
</form>
</div>
</div>
</div>
How to Set upward the Dropdown Menu
- Replace the # symbols amongst the URLs of your links in addition to supplant the texts in blue amongst the titles that you lot desire to seem inwards the menu.
- To alter the social media icons, add together the links of your icons instead of the ones in blue. For to a greater extent than help, delight run into this tutorial on how to upload in addition to instruct the URL of an image.
- If you lot desire to take away the sub categories, take away the code within the tags highlighted inwards yellow, including the ul tags. To take away exclusively a carte element, take away the business office that starts amongst <li> in addition to ends amongst </li>
]]></b:skin>Step 5. Just to a higher house the ]]></b:skin> tag, add together this CSS code:
#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 #FFF}#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 venture 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:#333;display:block;font-size:14px;height:25px;line-height:25px;padding:11px 15px 10px;text-shadow:0 1px 0 #FFF}#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 venture #2D81CC;border-top:1px venture #4791D6;box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset;color:#FFF;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 venture rgba(0,0,0,0.1);box-shadow:0 1px 0 #FFF 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 venture #D1D1D1;box-shadow:0 1px 0 #FFF inset;color:#444;height:24px;line-height:24px;padding:7px 12px;text-shadow:0 1px 0 #FFF}#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 venture #4791D6;box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset;color:#FFF;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/AVvXsEiyW5YUHNQ1fYrPoQWs0sYOoriGdDAJX98m2AxJqMDZoETr3Qg3eWiMKdONdWVRrowX5LAZBYglot2u0qF4UibIb346945ZX5SZ8pOTty_UsMmoVX7k4c5e8RPiuU0yYnABdpNrBrQM2Bun/s1600/menu-search.gif) no-repeat scroll 5% 50% transparent;border:1px venture #CCC;border-radius:3px 3px 3px 3px;box-shadow:0 1px 0 rgba(0,0,0,0.05) inset,0 1px 0 #FFF;height:26px;padding:0 25px;position:relative;width:130px}#menu-search form:hover{background-color:#F9F9F9}#menu-search shape input{color:#999;font-size:13px;height:26px;text-shadow:0 1px 0 #FFF;background:none repeat scroll 0 0 transparent;border:medium none;float:left;outline:medium none;padding:0;width:100%}#menu-search shape input.placeholder,#menu-search shape input:-moz-placeholder{color:#C4C4C4}Step 6. Click on the "Save template" push to salve the changes in addition to you're done!
Hope you lot similar this CSS3 dropdown carte for Blogger in addition to if you lot enjoyed the tutorial, delight part in addition to subscribe.