Slider

How to Remove Powered by Blogger – Attribution Widget

 Remove ‘Powered by Blogger’ by unlocking Attribution widget

Step 1 : Go to your blog “Template” | click on “Edit HTML”.



Step 2 : Here on drop-down “jump to widget” option and select Attribution 1 as shown below




Step 3: After selecting Attribution 1 widget you will be able to see this line

<b:widget id=’Attribution1′ locked=’true’ title=” type=’Attribution’> 
on your blogger template.

Step 4: Replace the locked=’true’ with locked=’false’ as you can in picture highlighted


Step 5
: Once done click on ‘Save template’.

Step 6 : Now go to layout option and at the below you can see attribution gadget, click edit you will be able to see new pop up window, click on remove button. that’s it you are done.



 Hide Attribution widget by adding CSS code

Follow the same step 1 as mention above in method 1.
Step 2: Search this line of code
body {in your blogger template, for quick finding Hit CTRL+F


Add this line of code
#Attribution1 {display: none;}above the body { code, as shown in the below picture.


Save template and view your blog, you will be no longer able to see attribution widget in footer of your blogspot blog.Removing this attribution widget will add professional look to your blog.Hope any one of this method worked for your blog on removing footer credits ‘attribution widget

How To Change Blogger Share Buttons To Cute Images

Blogger already has the option for share buttons, but they don’t have a ‘pin it’ button and honestly, I think they look … meh. One of my clients wanted to do something classy and customized on her site, so I looked ALL OVER online trying to find a tutorial on how to do what I wanted. I couldn’t really find it anywhere, which is why I decided to share my own tutorial on how I did it. I spent waaaaaaay too long figuring this out, so hopefully this saves you the headache!
If you’re savvy with HTML, you can customize this to have your own images and match your fonts/colors. If you’re looking for an easy solution, I’ve made up some cute grey buttons that should match most any blog. Voila



The buttons included are for Facebook, Twitter, Email, and Pinterest. If you keep reading there is also a code to add in a Google+ and Tumblr button as well.


So. First things first, you’re going to have to delete the Blogger share buttons that you currently have on your site. To do this, log in to your Blogger Dashboard, and go to the Layout tab. Once there, you’ll see the skeleton of your blog. Find the place where your blog posts go, and at the bottom, you’ll see a link that says Edit. Click that link:

Once you’re in, you’ll see a window that lets you configure the blog posts. One of the options is to Show the Share Buttons. Make sure this button is NOT clicked.


Once you are in the HTML of your blog, click within your HTML code and hit Ctrl F (PC) or command F (mac, the command is the button with the apple on it). This will bring up a little search box in the top right corner of your code (if the search box pops up in the right hand corner of your browser, it will not work, you need to click within your HTML code first, and THEN hit ctrl F). Ok, now find the following piece of code: <div class=’post-footer’> You might find that more than once – if so, you want the SECOND one. DIRECTLY after that piece of code, paste the following code:

1<!-- AddThis Button BEGIN -->
2<div style='text-align: left;'>
3<div class='addthis_toolbox'>
4<div class='custom_images'><a class='addthis_button_share'><img alt='Share this Post' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcdxYO9ngfhRSoHj1ZICk0W-xhz8NhPzH4KdFlVv1YMpGVP8j3IUwvcsA8LOfUiU7eC3hjFIZF-zMxOr0hg0pyaWAOVBZQ9MUMaAg4kEpmvkyir0FJrj0FmeAcbyo9J2Xw4ps0QvNZ6to/s1600/bhanu.png'/></a><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook share' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWyun6sGSS7bEeBN3iXO2Ouogri_sgVEeTfAx4LZJ5JLJQispBxFRb6en7QYehlsf82LO1qMqlHsdj_oP6tw2cBxsyaCCKLJN9Np0KZDZ5Ag3rbZ19BAgSq8KyowOWhUIMusQSd2Ndzj2/s1600/fbhanu.png'/></a><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter share' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNSdS2lZ58VzbuqHWW0WLSkp1dTvJz4oaYHuYmI8f8UWbGFMikfzytg8lU6HEK9sV9qe6JZuqACbyMkmawD67ShanbjW0FNIU6AMYhId_5Lde5G2a5OsUEllHPIx-mDcV0tgfFwiv5KGk0/s1600/tbhanu.png'/></a><a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbedW0Ekgl6U9lKKNP3WgZzzjAFnStfOs1GWZCeTfaKG1ujRnGcQGh3zlXWMu3hv1f5IwQgDUhLTOaYA7o2vWhQy6CCUxTN3rQKwwet-jjtJWK2RTo3ll2vvWdjH3ixp4OxSEhYEnx_apr/s1600/pbhanu.png'/></a><a class='addthis_button_email'><img alt='Email This' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7u5qC-tI8EJR782Z_Gnelxaz5-wSmt3yN2RSvxp1VOWPWTL6Tst1ufQ-ZIigd-kTxsVmHXrMnVLB7SphmQqRmYU41gMJA9YNy0BPa0Et_I6aJUX1wNHa15Ab5uytUHIEVIDpPUsK99SQr/s1600/ebhanu.png'/></a>
5</div></div></div><script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
6<!-- AddThis Button END -->
abhwai Share Buttons hosted by ❤ Bhanu

Make sure you hit “Preview” to make sure everything looks right! If it does, hit save and you’re all set! It should look something like this

Stylish Header Menu with Search Box for Blogger


 Login to your blogger account. go to your blogger Deshboard. Click on layout tab from left Sidebar and Click on Add a Gadget link. ( in the Header Area )



 Now  click on Add a Gadget


  After click on Add a Gadget link a pop-up Box will open now with many gadget list,choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.



 Select 'HTML/JavaScript' And Add the One of code given below
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="blog-bg" style="background: rgb(36, 39, 41); height: 210px; width: 1294px;">
<div style="margin: 0px auto;">
<br />
<header id="header" style="background-attachment: initial; background-clip: initial; background-image: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimySadqbKYWFBRZcRBraPzZA-tFkMBz_IHUnikCGDyNTmX4BvbdwYoBEM0fiRo_zNLBgJ0igwo5GimB-tt0iHYo0PJVrPhRtuAy5i_NLuhZPGlUqlGSNi6INmKscQK2hSaxKdq06-qIcSP/s1600/final_bg.png&quot;); background-origin: initial; background-position: 26% 0px; background-repeat: no-repeat; background-size: initial; color: white; font-family: Verdana, arial; font-size: 11px; height: 120px; margin: 0px auto; overflow: hidden; padding: 0px; width: 1050px;"><div class="headerleft" itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization" style="height: 103px; left: 10px; margin: 0px; position: relative; top: 20px; width: 376px;">
<div class="headerleft section" id="headerleft" style="height: 103px; left: 10px; margin: 0px; position: relative; top: 20px; width: 876px;">
<div class="widget Header" data-version="1" id="Header1">
<div id="header-inner" style="background-position: left center; width: 450px;">
<h2 itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject" style="margin: 0px; padding: 0px;">
<a href="http://#/" style="color: white; display: block; font-size: 10px; margin: 0px; outline: none; padding: 0px; text-decoration-line: none;"><img alt="MyBloggerTricks" height="66px; " id="Header1_headerimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLU-otgaALG_2U7iFh47RNLowKRLeTOgPt9bqfsyVak8I5Krhpwv7Tn_r6FsvdbLIYGnSiklzZPss2BEIjvIQhJblvx6GRCcfm3BXBy7WsODViqTD1WdK-n_CaywlM4CYdHW9mBmKE14/s1600/abhwaai.png" style="border: none; display: block; height: auto; margin: 0px; padding: 0px;" width="240px; " /><span style="display: block; text-indent: -999em;">My Blogger Tricks</span></a></h2>
</div>
</div>
</div>
</div>
<div class="headerright" style="float: right; font-weight: 700; margin: -40px 0px 0px; padding: 02px 5px 0px 0px; width: 486px;">
<div class="headerright section" id="headerright" style="float: right; margin: -40px 0px 0px; padding: 02px 5px 0px 0px; width: 486px;">


<style type="text/css">
#searchbox{background: rgb(36, 39, 41); border: 2px solid rgb(144, 241, 40); box-shadow: rgb(42, 82, 0) 1px 2px 9px; color: white; font-family: oswald, arial, sans-serif; font-size: 13px; height: 28px; margin: 0px; overflow: hidden; padding-top: 7px; position: relative; text-align: center; text-shadow: rgb(0, 0, 0) 1px 1px 4px; width: 1323px; z-index: 9998; padding:10px 05px;width:450px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6VClN9ympxKt6tQO9ErBK9mUhAl_nqIozjPkmoet3-o0Yqb28MaFgcxhQ1mhvOEyzEXu3_CBI_Ap66_4u-Ot5u-QHUKXbSILNj8-AmNlwGRxnwZLqci8Lct3-bc8yTqU5DKqwhkGsz5o_/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>


</div>
</div>
</div>
</header><nav id="Main-Menu" style="background-attachment: initial; background-clip: initial; background-image: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMz7h5qSRbtAvThyphenhypheng4FhcrjyXH9ZA3zaVmUobyOEpwo8vmxYrpZRXcW9gnVN0nhUQOdRFG7vcBsTST0RgqrjDGrz9RSohc1fBFhsq0N6y_zakU92ghbo4WESgkBbvFgKzO8jBWI3srtrY/s1600/Menu_bg.jpg&quot;); background-origin: initial; background-position: initial; background-repeat: no-repeat; background-size: initial; color: #555555; font-family: Verdana, arial; font-size: 12px; height: 70px; margin: 0px auto; padding: 0px; width: 1018px;"><ul id="Main-nav" style="margin: 0px 0px 10px 15px; padding: 10px;">

<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="http://abhwai.blogspot.in/p/contact_47.html" style="color: white; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-columns" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding-bottom: 2px; padding-left: 3px; padding-right: 7px; padding-top: 2px; position: relative; text-shadow: none;"></span>&nbsp;Widget</a></li>

<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="http://abhwai.blogspot.in/p/contact_47.html" style="color: white; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-envelope" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding-bottom: 2px; padding-left: 3px; padding-right: 7px; padding-top: 2px; position: relative; text-shadow: none;"></span>&nbsp;Contact us</a></li>
<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="http://www.abhwai,blogspot.in/search/label/Make%20Money%20Online" style="color: white; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-dollar" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding: 2px 7px 2px 4px; position: relative; text-shadow: none;"></span>&nbsp;Make Money</a></li>

<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="http://www.abhwai,blogspot.in/search/label/Social%20Media" style="color: white; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-search" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding-bottom: 2px; padding-left: 3px; padding-right: 7px; padding-top: 2px; position: relative; text-shadow: none;"></span>&nbsp;Seo</a></li>
<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="http://www.abhwai,blogspot.in/search/label/Widgets" style="color: white;hover: #8fde62; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-edit" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding-bottom: 2px; padding-left: 3px; padding-right: 7px; padding-top: 2px; position: relative; text-shadow: none;"></span>&nbsp;blog Design</a></li>
<li style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ukVl2lC18Ph1HxjZJqCsjs-k8PhJGwZmQJwPzJsQ7gUJmCYY-toj7aTtZY-h3DLZofk-eZ_hHvXXC45oepo9YkEU5E1qB1xleVJVa5btldZUg-fzvc_e5QB8sRiyf91CPpgJsYW-eOw7/s320/menu-bg.png&quot;) 0px 0px no-repeat; float: left; height: 42px; list-style: none; margin: 17px -10px 0px 0px; padding: 0px; width: 169px;"><a href="#" style="color: white;hover:red; display: block; font-family: oswald, arial; font-size: 14px; margin: 0px; outline: none; padding: 12px 0px 9px 45px; text-decoration-line: none; text-shadow: rgb(51, 51, 51) 1px 1px 3px;"><span class="fa fa-btc" style="background: rgb(51 , 51 , 51); border-radius: 3px; bottom: 2px; display: inline-block; font-family: &quot;fontawesome&quot;; font-size: inherit; font-stretch: normal; left: -5px; line-height: 1; padding-bottom: 2px; padding-left: 3px; padding-right: 7px; padding-top: 2px; position: relative; text-shadow: none;"></span>&nbsp;Blog Menu
</a></li>
</ul>
</nav>


 Now Click on save JavaScript you are done

