| Socialize It | Tweet |
If you want a post or an article to be public then the main thing your blog need is good and attractive social media buttons widget embedded very well in your posts, above all it should be placed where it catches the attention of visitor and then it should allow your readers to share conveniently.
I am going to share with you guys a very neat and beautiful floating sharebar widget for blogger this widget uses jquery and the awesome thing about this widget is that it actually does what it is designed to do, it catches the desired attention of your readers and the next thing is clicking the share or like button which is then totally up to the reader whether he share your article or not.
Just follow these simple steps below and you are done!
1.) Go to Dashboard > Template > Edit HTML > Click Expand Template Widgets checkbox
2.) Now you need jquery plugin embedded in your blog template as this widget is jquery based,
Now to add jqeury to your template find </head> and place the following code just above </head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>Note : If you already have jquery plugin embedded in your template ignore Step 2 and move on to the next step
3.) Now paste the following code before </head> tag
<b:if cond='data:blog.pageType == "item"'>4.) The last step is place the widget code where you want the share buttons to appear, this widget looks great and designed to appear before post content and after title so we are going to paste it this way.
<style type='text/css'>
/*<![CDATA[*/
#w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
#w2bSocialFloat td{padding:4px;margin:0;border:none;}
#w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
#w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;
jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Stumbleupon
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Digg
(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>
Find <data:post.body/> and paste the following code just before it
<b:if cond='data:blog.pageType == "item"'>Note : If you found <data:post.body/> tag more than one time then look for
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table width="100%" class="w2bSocialFloat">
<tr>
<td>
<a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
</td>
<td>
<iframe expr:src=""//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
</td>
<td>
<div expr:id=""w2bPinit-" + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
<data:post.body/>
<script type="text/javascript">
w2bPinItButton({
url:"<data:post.url/>",
thumb: "<data:post.thumbnailUrl/>",
id: "<data:post.id/>",
defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0em28txJfU8gYT_TZezoL1rgALlBMsdnHh4qSU6N5laCRpaE8R9QfDPDsQV-W9pYaYMHQ-lvVULTLIMNgrXxmCIRLUZXGydtpgO8DuKzK62EAlC_8BcN-0YApWE6pZz60f6HLpZIfXm7V/s1600/w2b-no-thumbnail.jpg",
pincount: "horizontal"
});
</script>
</div>
</td>
<td>
<div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
</td>
<td>
<su:badge layout="1" expr:location="data:post.url"></su:badge>
</td>
<td>
<a class="DiggThisButton DiggCompact"></a>
</td>
</tr>
</table>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/> and paste the given code between both tags.
That's It! Now look at your posts you have this amazing widget installed on your blog!
Credit for this amazing widget goes to Way2Blogging do check them out.
I hope you like this post please share this with your friends and if you have any questions related to this widget you can ask me below in comments.
|
|
0 comments:
Post a Comment