How to Add Flat Slide Out Social Sharing Buttons Inside Blogger Template

0 /

Also Read

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 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:
social media slider share button inside blogspot template
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'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.
/* 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 5. Now Search for <head> by Pressing Ctrl+F keys.
Step 6.Copy the below Font Awesome Icons stylesheet and paste it just below the <head> tag.
<link href='//' 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=''/>
<script src='' type='text/javascript'/>
Step 9. Now Search for <div class='post-footer-line-1'> or <data:post.body/> and paste the below html code just above it.
<div id='bsdbutton-count-share'>
<div class='facebook button-share'><i class='bsdicons'><i class='icon-facebook icon-large'/></i>
<div class='bsdslide-share'>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;; + data:blog.url' type='button_count'/>
<div class='facebook button-share'><i class='bsdicons'><i class='icon-facebook icon-large'/></i>
<div class='bsdslide-share'>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
<div class='google button-share'><i class='bsdicons'><i class='icon-google-plus icon-large'/></i>
<div class='bsdslide-share'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<div class='twitter button-share'><i class='bsdicons'><i class='icon-twitter icon-large'/></i>
<div class='bsdslide-share'>
<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='' title='Share via Twitter'>Tweet</a>
<script async='async' src='' type='text/javascript'/>
<div class='clear'/>
<div class='clear'/>
Step 10. Now Save your Template..Done ! 

learn trick to adding display show flat ui color stylish unique slider slide out sliding social media sharing buttons below the post title in blogger or just in the end of the post footer.



Post a comment Blogger Disqus

0 Comments on "How to Add Flat Slide Out Social Sharing Buttons Inside Blogger Template" So Far - Comment Now!
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Team Bloggersstand