Freebie Responsive Header Menu for Blogger





very easy to edit the stylish menu. first go to blogger account and click on theme  /Template ↓↓



Click  on  and now find ]]></b:skin> then paste the following given CCS code just before ]]></b:skin>



  ↓↓


.header-search{
 background-color:#292c2f;
 box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.15);
 padding: 20px 40px;
 height: 80px;
 color: #ffffff;
 box-sizing: border-box;
}

.header-search .header-limiter {
 max-width: 1200px;
 text-align: center;
 margin: 0 auto;
}

/* Logo */

.header-search .header-limiter h1 {
 float: left;
 font: normal 28px Cookie, Arial, Helvetica, sans-serif;
 line-height: 40px;
 margin: 0;
}

.header-search .header-limiter h1 span {
 color: #5383d3;
}


/* The header links */

.header-search .header-limiter a {
 color: #ffffff;
 text-decoration: none;
}


.header-search .header-limiter nav {
 font:16px Arial, Helvetica, sans-serif;
 line-height: 40px;
 float: left;
 margin: 0 0 0 60px;
 padding: 0;
}


.header-search .header-limiter nav a {
 display: inline-block;
 padding: 0 5px;
 text-decoration:none;
 color: #ffffff;
 font-size: 16px;
 font-weight: normal;
 opacity: 0.9;
}

