Saturday 8 December 2012

Hi friendzz today im going to tell u how add Floating Bar with Facebook Twitter Pinterest & Other Sharing Buttons.....

Adding Floating Bar To Blogger

Steps are:
  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Click Proceed
  5. Then Click Expand Widget Templates
  6. Search for
<b:includable id='post' var='post'>

 7.   Just below it paste the following 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/AVvXsEixGMsErquCOtl0He_Q-vsiaAoPub_NZB1YpBejzceL0nYxgLSwF3mCzcp8qmhyphenhyphenH1OT9W_BrqXPYoi9YRilYDDiF7BZyOtSxLzr4GP3baYoRNm7pIrbll9JG9qmpLHZgn7fPRYG0r59UcIz/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/AVvXsEixGMsErquCOtl0He_Q-vsiaAoPub_NZB1YpBejzceL0nYxgLSwF3mCzcp8qmhyphenhyphenH1OT9W_BrqXPYoi9YRilYDDiF7BZyOtSxLzr4GP3baYoRNm7pIrbll9JG9qmpLHZgn7fPRYG0r59UcIz/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; }.mbt_social_floating .st_pinterest_vcount{    margin-left:5px;}.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{    background-position:0 -19px !important;}.mbt_social_floating .st_pinterest_vcount .stBubble_count{    color:#FF0505;    background-color:#fbf8f8 !important; }.mbt_social_floating .st_pinterest_vcount .stBubble{    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Vxvodfgp0BCbJjIdzNfJmdtb871wtJJlAb1YdiQlvDE2yXoFxi-DoFnsyLEXqfenNDrJRjikhRrIdgSva8nvuN8QdJqSVcp97W55Y6AuMQnry2oaCD2JFthpqkzNqGdmZZvUjo4AAv4c/s400/bubble_arrow_pinterest.png') !important;}.st_pinterest_vcount{    margin-bottom: 0px;    display: block;}</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='tricksdonor'/> <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'/> <script type='text/javascript'> var addthis_config = {      ui_cobrand: &quot;TRICKS DONOR&quot;, ui_header_color: &quot;#ffffff&quot;,      ui_header_background: &quot;#0080FF&quot; </script> <span class='st_email' displaytext=''/> <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://tricksdonor.blogspot.in/2012/12/how-add-floating-bar-with-facebook.html' style='color:#CAC8C8;'>Widgets</a></p> </div> </b:if></b:if>

Just replace tricksdonor  with your twitter username.  
you can change position:fixed; bottom:10%; margin-left:-60px; float:left; background-color:#f7f7f7;
 8.  Save your template and you are all done! 

0 comments:

Post a Comment

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. You Can add HTML CODE in comments.
2. You can always Test the tutorial.
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.

Regards,
Saeed Aquib Ahmed :)

Member
Blogger Widgets

Grab This Gadget »

Powered by Tricks Donor
Subscribe
emailSubscribe to our mailing list to get the updates to your email inbox...
Delivered by FeedBurner | powered by Tricks Donor
  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube