Custom responsive social sharing widget for blogger (or) blogspot platform

As a blogger, webmaster, internet marketer or an entrepreneur, we cannot neglect the power of social media. Social media plays the important role sometimes as a traffic provider

Custom responsive social sharing buttons for blogger (or) blogspot blog


As a blogger, webmaster, internet marketer or an entrepreneur, we cannot neglect the power of social media. Social media plays the important role sometimes as a traffic provider and other times as a factor to change the search engine rank position indirectly. Any website or blog even authority blogs like Mashable and Techcrunch cannot increase the online presence without using social media. Social media will help you drive traffic & boost income.

This is one of my favorite and personal widget which I made by myself with simple HTML knowledge which i gained from StackOverFlow & W3School after making this widget i implemented it on my blog and i am using this widget till now, i am getting good shares around 80% of my visitors share my posts using this widget i placed this widget right below the post and that's the recommended spot. some of my buddies requested me to share my own custom made social sharing widget as an blog post. I am sure you will be satisfied with this custom responsive social sharing buttons widget. this widget is compatible with Blogger/Blogspot & WordPress Platform. Tested over 5+ months works fine.

Also read: OptinMonster Lightbox popup (OptinForm) for blogger/blogspot platform

Advanced features of this widget:

  • Fast loading
  • Responsive widget
  • Professional looking
  • Contains for 4 social media buttons
  • A/B tested widget
  • No clutter
  • Attractive color combo
  • 80% Conversion rate
  • Seo-Friendly (No-follow buttons)
  • User Friendly (opens in new tab
  • Much more...
Getting pretty good social media engagement after implementing this tool. screenshot attached below and i used heatmap tools like hotjar to track the number of clicks this widget gets at that time this sharing buttons was getting 80% convo. rate. it was my one of the major source of traffic.


Social media engagement
Sharing Activity

#1. Add Social Sharing Widget Code:

  • Now find the below code in your template
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  • Place the below codes just after the above code
<div class='clear'/>
<div id='share-button'>
<p>Share this post via:</p>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel="nofollow" target="_blank" style='background:#3b5998;'>Facebook</a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel="nofollow" target="_blank" style='background:#c0361a;'>Google+</a>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;&quot;' rel="nofollow" target="_blank" style='background:#4099ff;'>Twitter</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:blog.url' rel="nofollow" target="_blank" style='background:#000;'>Digg</a>
<div class='clear'/>
</div> 

#2. Add Social Sharing Widget CSS Code:

Follow the steps bellow carefully to add this widget to your blogger/blogspot blog.
  • Go to Blogger Dashboard > Template > Edit HTML.
  • First take backup of your template just an extra precaution
  • Now find ]]></b:skin> in your template
  • Add below codes just above ]]></b:skin>
#share-button{margin:0 0 8px;padding:0;overflow:hidden}#share-button p{float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}#share-button a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}#share-button a:hover{top:1px;
left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)}

NB: Clear cookies and history and check your blog to see how the widget works & you're done !

After trying this professional looking stylish responsive fast loading social sharing widget do drop your experience as valuable comment, i will always engage in comment section if there is any problem in this widget. Do let me know i will surely help you. do drop your valuable comments so that it will motivate to me to provide you much more useful stuffs and do share this post it will help your blog-o-sphere to improve with this amazing widget. Thanks for reading till the end patiently.

COMMENTS

BLOGGER: 5
Loading...
Name

adnetwork,1,alternatives,1,android,9,apk,1,apple,2,appsforpc,1,best of best,1,best sites,1,blogging,12,brute force,1,discount,1,facebook,1,freelancing,1,Galaxy S6,1,gaming,1,gpu brute force,1,hashcat,1,hosting,1,htc,1,internet,1,ios,1,Mac OS X,1,messaging,1,mobile,6,monetize,2,networking,9,news,12,pc,1,reviews,9,Samsung,1,security,2,Social media marketing,3,Software,4,tech,4,top10,6,Tricks/Tutorials,10,Whatsapp,4,windows,3,
ltr
item
eRobber: Custom responsive social sharing widget for blogger (or) blogspot platform
Custom responsive social sharing widget for blogger (or) blogspot platform
As a blogger, webmaster, internet marketer or an entrepreneur, we cannot neglect the power of social media. Social media plays the important role sometimes as a traffic provider
https://1.bp.blogspot.com/-Hx6StZJypLo/VTNUbS0kSPI/AAAAAAAAA7w/rG0aM6B1oDc/s1600/Custom%2Bresponsive%2Bsocial%2Bsharing%2Bbuttons%2Bfor%2Bblogger%2B(or)%2Bblogspot%2Bblog.png
https://1.bp.blogspot.com/-Hx6StZJypLo/VTNUbS0kSPI/AAAAAAAAA7w/rG0aM6B1oDc/s72-c/Custom%2Bresponsive%2Bsocial%2Bsharing%2Bbuttons%2Bfor%2Bblogger%2B(or)%2Bblogspot%2Bblog.png
eRobber
http://www.erobber.in/2015/04/custom-responsive-social-sharing-widget.html
http://www.erobber.in/
http://www.erobber.in/
http://www.erobber.in/2015/04/custom-responsive-social-sharing-widget.html
true
3688341155246513435
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy