CSS3 Advanced Menu bar with social widget and search bar

Today I’m going show how to advanced menu bar with social widget (contains menu share buttons and search bar) for your blogger blog. As you see the menu bar tutorials like this buttons this totally different and easy look rich effects. If you want this menu bar in your blog follow these steps to add

Step1:

            Login in to BLOGGER account click this

Step2:

            Now select the “Layout” from the options and click

Step3:

            Click Add Gadget and click on “HTML/JavaScript”

Step4:

            Paste the below code empty the title bar

<style> /*the code starts from here vbdotnetcod.blogdspot.com follow on twitter @vbdotnetcod facebook.com/vbdotnetcod */ /*add font style*/ #head nav { font-family: segoe ui light; } /*add effects to first half and transition effects*/ #head nav ul li { padding: 23px; background-color: #666; float: left; list-style: none; -webkit-transition: all .5s; } #head nav ul li:hover { opacity: .7; } #head nav ul a { color: #fff; text-decoration: none; font-size: 18px; } /*text box style*/ #search { width: 300px; border: none; height: 50px; padding: 10px; font-size: 22px; outline: none; } /*button style*/ #btn { background: none; border: 1px solid #ddd; color: #fff; width: 80px; padding: 10px; height: 50px; font-size: 20px; } /*set image height and width*/ #head img { width: 40px; height: 40px; } #header_img { width: 600px; padding: 2.5px; background-color: #666; } #head #header_img { left: 430px; position: absolute; top: -8px; } #head #header_img li { list-style: none; margin: 5px; float: left; } /*add induall colors for each element on hover*/ li:nth-child(1) img:hover { background-color: #395793; border-radius: 100%; } li:nth-child(2) img:hover { background-color: #2FA2ED; border-radius: 100%; } li:nth-child(3) img:hover { background-color: #DA2713; border-radius: 100%; } li:nth-child(4) img:hover { background-color: #DC572E; border-radius: 100%; } </style> <div id="head"> <nav id="tabs"> <ul> <a href="#"> <li>Home</li> </a> <a href="#"> <li>Windows</li> </a> <a href="#"> <li>Mac</li> </a> <a href="#"> <li>Mobile</li> </a> </ul> </nav> <ul id="header_img"> <li><img class="social" src="https://lh5.googleusercontent.com/-X6qeExoPErU/UNgSAAaY_tI/AAAAAAAABwg/XKz4udSujBM/s64/facebook.png" /></li> <li><img class="social" src="https://lh3.googleusercontent.com/-9rDdQ-P1SZo/UNgSG1c3ToI/AAAAAAAABxc/xJ_5HnLH94U/s64/twitter.png" /></li> <li><img class="social" src="https://lh5.googleusercontent.com/-UL6PaOsAlM0/UNgSA6PJz4I/AAAAAAAABws/mkytqGaY5xI/s64/goole%252B.png" /></li> <li><img class="social" src="https://lh4.googleusercontent.com/-Q3GMcqsrjdE/UNgSFwG8NSI/AAAAAAAABxU/jxBiKAu2Zt8/s64/rss1.png" /></li> <form action="/search"> <input id="search" type="search" placeholder="Search some onion.." /> <input id="btn" type="submit" value="Go"> </form> </ul> </div>

Step5:

            Change the values and color values as you wishing and now click save your “HTML/JavaScript”.

Then the awesome advanced menu bar appears in your blog   

ob