Add Social Media Share Widget With Search Box For Blogger

By : Follow Trends

On : 9/02/2015

In : Widget

0 comments

1.  Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below code.

<style type="text/css">
#search{width:268px; border:1px solid #E0DFD9;margin: 0 0 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbsdI-iirPohkfhBLzZA5BRjKMSBa7F8gqAALe5rd5l6yI3pcq11rITOOwUqu2VVNvKIglv7NHMwWEDZTIjXPKqz_0OAVjAcKLAz0JP4fWRQ7QBgiZrIj-5OgrkDLBGkxE1Xtc6ENQgFo/s1600/search-bgg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden} 
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left} 
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px} 
#search-wrap{padding:15px 0} 
.topsearch #search{margin-top:0;margin-bottom:10px}
.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px} 
</style>   
<div class='topsearch'> 
<div class='clerfix' id='search'> 
<form action='/search' id='searchform' method='get'> 
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/> 
<input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieWuxJEpKWN-cNY6Eyd8lxc5Yga7KrxQ2iBgYtSpdrP_5B0WPAKbvwiOB-z_LxxEiLriRCaZKO7m5dd6KJ8QHlGPd00lSD0cZj_zHCUAG5fJ75yD_H260u5oYybI8yMUXnNMx1oaz8sOc/s1600/searchico.png' title='Search' type='image'/> 
</form> </div> </div> <div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'> 
<img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY2f_s_e72ivWRmjl2UTO0CWO7GwpD9Xn6SZLIOegONg6m3aNo-ChWLObK6eXgHUh-FwLOR1CqwNU6yPwZPW40kzlfirza2kDoAnEcGhpVLe9l3e3vOwWtx9uTz0Fk_7CzOwaTCnZXdTY/s1600/social-rss-box-orange-icon.png' title='RSS Feed'/><div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:10px;'> 
<a expr:href='data:blog.homepageUrl   &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a> </div> 
</div> <div class='social-connect-widget' style='margin-bottom:10px;'> 
<img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLvR35WfznSrmE8SMEItofBQk9bAQ05qfe5EKUqNiplgJT_K0yEjMhAhTUatHTZ4UyUUgQ6SQOpw_UYDUuGFMY8OBReGNvxNZMQ9bQmjeW_0KUSRy90A4MJ_J5jO3u8dtlfaWF9pJ7kY/s1600/social-twitter-box-blue-icon.png' title='Follow Us on Twitter!'/>
<div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:10px;'> 
<a href='http://twitter.com/USERNAME'>
Follow Us on Twitter!</a> 
</div></div>
<div class='social-connect-widget' style='margin-bottom:10px;'> 
<img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hbfnAQgTRvmtd1KrbphbOKWe39UE-qG8mazmtNB_dXXRDfKLjFL39yO7HnTK02C0vLzgYQ_NeAX2x7yANWwTWRlmAE5WP64gqAfvk3Cyv3GRCbWWcqD6H_cznk3g4YH9YdW5kjq6vaw/s1600/social-facebook-box-blue-icon.png' title='Be Our Fan'/>
<div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:-10px;'> 
<a href='http://facebook.com/USERNAME'> Follow us on Facebook! </a></div><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8SXzGvSVuv5274hgwfHBm8q4oc3roccP_AcScCzjnDj6on1SUTu0yQtti6CAivMFjxKfOaR7Yp590kZEcag9HWG7jfoPtZFzd4HynviTgaFFVKJrSHUcPbzP6e6KMhrcJxabPJOOo2Bc/s1600/image.png' target='_blank'/></a></div></div>

Replace UserName with your twitter Username
Replace UserName with your Facebook fan page Id 
                                 
4. Save HTML/Javascript. you are done.