The widget is light in size and looks elegant. In every post after scrolling the widget will pop up at the lower bottom of the screen. The widget contains four social sharing buttons - Facebook, Twitter, Google+, LinkedIn. There is a close button too to close down the floating share buttons.
adding the widget ................
First go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for <data:post.body/> code and paste the below given code just below <data:post.body/>.
NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code
<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'/>
</b:if>
then Add the code and follow the next step.
Adding the HTML/CSS/JS in HTML Editor.
To add this widget you have to go to Blog Title → Template → Edit HTML and add the below given code just above </body>.
<b:if cond='data:blog.pageType == "item"'>
<script src='http://files.khatriscreation.blogspot.com/Scripts/abt-floating-share.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block;
position: fixed; bottom: -450px; left: 0px; background-color: rgba(128,
128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'> <a class='boxclose' id='boxclose'/>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0
2px 3px rgba(71,71,71,0.31);padding:14px
7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0
7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px
0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon
i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0
3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open
Sans;font-weight:400;border-left:1px solid
rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button
.slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s
ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s
ease-in-out;transition:all .2s ease-in-out}.facebook
iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}.twitter
iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google
#___plusone_0{width:70px!important;top:10px;right:15px;position:absolute;display:block;z-index:1}.linkedin
.IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}.facebook:hover
.slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover
.slide{bottom:-40px}.linkedin:hover .slide{left:-150px}.facebook
.icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter
.slide{background:#00cdff}.google .icon,.google
.slide{background:#d24228}.linkedin .icon,.linkedin
.slide{background:#007bb6}</style>
<div id='share-buttons'> <div class='facebook share-button'>
<i class='icon'> <i class='icon-facebook'> </i>
</i> <div class='slide'> <p> facebook </p>
</div> <iframe allowTransparency='true' frameborder='0'
scrolling='no'
src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fkhatriscreation&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351'
style='border:none; overflow:hidden; width:80px; height:20px;'>
</iframe> </div> <div class='twitter share-button'>
<i class='icon'> <i class='icon-twitter'> </i>
</i> <div class='slide'> <p> twitter </p>
</div> <a class='twitter-share-button'
data-via='khatriscreation' href='https://twitter.com/share'> Tweet
</a><script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,
'script', 'twitter-wjs');
</script>
</div> <div class='google share-button'> <i
class='icon'> <i class='icon-google-plus'> </i>
</i> <div class='slide'> <p> google+ </p>
</div> <div class='g-plusone' data-size='medium'>
</div><script type='text/javascript'>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
}
)();
</script>
</div> <div class='linkedin share-button'> <i
class='icon'> <i class='icon-linkedin'> </i> </i>
<div class='slide'> <p> linkedin </p> </div>
<script data-counter='right' type='IN/Share'> </script>
<script src='//platform.linkedin.com/in.js'
type='text/javascript'> lang: en_US </script>
</div></div><div style='display:block; margin: 0 200px;
padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color:
#000'> Don't You Think this Awesome Post should be shared
??<br/> <span style='color: #000; font-size: 18px;'>|
<data:blog.pageName/> |</span> </div> </div>
</div> </b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
After adding the code change change khatriscreation with your Facebook Page's ID. Finally save the template.
You are done now. Now you and your visitors can see this awesome Floating Social Share Buttons in your blogger blog.
Welcome To khatriscreation And Let Me First Introduce Myself. I’m Sudarshan khatri From Nepal And I Manage khatriscreation. I’m Not A Professional Blogger By Education I’m Self Trained Guy And I Am 13 Years Old. Well Talking About Me I’m A Normal Guy Who Lives The Life Fullest, Loves Searching New Things On Internet.I love to share my expenience and education to the peoples so i have managed this blog .khatriscreation is totally about blogging,seo,widgets and blogging tips.
ConversionConversion EmoticonEmoticon