Social media is very important in these days.In this tutorial im gonna explain,how to add social media widget with search box for blogger.Social media always helps to bring quality and fast traffic to your blog.All bloggers must use social medias sites like Facebook, Twitter,Linkdin.By sing this social media widget, you can link with your social profiles.And other thing is, this widget include with search box too. So, you can save your blogger side bar space by using this 2 in 1 widget.In this post im gonna explain how to add social media widget with light search box for your blog. Im using css3 and HTML for this widget. you can take a look at in demo page.
1. Go to Blogger Dashboard > Layout
3. Paste below code.
<style>
#btrixwidget{width:307px;
padding:0 0 5px 0;
border:1px solid black;}
#btrix-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaYIfsBR7OKMwA67bc6YUPFPHyC9NQCjVhFgunGtdf03XlueS2PngPuWmKplejUXXe8RfILra-GCjrv2m_gIq6ElypvA3alUeGlX7kY9Jry4-5yXSBqoTq-_dvFJ5YLHnecYWZ-k5nGO1j/s1600/blue.png) no-repeat scroll center center transparent;
width: 307px;height: 50px;disaply: block;}
form#btrix-searchform {
display: block;padding: 9px 16px; margin: 0;}
form#btrix-searchform #s {
padding-left: 24px !important;padding: 7.5px;margin: 0;width: 198px;
font-size: 16px;font-family: georgia;font-style: italic;color: #666666;vertical-align: top; border: none;background: transparent;}
form#btrix-searchform
#sbutton {margin: 0;padding: 0;height: 40px;width: 74px;vertical-align: top;
border: none;background: transparent;}
</style>
<div id="btrixwidget"><center>
<a href="http://twitter.com/bloggertrix" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidt68o9W-rAnmAjc_1msmXYENzYQ2lKsTl9DeaCJ0-Lcv_Twwg7obIv_Zi20rfQRBILMTVQkvnqKgh4sUzwVACglujfaqBZwwqg_9-kKS8R8d7ErgSVdmG1_Fg0sT3gVxIXiHC0VpN9hc/s1600/btrix-twitter.png" alt="" title="twitter" width="62" height="78" class="alignnone size-full wp-image-6249"></a>
<a href="http://www.facebook.com/bloggertrix" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO9RkKx95iA1_TJPKY8QuKCZttMc3gF18_1-LRLGEW6TOdD6RPaHd1NwMGGlPQTAbhsenhT2EC1XEgVdd-F1UAU0_5Uzy4pjxERrm8Jrn3x6KozB1TJSjavnof0XDhEiYNb_ScEcbxRuY/s1600/btrix-facebook.png" alt="" title="facebook" width="62" height="78" class="alignnone size-full wp-image-6248"></a>
<a href="http://feeds.feedburner.com/bloggertrix" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDgWDgnX6ckWlvF0ZYKdGCuFfbVKV_zQ6MwPF7U2v07F17Etkizl46aRjp9Wnb9p9VVJIOUsoB2NaMR7K-EzFI-xnXZN2BVxuK76ED1kTP7nvddINLxDbeJ6pIgzEnT2rwI6IRcWhOWug/s1600/btrix-rss.png" alt="" title="rss" width="62" height="78" class="alignnone size-full wp-image-6251"></a>
<a href="http://au.linkedin.com/username" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGtED51H8L7umH-y-K4G-lPL0xu5-U-1gyb2s_7hyphenhyphenWZnfURwSQcaRy13t3fA3bhslk-FpZeoy1uS2QqnLAL-IGMZugneCj4mTKSK65leGVc5xV1har3PXzScFff0N2x22AyOiZLFkelZU/s1600/btrix-linkedin.png" alt="" title="linkedin" width="62" height="78" class="alignnone size-full wp-image-6250"></a>
<div id="btrix-searchbox">
<form id="btrix-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
onblur='if (this.value == "") {this.value = "Search...";}' />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
/>
</form>
</div>
</center>
</div>
Replace bloggertrix with your twitter profile
Replace bloggertrix with your facebook profile
Replace bloggertrix with your feedburner profile
Replace username with your linkedin profile
4. Now save your HTML/Javascript'.
You are done. If you have any problem related to this Stylish Social Media Widget. Just leave a comment.I will help to you.
