20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

New Widget Show/Hide Social Share With Search Button For Blogger

New 2016 best social media share buttons with open close show hide function in blogger template,learn trick to create add social media profile share buttons on sidebar including search button open on click then click on cross to make active social profile tabs.
New Show/Hide Social Share With Search Button For Blogger
Hello guys,Today in this article we are going to share how to add social media share buttons and search buttons with show /hide function.One of our precious user asked for this trick and today we are sharing..if you guys want's any other features or any widget you can  contact us and we will try our best to develop them.Display and hide search button with social share profiles is very unique to use and it's take very less space of your webpage.There are lot's of gadget for social share and including search button in it.but this is little bit different when you click on search button social media share buttons will hide and search form will active and then again you click on cross button search button will be hide and social media share profiles will become active.

Demo:

The best place for display social media share buttons in right side of the menu or below the header,however you can install these buttons into your sidebar too.But we recommend add them in your navigation menu box or in header.So to install search button with social media share show and hide function in blogger template just follow the steps mentioned below.

How to install social share profiles with show and hide search button

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. First Search for <head> by Pressing Ctrl+F keys and Copy the below Font Awesome Icons stylesheet and paste it just below the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 4. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 5. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* Social Media Profile Buttons with Show-Hide Function by www.Bloggersstand.com */
.search-bsdprofile {
  position: relative;
  width: 249px;
}
#search-box {
  width: 100%;
  padding-right: 37px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#search-box form {
  position: absolute;
  top: 0;
  right: 37px;
  display: block;
  height: 31px;
  padding: 0;
  margin: 0px;
  border: 1px solid #80C8FE;
  border-radius: 3px;
    line-height: 31px;
  background: #fff;
}
#search-form,
.search-bsdbutton {
  border: none!important;
  line-height: 29px
}
#search-form {
  color: #80C8FE;
  width: 100%;
  padding: 0 29px 0 9px;
  height: 28px;
  font-size: 13px;
  margin: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.search-bsdbutton {
  padding: 0 9px;
  text-align: center;
  margin: 0;
  top: 1px;
  right: 1px;
  font-size: 15px;
  color: #80C8FE;
  position: absolute;
  background: none;
  cursor: pointer;
}
#search-form:focus,
#search-form:hover,
.search-button:focus,
.search-button:hover {
  border: none;
  outline: 0;
  color: #00477D
}
.bsdprofile {
  position: absolute;
  top: 2px;
  right: 37px;
}
.bsdprofile ul {
  padding: 0!important;
  margin: 0!important;
}
.bsdprofile li {
  display: inline-block;
  margin-left: 5px
}
.bsdprofile a {
  color: #80C8FE;
  font-weight: 500;
  font-size: 23px
}
.bsdprofile a:hover {
  color: #00477D!important
}
#search-box,
#close-icon {
  display: none;
}
.search-icon {
  color: #00477D;
  float: right;
  cursor: pointer;
}
.search-icon .fa-search,
.search-icon .fa-times {
  color: #fff;
}
Step .6 Now Search for </body> tag and copy the below javascript and paste it just above </body> it.
<script type='text/javascript'>
//<![CDATA[
function openbsdprofile() {
    var e = document.getElementById("bsdprofile");
    "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";
    var e = document.getElementById("search-box");
    "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";
    var e = document.getElementById("search-icon");
    "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";
    var e = document.getElementById("close-icon");
    "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";
  };
  //]]>
</script>
Step 7. Now Save your template.."if you are adding widget in sidebar if not then first install the below html code in your template then only save your template."

Step 8. Now copy the below HTML code and paste it where ever you want to display social share profile buttons in blogger template,for temporary use in this tutorial we are adding buttons in sidebar,So to add in sidebar just go to Layout->Add a gadget->HTML/JAVASCRIPT and paste the below code in the box,after that save it.
<div class='search-bsdprofile'>
  <div id='search-box'>
    <form action='/search' method='get'>
      <input id='search-form' itemprop='query-input' name='q' placeholder='Type here.....' required='required' type='text' />
      <button class='search-bsdbutton' title='Search' type='submit'><i class='fa fa-search'></i></button>
    </form>
  </div>
  <div class='bsdprofile' id='bsdprofile'>
    <ul>
      <li><a href='https://www.facebook.com/bloggersstand' target='_blank' title='Facebook'><i class='fa fa-facebook-square fa-lg'></i></a></li>
      <li><a href='https://twitter.com/bloggersstand' target='_blank' title='Twitter'><i class='fa fa-twitter-square fa-lg'></i></a></li>
      <li><a href='https://plus.google.com/bloggersstand target='_blank' title='Google+'><i class='fa fa-google-plus-square fa-lg'></i></a></li>
      <li><a href='id.linkedin.com/in/bloggersstand' target='_blank' title='LinkedIn'><i class='fa fa-linkedin-square fa-lg'></i></a></li>
      <li><a href='//www.youtube.com/c/bloggersstand' target='_blank' title='Youtube'><i class='fa fa-youtube-square fa-lg'></i></a></li>
    </ul>
  </div>
  <div class='search-icon' onclick='openbsdprofile()'>
    <div class="fa-stack" id="search-icon">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-search fa-stack-1x"></i>
    </div>
    <div class="fa-stack" id="close-icon">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-times fa-stack-1x"></i>
    </div>
  </div>
</div> 

Customization: 

  • Replace the above highlighted bloggersstand with your username.
Step 9. Save your gadget..Done ! 

Post a Comment