So first of all how this widget looks like you can get a preview of this widget on the right hand side you can see the image, well currently I don’t have any working in action preview for this widget but if you are an old reader on my blog than you might have seen this in action.
So come back to the ingredients of this blog so you don’t have to edit any code lines you simply have to follow the steps below and than you will a working floating sharing widget for your blog.
1. You have to sign in to your Blogger.com Dashboard & than choose your Blog in which you wanna add this amazing floating sharing widget.
2. Now click on Expand Widget Templates and press Ctrl + F to open the search now just make a search for <b:includable id='post' var='post'> and right below it paste the below code.
<!-- floating page sharers Start mediarips.blogspot.in--> <style type="text/css"> #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Widget by mediarips.blogspot.in"> <div class='sbutton' id='fb'> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div> <div class='sbutton' id='rt'> <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script> </div> <div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div> <div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://">widget</a></div><!-- Do not remove this link --> </div> <!-- floating page sharers End mediarips.blogspot.in -->
3. Now click on Save Template and your floating sharing bar is ready to be shared with your readers for further sharing.
Customizing Floating Sharing Bar :
Now for the customization part your can simply edit the red numbers in above code to main the margins in horizontal position.
Secondly if you just wanna show this widget in your posts you can add the above code inside the below code and than follow the same steps for pasting it.
<b:if cond='data:blog.pageType == "item"'>
Paste above code here…
</b:if>
That’s it now your widget is ready and can checked by refreshing your blog, well if you find any problem just comment below so that I can fix them out.
0 comments:
Post a Comment