.header-search .header-limiter nav a:hover {
 opacity: 1;
}

.header-search .header-limiter nav a.selected {
 color: #608bd2;
 pointer-events: none;
 opacity: 1;
}

/* The search box */

.header-search .header-limiter form {
 float:right;
 position: relative;
 right: 30px;
 margin-left: 40px;
 border-radius: 3px;
 background-color:  #3a3c3e;
 width: 44px;
 height: 39px;
 cursor: pointer;

 -ms-user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
}

/* CSS search icon */

.header-search .header-limiter form:before {
 position: absolute;
 content: '';
 border-radius: 50%;
 border: 2px solid #fff;
 width: 9px;
 height: 9px;
 top: 12px;
 left: 14px;
}

.header-search .header-limiter form:after {
 position: absolute;
 content: '';
 background-color: #fff;
 width: 2px;
 height: 8px;
 top: 22px;
 left: 26px;
 -webkit-transform: rotate(-44deg);
 -moz-transform: rotate(-44deg);
 transform: rotate(-44deg);
}

/* The search box */

.header-search .header-limiter form input {
 display: none;
 position: absolute;
 right: 42px;
 padding: 11px 12px 9px;
 border: none;
 width: 210px;
 border-radius: 2px 0 0 2px;
 height: 39px;
 box-sizing: border-box;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}

