Friday, December 7, 2012

Widgets

0

Floating Social Widget For Blogger

  • Friday, December 7, 2012
  • Unknown

    • Vertical Floating Social Widget For Blogger

    floating social widget for blog

    Social Website is must for blog among the tough competition among the websites as it bring valuable amount of visits.Facebook is one among which always stands next to Google +.Here we had already posted the floating social widget with only important socials like facebook,google + and twitter but here   this widget contains all important sharing buttons.

    This blogger widget is restricted to display in only in the post page of blog,so you need to add this widget directly in template.Please take a template back up and follow this trick below.


    Just Log in to blogger and click template.

    Then check or tick "expand widgets template"

    Then find this code like below


    <b:includable id='post' var='post'> 

    
Then below or after the above code add the below code.
    

    

    

    

    
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<style> 
.b4l_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; 
} 
.b4l_floating .b4l_side_button{ 
    margin-bottom:5px; 
    float:none; 
    height:auto; 
    width:60px; 
} 
.b4l_floating .st_twitter_vcount, .b4l_floating.st_plusone_vcount, .st_email{ 
    margin-left:5px; 
} 
.b4l_floating .st_fblike_vcount{ 
    margin-left:5px; 
} 
.b4l_floating .stButton_gradient{ 
    background:none !important; 
    height:21px !important; 
    padding-left:0 !important; 
} 
.b4l_floating .chicklets, .b4l_floating .stMainServices { 
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireQJT1YHU6fmPVhM7pU2oIuuGZn1vUVLUY1JXFWTIgCu0a9bmP_yet_KZujCTL1gpE4PKI1rlKXWQAaMna3mEbX_3GsW4l18l6MwXqoIj2sk1nRLd8wOFSUTMQDykyot5Ts_PwLlPSa-N/s1600/floating-social-widget.png&#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/AVvXsEireQJT1YHU6fmPVhM7pU2oIuuGZn1vUVLUY1JXFWTIgCu0a9bmP_yet_KZujCTL1gpE4PKI1rlKXWQAaMna3mEbX_3GsW4l18l6MwXqoIj2sk1nRLd8wOFSUTMQDykyot5Ts_PwLlPSa-N/s1600/floating-social-widget.png&#39;) !important; 
} 
.b4l_floating .st_twitter_vcount .st-twitter-counter{ 
    background-position:0 -58px !important; 
} 
.b4l_floating  .stButton_gradient{ 
    border:none !important; 
} 
.b4l_floating .stBubble_count{ 
    width:44px !important; 
    font-size: 15px !important; 
    font-weight: normal !important; 
    padding-top:7px !important; 
    height:23px !important; 
    background:none !important; 
} 
.b4l_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; 
} 
.b4l_floating .stBubble{ 
    background-position: 21px 31px !important; 
    height:35px !important; 
}.b4l_floating .st_pinterest_vcount{
    margin-left:5px;
}
.b4l_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.b4l_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important; 
}

.b4l_floating .st_pinterest_vcount .stBubble{
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3koxUM7PiHV2n5cwvd8X30H7qW-7FfPeMlsZnWh0KoCx04vsMx11OybEWUthFNRknPcLlhCTq6YxkE21KHT2mYvr109YnELsE2zrLLchkYWBIhFvxLRbQozGWJ3DBMfrDQDV-mqhp5aKJ/s1600/blog4al-pintrest-arrow.png&#39;) !important;
}


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

</style> 

<div class='b4l_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='subhash_sboss'/> 
<span class='st_pinterest_vcount' displaytext=''/>
<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'/> 
 
<span class='st_email' displaytext=''/> 
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.blog4al.com/2012/12/floating-social-widget-for-blogger.html' style='color:#CAC8C8;'>Blogger Widgets</a></p> 
</div> 
</b:if></b:if>
    

    
Then replace the subhash_sboss with your twitter account name.Then save the template and view any post in that blog you will widget left side of the blog.You can edit color or background of the widget also.

    

    

    


    

    

    
                              Do you like this article? Spread the words!
                            
    
                            If you enjoyed this post, please consider 
                            
                              leaving a comment
                            
                            or 
                            
                              subscribing to the E-mail
                            
                            feed to have future articles delivered to your feed reader. 
                            

    





    



    

    






    

    

    

    

    

    

    

    

    

    

    


    
0
                              Responses to “
                              Floating Social Widget For Blogger
                              ” 
                            
    

    

    

    

    Reply..
    

    

    


    

    

    


                                *Important -
                              
                              If you want to be informed of any replies to your comment, check the "Subscribe By Email" before submitting. 
                              
                                Please Do Not Spam
                              


    

    

    

    
Post a Comment

    

    

    






    

    


    

    


    


    

    

    
Subscribe to:

Post Comments
                          (
                          Atom
                          )