affiliate marketing

Sponsors

Add Share this floating bar to Blogger







Today i will explain you how to add Share This floating bar to blogger.com blogs.It is also important for SEO. You can add this floating bar next to your blogger every posts in left sidebar easily for people to get touch with social networking for share your posts to Facebook, Twitter, Pinterest and +1 you post.Most of people ask for How to install this Share This floating bar to Blogger.SO, See how to add Share this floating bar to Blogger.







Installing Share This Floating Bar To Blogger

Step 1: Go to Blogger Dashboard.
Step 2: Click on Template and Edit HTML.
Step 3: Check Expand Widget Template box.
Step 4: Find the following code...(If you don't know how to find codes in blogger template Click Here.)
<b:includable id='post' var='post'>
Step 5: Immediately paste the following codes below above code:
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<style> 
.mbt_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; 

.mbt_social_floating .mbt_side_social_button{ 
    margin-bottom:5px; 
    float:none; 
    height:auto; 
    width:60px; 

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

.mbt_social_floating .st_fblike_vcount{ 
    margin-left:5px; 

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

.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices { 
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxwPEakrpbinlm9BOC8DVZyw3-8nduwk8TSCMvnSu029_FCiOQ2hIiveU4OdmXttYY5zfR0npUO7ZTwgZinK5lNccGmqduRq-Ids4CEBOF5IfMc0Yifj9bQBLAy_6PV20UwbH5sv16YEt/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxwPEakrpbinlm9BOC8DVZyw3-8nduwk8TSCMvnSu029_FCiOQ2hIiveU4OdmXttYY5zfR0npUO7ZTwgZinK5lNccGmqduRq-Ids4CEBOF5IfMc0Yifj9bQBLAy_6PV20UwbH5sv16YEt/s400/gc_social_sprite.gif&#39;) !important; 

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

.mbt_social_floating  .stButton_gradient{ 
    border:none !important; 

.mbt_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; 

.mbt_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; 

.mbt_social_floating .stBubble{ 
    background-position: 21px 31px !important; 
    height:35px !important; 

</style> 

<div class='mbt_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='Blogger Tricky Tricks'/> 
<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;MY BLOGGER TRICKS&quot;, 
ui_header_color: &quot;#ffffff&quot;, 
     ui_header_background: &quot;#0080FF&quot; 

</script> 
<span class='st_email' displaytext=''/>  
</div> 
</b:if></b:if>
Replace Blogger Tricky Tricks with your Twitter username and you have done.
Hope you Enjoyed! 
Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

0 comments:

Post a Comment