/* Making the header responsive. */

@media all and (max-width: 600px) {

 .header-search {
  padding: 15px;
  position: relative;
 }

 .header-search .header-limiter h1 {
  float:none;
  font-size: 24px;
  line-height: 1;
 }

 .header-search .header-limiter nav {
  text-align: center;
  float: none;
  margin: 0;
 }

 .header-search .header-limiter nav a {
  font-size: 13px;
 }

 .header-search .header-limiter form {
  position: absolute;
  top: 20px;
  right: 20px;
 }

}

.header-search nav a.selected {
 border-radius: 2px;
 background-color: #2B5773;
 padding: 8px 12px;
}


.header-search a.logout-button {
 font-size: 13px;
 font-weight: bold;
 
float: right;
 border-radius: 3px;
 background-color: rgba(58, 60, 62, 0);
 height: 40px;
 padding: 0 20px;
 
border: 1px solid #5E6367;
 line-height: 40px;
 box-sizing: border-box;
}
/* The user menu */


.header-search-user-menu{
 
position: relative;
 
float:right;
 background-color:#3a3c3e;
 
width:75px;
 height:40px;
 border-radius:2px;
}


.header-search-user-menu:before{
 content:'';
 width:0;
 height:0;
 top: 18px;
 left: 15px;
 position:absolute;

 border:5px solid transparent;
 border-top-color:#fff;
}


.header-search-user-menu ul{
 display: none;
 font:bold 13px Arial, Helvetica, sans-serif;
 background-color: inherit;
 
list-style: none;
 position: absolute;
 text-align: center;
 
width: 125px;
 top: 25px;
 right: 0;
 padding: 10px;
 border-radius: 2px;
 box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
 
box-sizing: border-box;
}


.header-search-user-menu:active ul,
.header-search-user-menu:hover ul,
.header-search-user-menu.show ul{
 
display:block;
}


.header-search-user-menu ul li{
 padding:5px;
}

.header-search-user-menu ul li a:hover{
 opacity:0.9;
}


.header-search-user-menu ul li a.highlight{
 color:#e9ac09;
}


