How to add a social media sharing widget to blogger blogs

Hello friends, Today ,in this tutorial I will present a new way to create a sharing widget with social media contained of facebook, twitter ,Google+ ,rss feed and many more buttons to share posts. This social media sharing widget also contained of a search box also. This sharing widgets lets a visitors to share your post on facebook, add you on Google plus, follow you in twitter , subscribe your rss feed, like your facebook page and search your blog. This widget is extracted from a template by me and I make it a user friendly widget and more helpful to you.

Also read-   How to submit a sitemap to Google.

                  Create a Simple Welcome Bar for your Blog.

Make a social media sharing widget for blog-

Follow these steps below to add this sharing widget to your blog

1. Go to Blogger > Dashboard.

2. from dashboard click on template.

3. First backup your template and then click on edit html.

4. Now search for ]]></b:skin> and paste the following code.

/*  -------------SOCIAL SHARE WIDGET BY HT4U-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvyRmHhiowUniJ3EhdwEgSqLEVSc6GDZsfiIoSVLvyG3G6HYzD-HBNNDR3UJpyZubBQt4ynKDO1d_kTuyZLeIOPwE1QsfFH-owVOAliq5xvYvVJnWj4sSyrx5iOawg5B7bIdWMkki0B-Y/s1600/search-bg.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}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.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}

Note- You can change the width of the search box

           You can change the width of search input area.

     4.    Then Search for   <div id='sidebar-wrapper'>-

             Note: In this part most of you will face problems as the coding for each template differ. If you                       Could not find this code then do not panic and simply post your Blog URL in the comments.

     5.   Now Paste the following code just below it,

<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/AVvXsEjn1T2qZP0KVM2BDcMJglaOLjDzLgPLja2tD613vebpNbu5FmHd_uVa767NBMk11QxRy7xQsmv70ZSKwI4YjRK4YGYaHMft5UOQmEWiRvymo3wlyW1iqseP0vhMx3lF6IKWIf0V3aDt_RU/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>
<div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Sd-DIsLHm6H9g-BD9skIUVCXTy_NTVUNpv6TZNsysrigYRpT3aHeOKrGJ4vL16W_1qGrgFPkOmUrY8ABczdLTQ9dcHf5q1v0YLGKU-LoxNlZRTLPUCpgxbyuHtWHv49wW_Nf1zCE4Gvg/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a>
</div>          
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikyCZUFhfXw3xnmxlmtK9VyaFR6oNhvhak6PYGOWmsGNIQHtIwJcJFxsqOJgePQrDjmqf68e6PxwEuf5jasBwLJI5RxNB3Da5oqglZ9NbW32OHTqZuG3sgQYa32wLzjC5SE2ZUuwmKgXhS/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX5VmeewNGpCxm772fyfX3Db0Ev2Z3QQcbyMbBHczWEO_ih1aYbGF2ObNswet27S2r3_S7jTxUkxKoBoyvRPeiCLatkKjm5MFTFQ8hU9p_PwpVuzl3rWSj_q7w2IHngOUh_wAdlnwk9vE7/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>
<div style='clear:both;'/>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitd3fXTt2MtT9XdZfc-kPj8uxvwFpOzwmMF2W9XKC0aLM6JjrxoGWdTO6ZSk2RJtQZVQBAflQiI8Zcs0HtHAQNmZ2lVlonWKaMG4GcXREXNuI6HKumDVuWfI0xHujPVWZZ3jvQ1sOSIm0/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY86guwHYdTvEKw5_36XbRCDycxuCBJTO3lNM_53SPF3QwY92tTefv26fLA8QX-ydWBRLLWyIeoKimkSzlJuG20P7zxLmviRCXNrbmBzOqfkVtGAEWdk76lSPzxIsHnmsFLenqyrXF1Fc/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xtDhcoPNvAnlv4NTuA296J6nkEaYInXlobqGLSype7by-2F1sSQKM7IhiC87R9gj3dVhzVUWx4NpYMTzAWqgZ0PALXxz1KATOGfY5fu2Htd0gILIV3pxfHX6ZLkq16rhIWBlhWXEo1s/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRoivPrAHvtJPUn7Z0tPKv82W3U0AJBAk36N_ZMBsvWYyJ96AL0EphYupEJiHoMQ6NxHcJuHxLrY5QAiRW-dOo12Z0vtvufAsBHYsR6MLPT71-joM17lE_6WtKUObrknP_dodFYedTy3Q/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7XR4l05_PhEuwjvQm230Rs_sgYG70Qev2HqhSzI75OzXKW7a2T8NUEEyGWtQrmNpIpLWdgPqd4kT_xZ_IbJsXlTxuMSirvCbUOEp_1dT3bXOUzB6qEizRjmptFlGSc-8MIc0oF_SjpU/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1yEAVv1_4KFSEPKCXC25AX8qV1nqavRJYtCTL1di9s0AqYv8aAAOdcu-Y_8aNL8VPJU7ZBMYQa1wZ3Hr8X0FTvL95h9KM1WVFS2CTak8-jTyzzUJAcH5V54K6DE5Paa1HTepEm82bx3I/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6I-ql_cVquJV1Au2Zy9wHHSL0M5T0I0AKlZQ5oP-iTYf50zI4tDHpSyoSr1EiOjq0YFx4bPVVr_ED0csGerWenpH9qpKNaINb838cgUdPQjyq8DRzEnrU95s9xWxwFi4ilD8d6FNrgXU/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>

6. Change your usernames with-

FACEBOOK USERNAME=”your username”

TWITTER USERNAME=”your username”

RSS FEED URL=”your rss feed url”

7. Now save the Blog template. Now a box will be appear of social sharing buttons on your blog.

    And I hope that you would like this social media sharing widget. Keep reading my posts-

·         How to Install Whatsapp in PC with Blue stacks.

Need Help-

If you don’t want to get into a serious problem in editing a template then tell it to us (submit a request to us by commenting below) we will try to solve it for you absolutely free. This is a limited offer by hackintricks4u.blogspot.com to get their free services.

Share This

Related Post