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

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

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’/>

#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.

Must Read

How to Fix QuickBooks Error 6000

How to Fix QuickBooks Error 6000: QuickBooks Error- With QuickBooks' assistance, you can deal with your costs, solicitations, and...

5 Things You Should Think Before Choosing Online Exam Software

5 Things You Should Think Before Choosing Online Exam Software: Amidst covid19 outbreak, the digital era is flourishing at...

What Can Prospective Buyers Expect from the Huawei P40 Pro?

Having been delayed in its release, the Huawei P40 Pro is now set to hit the shelves in India towards the middle of June,...

Create Your Logo Online- The Free Logo Generator

If you are looking for the best and the most reliable application for logo generation and designing, then you are in luck today because...

Convert & Download YouTube Music Tracks into MP3

In the music lover community, the MP3 is globally known as the most widely used audio file format and because of this, almost all...