.header-search-user-menu img{
 border-radius:50%;
 position:absolute;
 top:6px;
 max-width: 28px;
 right:10px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #292c2f;
    min-width: 100px;
    
    padding: 01px 01px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

now again search for </header> teg and paste following html code just below.

  ↓↓ 

<header class="header-search">
<div class="header-limiter">
<h1><img Value='math' alt='Smiley face' float='center' height='47' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD0wOwURGlCHuxwl0mV7wt7ReCYdV_nCS_feKONjDKWYrvTe3aRGgmaRkmkxjFwtq6NT-ib5s0qdes19BrhgOS2szoiBeJh-02r1POPlYiQN8V1EHdMJHBTukrWoUjaSeVfBFNvo3cEuA/s1600/logo.png' width='200'/>
</h1>
<nav>
  <a href="#" class="selected">Home</a>   
<a href="#">Bloging</a>
<div class="dropdown">
  <span>Dropdown</span>
  <div class="dropdown-content">
    <a href="#">Pricing</a>
<a href="#">Pricing1</a>
  </div>
</div>   
<a href="#">Tricks</a>
   <a href="http://abhwai.blogspot.in/">Abhwai</a>
  </nav>
 <div class="header-search-user-menu">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixZ5b6cXB_XXDdBk8f7sQAlWVwGzqKHD-wJZMkGl0LxB0XFezOdn73RBfYjwob4GyjBPOjpqi2HxjEbHt0wra5Eg9kjnh1sIPlg1kuBiPJ434QweYVHPW-mwqKj1eEuD2RRu87v07aKDUm/s1600/download3.jp" alt="User Image"/>

   <ul>
    
<li><a href="#">Email</a></li>
    <li><a href="#">Massge</a></li>
    
<li><a href="#" class="highlight">chat</a></li>
   </ul>
  
</div>

 
<form method="get" action="#">
  <input type="search" placeholder="Search!" name="search"/>
  </form> 
</div>
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {

  $('.header-search form').on('click', function(e) {

   // If the form (which is turned into the search button) was
   // clicked directly, toggle the visibility of the search box.

   if(e.target == this) {
    $(this).find('input').toggle();
   }

  });
 });

</script> <br> </br><br> </br>

now click on Save Theme. That's it
Note!       don't Remove <br> </br><br> </br>   teg . becouse if you remove it then do not work Dropdown icons
I hope you enjoyed this  Style Mega Drop-Down Menu With Search Box and the techniques I used. Please share this post if you like it

Css3 Dropdown Navigation Bar with icon




very easy to edit the stylish menu. first go to blogger account and click on theme  /Template ↓↓



Click  on  and now find ]]></b:skin> then paste the following given CCS code just before ]]></b:skin>



  ↓↓

.abhwai_menu,.abhwai_menu ul,.abhwai_menu li,.abhwai_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.abhwai_menu { 
 height: 40px;
 width: 580px;
 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.abhwai_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.abhwai_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.abhwai_menu li:first-child a { border-left: none; }
.abhwai_menu li:last-child a{ border-right: none; }

.abhwai_menu li:hover > a { color: #8fde62; }

.abhwai_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.abhwai_menu li:hover > ul { opacity: 1; }
.abhwai_menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.abhwai_menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.abhwai_menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #353539;
}
.abhwai_menu ul li:last-child a { border: none; }
.abhwai_menu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDJztFsiYExXq7A6Hg3CWbK7Plki28hpPXWJRV6JOGu7gLiuHTqJQB4F6sgzpHpo2TZepKr5g5BWA2KssOZCsRrv0s9CpkD8u6yNFQSyeSbQ3yBIRpWGfsVckIJmg6ZYy1DQEzK4wpUMee/s1600/docs.png) no-repeat 6px center; }
.abhwai_menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjzelAareAgAFSjq6lY8y43ip2LXAq7sRUxFTzFzYI85kY4lvxh35-4Hho4pkY-_5hwOSYn0X__XNErMhOUwzpHSci05ct36gk8uslMejD1EXAzVfLWv-uz4IjtG3ikqkNsxi78vxHtuBZ/s1600/bubble.png) no-repeat 6px center; }
.abhwai_menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzck0fNPMaQBe0jofNm6jCe78wAYAVWJS93AWTbskAAlkWiylmhIQVwVb1xnfQwivMeDd-FdCbFuz9VBq8nQWltTpsxSi5QmO-uDz3fgAXOGTjOC94OMf2X3R_CVUbM089N6WKsttjCXR/s1600/arrow.png) no-repeat 6px center; }


paste the following given Script sheet just below <head>

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

now again search for </header> teg and paste following html code just below.

  ↓↓ 


<ul class="abhwai_menu">

 <li><a href="#"><i class="fa fa-home"></i> home</a></li>
 <li><a href="#">Likes</a></li>
 <li><a href="#">Dropdown</a>

  <ul>
   <li><a href="#" class="documents">Documents</a></li>
   <li><a href="#" class="messages">Messages</a></li>
   <li><a href="#" class="signout">Sign Out</a></li>
  </ul>

 </li>
 <li><a href="#">Uploads</a></li>
 <li><a href="#">Videos</a></li>
    <li><a href="#">About</a></li>
 <li><a href="#">Contact us</a></li>
</ul> 

now click on Save Theme. That's it
Note!  if you want more icons then paste <i class="fa fa-home"></i> this  before , whare do               you want
I hope you enjoyed this  Style Mega Drop-Down Menu With Search Box and the techniques I used. Please share this post if you like it

CSS3 Shadow Block Menu For Blogger



very easy to edit the stylish menu. first go to blogger account and click on theme  /Template ↓↓



Click  on  and now find ]]></b:skin> then paste the following given CCS code just before ]]></b:skin>



  ↓↓

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 787px;
margin:0 auto;
}
.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB; 
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf; 
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.shadowblockmenu li:nth-of-type(1) a{
border-left: 1px solid #BBB;
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpMp0bgiORFHkpiavo5TWyiIdLIwnE9VpY98TAo7ScbYNdLQirVtHRBaKtKIKKsBd4C9uVOqfxv2BhU7GKIvjV22R082b34s-IcQ1PlBxROUSsUy9jw2wB3vctodtvEY39u7fffqLCuRQ/s1600/bt_home.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(2) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_bnWN6a8B2F6Vb_TLf-RKnFIi_16kZucaNTHGW9YugWpe9AfYE-4FqbukMM9cEMmscNXwTZB_5meFUHiKqyHZvTxOZJv6bvp1IqiKmEDSeUHtZUxa46Fqor5avRKDMeh9bUsYPAAPX98/s1600/bt_bulb.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(3) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrqjdc4DivQZHeLuZ7kdNHTZaetqbHKgxzbxpPdr0DbhNQ9kRuD119lOP7_AD61LoRpN2RT3BV0LC8imdr1reIRD73B292hYp5SIxrrpgJ-4PeU54XIXWE7hceGV4sPwqoWtyxmvoNmA4/s1600/bt_database_add.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(4) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG_0F7hUt9l4T1N8zZcP8Iq0h4kTBdieVrZRpMqBarPNDtR0aLgPlCVG-AIQbArIkxqp_oXFjbcH9ny2dYYIlOTE2SJ5TDEcYLc_9I7n9TRMFD0WEGKN-MwKc2qKc04CZRkCHUAjSabrk/s1600/bt_films.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(5) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJMd2Y6h5kR3DqWY6N5eBNX_1txvbxHhwVW-fKZYsrY5BkHLLV55wxNR93rJjzg9JoqRMKKuCXe6pDwPA_pUegnk5BL4URcghmXigJiQqNsDOf_5xDIBB1N-49d1BlHKdC3IZLmyMotig/s1600/bt_mobile-phone.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(6) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZoRR-emXSTeKB2cgb1k4ceDZRR8qvtyQ9yt-f27PC7n6AI7EV5XmrHkgFbI-wl3-ua2A2TCmGXPToHhzU_e27AJmICGktMkFYsRhQsWtEB1y99TdmZDYRRGjZT0iw2F69i0mEBgcQ8vI/s1600/Bt_Help_Circle_Blue.png) 1px center no-repeat; 
}
.shadowblockmenu ul li a:hover{
color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}

now again search for </header> teg and paste following html code just below.

  ↓↓ 

<div class="shadowblockmenu">
<ul>
<li><a href="#">Home page</a></li>
<li><a href="#">CSS Library</a></li>
<li><a href="#">Database</a></li>
<li><a href="#">Blog Videos</a></li>
<li><a href="#">Mobile App</a></li>
<li><a href="http://www.bloggertrix.com/">Get Help</a></li>
</ul>
</div>

now click on Save Theme. That's it
Note!       you can also go to Layout and paste HTML code  in  the gadget.
I hope you enjoyed this  Style Mega Drop-Down Menu With Search Box and the techniques I used. Please share this post if you like it