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.
| Sharing Activity |
#1. Add Social Sharing Widget Code:
- Now find the below code in your template
<b:if cond='data:blog.pageType == "item"'>
- 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='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel="nofollow" target="_blank" style='background:#3b5998;'>Facebook</a>
<a expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel="nofollow" target="_blank" style='background:#c0361a;'>Google+</a>
<a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&"' rel="nofollow" target="_blank" style='background:#4099ff;'>Twitter</a>
<a expr:href='"http://digg.com/submit?url=" + 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.watch wazir trailer
This post first appeared on ERobber - Robbing Knowledge Online, please read the originial post: here
