A New Vertical Floating Social Sharing Bar With Counter.

Hello, Guys.Social Networking sites has became the center of the activities of the Net.Because it able to attract each and every internet user either homes, School, Offices, Communication etc.Today we are bringing here a new  vertical floating social sharing bar with counter and it will only show when you will open a blog posts.Which will give to your readers to share the page immediately by the vertical floating bar.Actually floating bar helps to increase Facebook likes, Twitter Tweets and etc.This vertical floating social bar comes with Facebook, Twitter, Pinterest, Google Plus, and Share buttons.This widget is very easy to install on your blog.So, Guys let's follow the given below steps:

                                                              LIVE DEMO


How To Add it On Your Blogger/Blog?

  • Log In To Blogger.com
  • Go To Your Blogger Dashboard
  • Navigate To Template And Click On Edit HTML
  • Find <b:includable id='post' var='post'> (Using CTRL+F)
  • Paste The Following Code Just After/Below <b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.TechBlogGuide_social_floating {
    position: fixed;
    bottom: 10%;
    margin-left: -60px;
    float: left;
    width: 60px;
    background-color: #f7f7f7;
    padding: 5px 0 0px 0px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    z-index: 9999px !important;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.TechBlogGuide_social_floating .TechBlogGuide_side_social_button {
    margin-bottom: 5px;
    float: none;
    height: auto;
    width: 60px;
}

.TechBlogGuide_social_floating .st_twitter_vcount, .TechBlogGuide_social_floating.st_plusone_vcount, .st_email {
    margin-left: 5px;
}

.TechBlogGuide_social_floating .st_fblike_vcount {
    margin-left: 5px;
}

.TechBlogGuide_social_floating .stButton_gradient {
    background: none !important;
    height: 21px !important;
    padding-left: 0 !important;
}

.TechBlogGuide_social_floating .chicklets, .TechBlogGuide_social_floating .stMainServices {
    background: url(&#39;
    http: //1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;
    ) no-repeat !important;
    height: 19px !important;
    width: 45px !important;
    padding: 0 !important;
}

.st_email .chicklets {
    background-position: 0 -77px !important;
    background-image: url(&#39;
    http: //1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;
    ) !important;
}

.TechBlogGuide_social_floating .st_twitter_vcount .st-twitter-counter {
    background-position: 0 -58px !important;
}

.TechBlogGuide_social_floating  .stButton_gradient {
    border: none !important;
}

.TechBlogGuide_social_floating .stBubble_count {
    width: 44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top: 7px !important;
    height: 23px !important;
    background: none !important;
}

.TechBlogGuide_social_floating .st_twitter_vcount .stBubble_count {
    color: #00a6df;
    background-color: #f8fbfc !important;
}

.st_fblike_vcount {
    margin-bottom: 0px;
    display: block;
}

.st_twitter_vcount {
    margin-bottom: 3px;
    display: block;
}

.st_email {
    margin-bottom: 5px;
    margin-top: 3px;
    display: block;
}

.TechBlogGuide_social_floating .stBubble {
    background-position: 21px 31px !important;
    height: 35px !important;
}
</style>

<div class='TechBlogGuide_social_floating'>
 <script type='text/javascript'>var switchTo5x=true;</script>
 <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
 <span class='st_fblike_vcount' displaytext=''/>
 <span class='st_twitter_vcount' displaytext='' st_via='AsadReza2006'/>
 <div style='margin:5px 0 0px 0;'>
  <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
  <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
  <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
  </script>
  </center>
 </div>
 <div style='margin:0px 0 0 5px;'>
  <span class='st_plusone_vcount' displaytext=''/>
 </div>
 <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
  <a class='addthis_counter'/>
 </div>
 <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;TechBlogGuide&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#CF152A&quot;
}
 </script>
 <span class='st_email' displaytext=''/>
 <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>
  <a href='http://TechBlogGuide.blogspot.com' style='color:#CAC8C8;'>Widgets</a>
 </p>
</div>
</b:if></b:if>

 Customization:

  • Replace  The Highlighted Text With Your Own Twitter Username.
  • If You Want To Change Position Or Background Color Of The Bar Then Easily Edit The Lines Of  6-10.
  • That's All

Comments

  1. Thank you for some other magnificent article. Where else could
    anyone get that kind of info in such a perfect approach of writing?
    I've a presentation subsequent week, and I am on the look for such information.

    Feel free to surf to my page mouse click the up coming document

    ReplyDelete
  2. Cool blog! Is your theme custom made or did you download
    it from somewhere? A theme like yours with a
    few simple tweeks would really make my blog shine. Please let me know where you got your theme.
    Many thanks

    Feel free to visit my web site - click through the next article

    ReplyDelete
  3. I’m not that much of a internet reader to be honest but
    your sites really nice, keep it up! I'll go ahead and bookmark your website to come back later. Many thanks

    Have a look at my site :: Our Web Page

    ReplyDelete
  4. It's not my first time to pay a visit this site, i am browsing this website dailly and take nice facts from here daily.

    my blog post ... http://e-diocese31.cef.fr/author/BirgitW90

    ReplyDelete
  5. It's appropriate time to make some plans for the longer term and it's time to be happy.

    I've read this publish and if I could I wish to counsel you few attention-grabbing issues or suggestions. Maybe you can write next articles regarding this article. I want to learn more things approximately it!

    my website ... http://www.polab.co.kr/xe/878256

    ReplyDelete
  6. Great post. I was checking constantly this blog and I am impressed!
    Very helpful information specially the last part :
    ) I maintain such information a lot. I used to be
    seeking this certain info for a very lengthy time. Thanks and best of luck.



    my web blog :: buy peptides

    ReplyDelete
  7. Hello, after reading this awesome post i
    am as well happy to share my experience here with mates.


    Also visit my web page Author's external home page... - -

    ReplyDelete
  8. Ever wanted to get free Google+ Circles?
    Did you know that you can get these ON AUTO-PILOT AND TOTALLY FREE by registering on You Like Hits?

    ReplyDelete
  9. The post is very nice. I just shared on my Facebook Account.


    Checkout my site to Buy Cheap Facebook Post Likes

    ReplyDelete
  10. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. OMC repair parts

    ReplyDelete
  11. The post is very nice. I just shared on my Facebook Account.

    Checkout my site: Facebook Likes

    ReplyDelete

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries/questions as soon as possible.

1. Feel free to ask
2. Please do not spam, Spam comments will be deleted immediately upon our review.
3. Click on subscribe by email to get replies to your comment
Regards,
Md.Asad Reza

Popular posts from this blog

How To Remove "Powered By Blogger"

How To Show Comment Rule Before Blogger Comment Box

We change Blogspot to Custom Domain.