How to Add Flat Slide Out Social Sharing Buttons Inside Blogger Template
Hello folks,Today in this article we are going to explain how to add a Flat UI color social media slide out sharing buttons below post title or above the post footer.Later on we will share three more different types of responsive social media sharing buttons for blogger template.These social share buttons looks very perfect and i'm damn sure it suits each and every blog or website niche.you might be thinking of that it will affect your page speed because when you mouse hover on social sharing buttons it will slide out very smoothly to share the post or content.Look below for example how sliding out feature works:
You can see it looks very beautiful.However you guys must be using different types of social sharing buttons below the post title or in the end of the post.it's time to replace them with these beautiful social media slide out share buttons.There is a small mistake in making demo we have not checked that we did not have font awesome style sheet so you can see that from above picture the top one there is you can see social media font awesome icons but in GIF image demo it's not available ,you don't need to worry it will definitely display in your blogger template.So to grab this widget just follow the steps mentioned below.
How to install Slide out feature social media sharing buttons in blogger template
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
Step 5. Now Search for <head> by Pressing Ctrl+F keys.Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* CSS Slide out Share buttons by www.BloggersStand.Com */
#bsdbutton-count-share{width:100%;overflow:hidden;background:transparent;margin:0 auto;padding:3px}#bsdbutton-count-share span{float:left;position:relative;font-size:13px;color:#fff;margin:12px 5px}.bsdbutton1-share{background:#dce0e0;position:relative;display:block;float:left;height:40px;overflow:hidden;width:140px;margin:4px;border-radius:3px}.ikons{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;text-align:center}.ikons i{color:#fff;line-height:33px}.bsdslide-share{z-index:2;display:block;height:100%;left:38px;position:absolute;width:108px;margin:0}.bsdslide-share p{font-family:Verdana;font-weight:400;border-left:1px solid rgba(255,255,255,.35);color:#fff;font-size:14px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.bsdbutton1-share .bsdslide-share{transition:all .4s ease-in-out}.facebook .fb_iframe_widget{display:block;position:absolute;right:5px;top:0;z-index:1}.twitter iframe{left:50px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:90px!important;top:10px;right:5px;position:absolute;display:block;z-index:1}.facebook .ikons,.facebook .bsdslide-share{background:#4f79bc}.twitter .ikons,.twitter .bsdslide-share{background:#63cef2}.google .ikons,.google .bsdslide-share{background:#f36261}.facebook:hover .bsdslide-share,.twitter:hover .bsdslide-share,.google:hover .bsdslide-share{left:180px;opacity:.6}
Step 6.Copy the below Font Awesome Icons stylesheet and paste it just below the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Step 7. Now Search for </head> by pressing CTRL+ F or CMD+F (Mac)
Step 8. Now copy the below script and paste is just above the </head> tag.if facebook script already available in your blogger template then you can skip this steps and same applies for above fontawesome stylesheet.
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>Step 9. Now Search for <div class='post-footer-line-1'> or <data:post.body/> and paste the below html code just above it.
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
<div id='bsdbutton-count-share'>Step 10. Now Save your Template..Done !
<div class='facebook button-share'><i class='bsdicons'><i class='icon-facebook icon-large'/></i>
<div class='bsdslide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='"http://www.facebook.com/sharer.php?u=" + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='bsdicons'><i class='icon-facebook icon-large'/></i>
<div class='bsdslide-share'>
<p>Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'><i class='bsdicons'><i class='icon-google-plus icon-large'/></i>
<div class='bsdslide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
</div>
<div class='twitter button-share'><i class='bsdicons'><i class='icon-twitter icon-large'/></i>
<div class='bsdslide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='@bloggersstand' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>
<div class='clear'/>
