Saturday, January 17, 2015

Beautiful Social Sharing Widget for Blogger

LIVE DEMO
Beautiful social sharing widget for blogger. Many bloggers are like clean and simple sharing widget. You just easily implement this to your blog/website easily.

How to add this social sharing widget to your blog/website?
1: simply Go to Blogger Dashboard >>> Layout >>> Add a Gadget >>> HTML/JavaScript
2: copy and Paste the following below code.
<style>/* Sidebar Widget MyBloggerTools . Com  */.sidebar .social_media { overflow:hidden;  }.sidebar .social_media ul { padding:0; }.sidebar .social_media ul li { margin:0 5px 0 0!important; float:left; padding:0; }.sidebar .social_media .social_media_icon {width:64px; height:64px; display:block;}* social media for sidebar --- */.sidebar .social_media .social_media_icon {}.sidebar .social_media .twitter_icon {background:url(http://4.bp.blogspot.com/-sub0-s_0Qao/VLrV3P05mPI/AAAAAAAAAsI/qNNhdz-zcLs/s1600/MyBloggerTools.png) no-repeat 0 0 transparent;}.sidebar .social_media .facebook_icon {background:url(http://4.bp.blogspot.com/-sub0-s_0Qao/VLrV3P05mPI/AAAAAAAAAsI/qNNhdz-zcLs/s1600/MyBloggerTools.png) no-repeat -74px 0 transparent;}.sidebar .social_media .gplus_icon {background:url(http://4.bp.blogspot.com/-sub0-s_0Qao/VLrV3P05mPI/AAAAAAAAAsI/qNNhdz-zcLs/s1600/MyBloggerTools.png) no-repeat -147px 0 transparent;}.sidebar .social_media .rss_icon {background:url(http://4.bp.blogspot.com/-sub0-s_0Qao/VLrV3P05mPI/AAAAAAAAAsI/qNNhdz-zcLs/s1600/MyBloggerTools.png) no-repeat -221px 0 transparent;}.sidebar .social_media .twitter_icon:hover {background:url(http://4.bp.blogspot.com/-sub0-s_0Qao/VLrV3P05mPI/AAAAAAAAAsI/qNNhdz-zcLs/s1600/MyBloggerTools.png) no-repeat 0 -70px transparent;}.sidebar .social_media .facebook_icon:hover {background:url(http://4.bp.blogspot.com/-sub0-s_0Qao/VLrV3P05mPI/AAAAAAAAAsI/qNNhdz-zcLs/s1600/MyBloggerTools.png) no-repeat -74px -70px transparent;}.sidebar .social_media .gplus_icon:hover {background:url(http://4.bp.blogspot.com/-sub0-s_0Qao/VLrV3P05mPI/AAAAAAAAAsI/qNNhdz-zcLs/s1600/MyBloggerTools.png) no-repeat -147px -70px transparent;}.sidebar .social_media .rss_icon:hover {background:url(http://4.bp.blogspot.com/-sub0-s_0Qao/VLrV3P05mPI/AAAAAAAAAsI/qNNhdz-zcLs/s1600/MyBloggerTools.png) no-repeat -221px -70px transparent;}</style><div class="widget social_media"><ul>                  <li><a class="social_media_icon twitter_icon" href="https://twitter.com/MyBloggerTools"></a>  </li>                             <li> <a class="social_media_icon facebook_icon" href="https://www.facebook.com/mybloggertools"></a> </li>                             <li>  <a class="social_media_icon gplus_icon" href="https://plus.google.com/103611678617885891853"></a> </li>                             <li> <a class="social_media_icon rss_icon" href="http://feeds.feedburner.com/mybloggertools"></a>  </li>           </ul>   </div>

3: Change https://twitter.com/MyBloggerTools with your Twitter (URL)

4: Change https://www.facebook.com/mybloggertools with your Facebook (URL)

5: Change https://plus.google.com/103611678617885891853 with your Google Plus (URL)

6: Change http://feeds.feedburner.com/mybloggertools with your Feed-burner (URL)

7: Save your Layout

8: your new social sharing widget is installed successfully! So enjoy this.

If you have any question about  this social sharing widget you can below comments area. :) 
Previous Post
Next Post

0 comments: