Add Social Media Widget with Search Box in Blogger

Social Media Subscription Widgets play an important role to increase blog traffic and also Facebook Likes, RSS Subscribes, Twitter and Google Plus Followers. Keeping in mind the importance I am going to share another Social subscription Widget for Blogger. his is the best and easiest way to increase blog traffic. This Widget contain 4 Social Networks links with additional search box. It consists of Facebook Page link, Twitter Profile link, Google Plus Link, Feedburner Feeds link. I already shared All-In-One Social Media Subscription Widget. This widget is lighter and stylish have black tone shade which makes this widget awesome and best for using on blogs. So toady I am sharing a Social Media Subscription with Search Box Widget for Blogger.

How to Add Mega Social Subscription Widget in Blogger?

First of all Login to your Blogger Dashboard. Then open Layout tab from the list of tabs shown on left side. After doing this click on Add a Gadget, once you click a popup window will open, scroll down and choose gadget type as HTML/JavaScript. Now Paste the following code inside it and hit Save button.

<style>
/* ---BestBloggerTricks Mega Social Media Widget--- */
#search {
border: 1px solid #DDD;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs7UuvivHEJYJ6U3YL_ErWaWGP9uVZ4yOxiP7RkJ5OItj_pktKXOndhFt2GvRrKebEMVIj34aEHwmc18MG50a0y0RUWJkR1c-fjRKmB00pLdkoWkkNivL0xwpvF9GyI1aAMb146moOfmg/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
height:15px; mouse:pointer:
}
#search #s {
background: none;
color: #666;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
.social-connect-widget {
background:#F5F4EF;
border:1px solid #E7E6DE;
padding:10px;
border-radius:5px;
-moz-border-radius:5px;
}
.social-connect-widget:hover
{
border:1px solid #CBCBC2;
background:#FFF
}
.social-connect-widget a
{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,Sans-serif;
color:#4B4D4E
}
.social-connect-widget a:hover
{
text-decoration:underline;
color:#F77C04
}
.social-connect-widget img
{
vertical-align:middle;
margin-right:5px;
height:32px;
width:32;
}
</style>
<div id="search" title="Type and hit enter"> <form action="/search" id="searchform" method="get"> <input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" type="text" value="Search" /> </form> </div>
<br/><br/>
<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;"> <img alt="rss feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg65StBw69EoNAaEQG7MVzCB3Eq5FmYBBJzvn6mDCnyTGnNtqNdvDwACs49z5iACvLpchb4xTPH9fGE25DSLyFbfWmmGrL2gFkB_8DFbXFQqAR8-9lIcH0XjgM4ithiV2tXJXk6gfd2LJw/s32/rss.png" /><a href="http://feeds.feedburner.com/Best-Blogger-Tricks" target="_blank">Subscribe to our RSS Feeds!</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;"> <img alt="follow us on twitter!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnX5fZ4u5nKY7qbLD1BCmnXPHmZmSvr3Gp-9wg5tBLvIaclURm6dPQhKuHLD71FNeMa2mfecurRitnNc2SXWObQaQbJbY5KHAYfcO3JQF3QFQ3EeQVbG78BbP1b_SEdl5QZLEDe9bd7Qo/s32/twitter.png" title="follow us on twitter!" /><a href="http://twitter.com/ItsGhani" target="_blank">Follow Me on Twitter!</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;"> <img alt="be our fan!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzQ3YMObgJarzZMCMgG9GX4cC7_Zz4c5HU-OxXodVzhD9Y-fLLBN91cwjgkBO7QXe0iDHZ1C4jmGIJsKEFKeQwRxUjMu3qCZfPUfkxdK0RDvXzlhziAdfgqN0Syhy8TbjvStN1_sBW7Oc/s32/facebook.png&#39; title=&#39;Be Our Fan" /><a href="http://www.facebook.com/BestBloggerTricks" target="_blank">Follow Me on Facebook!</a>
</div>
<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;"> <img alt="google plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBwy02_xoeM2XIZppbph9BGNwJo9s_n7ofZg_H7PIF2ySdVsXHtEcPOMhfcH8zhy4gf1egYHeRRCXDmCpJHe90x6qfctHT6JhIr7RmMnmsukMI6mWZwHP49Xfqbt703wuM6irR3NC44M/s39/g-plus-logo.png" /><a href="https://plus.google.com/+MuhammadUsmanGhani" target="_blank">Add Me on Google+!</a></div>

Customization:

• Replace Best-Blogger-Tricks with your Feedburner ID.
• Replace ItsGhani with your Twitter username.
• Replace BestBloggerTricks with your Facebook username.
• Replace +MuhammadUsmanGhani with your Google+ ID.
• Then click Save button and Enjoy!

Congratulations: You have successfully added Mega Social Media with Search Box Widget in your blog. I am sure this will increase your social media followers and this will help to increase your blog traffic through social media. 

If you have any query about this post then feel free to comment below.We will reply as soon as possible. Stay Blessed and happy Blogging. :)

Allah Hafiz till next post.