Showing posts with label sharing buttons. Show all posts
Showing posts with label sharing buttons. Show all posts

Putting Social Media Sharing Buttons Below Every Post Title

One way pushing your initial traffic is  by knowing to the world that you have a such kind of blog that is unique from the other blog. In this tutorial, we will put Facebook, Twitter, Email, Print, G-mail, Stumble upon and Add this button. But you can also add another sharing buttons of your like. So let us go with the tutorial.

sharing buttons below post titles


Putting Social Media Sharing Buttons Below Every Post Title


(Always back-up your template)
Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

 sharing buttons below  titles

Step 2. Look for the code <data:post.body/> (choose the third occurrence of the code)
and  just above it, paste the code below,

                       
<b:if cond='data:blog.url != &quot;ITEM&quot;'>
                         <b:if cond='data:blog.url != &quot;ITEM&quot;'>
                                 <!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style addthis_32x32_styles'><table border='0'><tr>
<td><a class='addthis_button_preferred_1'/></td>
<td><a class='addthis_button_preferred_2'/></td>
<td><a class='addthis_button_preferred_3'/></td>
<td><a class='addthis_button_preferred_4'/></td>
<td><a class='addthis_button_preferred_5'/></td>
<td><a class='addthis_button_preferred_6'/></td>
<td><div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;BLOGGINGTIPSANDTRIX&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script></td> </tr> </table></div>
                                   <!-- AddThis Button END -->
                                          </b:if></b:if><br/>

                                           


Step 3. Click preview, then if it is okey, save your template and you are done.
Short customization:
 1. To add one or more  sharing buttons, put the tag below just above this line <td><div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script bla bla bla bla.......

  
<td><a class='addthis_button_preferred _#'/></td>
 Change # sign with next number of your button.
2. Replace ITEM  with the url of the page where you want to hide this particular widget.
3. Replace BLOGGINGTIPSANDTRIX  with the name of your blog.


Putting Sharing Buttons In Your Blogger Sidebar



Step 1. Go to Blogger Dashboard >> Lay- out >> Add Gadget



Step 2. In the pop-up window, scroll down and click HTML/Javascript

adding sharing buttons in sidebar

Step 3. Inside the blank box put the code below and then click Save Arrangement button.

<!-- AddThis Button BEGIN -->
<center><div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_preferred_6"></a>
<a class="addthis_button_compact"></a></div></center>
<script type="text/javascript" src="
http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fdb16d133fdf909"></script>
<!-- AddThis Button END-->

Happy Blogging to all of Us Bro!!!



Adding Multiple Floating Sharing Buttons To Blogger



Another version of  social sharing widgets that also looks classic in its design. Perhaps you have seen the trend of floating sharing count buttons on popular blogs and most of them are traditional. But in this version, we created  it  differently  because it contains custom twitter,facebook, pinterest, google plus and an Email button. Services like Addthis and Sharethis are both doing a great job but they still need to work on some of their plugin integration conflicts. We however redesigned the widget provided by shareThis to create a new one by correcting all flaws. This sharing bar would float to the left of your blog posts and would float as the visitor scrolls up or down. This widget contains counters of important social networking sites that has the potential in bringing more traffic by circulating your content to a wider audience. this widget has been  tested   on major browsers like IE7+, Firefox, Chrome etc. and found it working just fine with no compatibility issues or design conflicts.





Adding Floating Sharing Buttons To Blogger


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

 Step 4.   Just below the code above, paste the following code: 


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.btt_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;
}
.btt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.btt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.btt_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.btt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.btt_social_floating .chicklets, .mbt_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;
}
.btt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.btt_social_floating  .stButton_gradient{
    border:none !important;
}
.btt_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;
}
.btt_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;
}
.btt_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.btt_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.btt_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.btt_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}

.btt_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('http://1.bp.blogspot.com/-meqDjtBStCA/ULFkqTG88qI/AAAAAAAAIGs/hjCRAqGL270/s400/bubble_arrow_pinterest.png') !important;
}


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

</style>

<div class='bbt_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, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
    <!-- No more works properly so removing it from bbt list<span class='st_fblike_vcount' displaytext=''/>-->
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
    <span class='st_twitter_vcount' displaytext='' st_via='Blogtipsandtrix'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</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;BLOGGINGTIPSANDTRIX&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://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

ShortCustomization;

1. Just replace Blogtipsandtrix  with your twitter username.
2.  Replace the following  colored lines with your preferences: position:fixed; bottom:10%; margin-left:-60px; float:left;     width:60px
background-color:#f7f7f7
 { Horizontal alignment - Change the value in red of margin-left -60. Negative value pushes the button to the left of the main blog column and positive value pushes it to the right.  You may increase or decrease the value based on your needs.
Vertical alignment -  To  change the height of sharing buttons, change the value  in blue color . The code positions the button relative to the bottom of your browser window}. 

    Step 5.  Save your template and you are all done and enjoy your day pal!


Optional step:

If in case the facebook like button did not work then add this Javascript SDK code just below <body>


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Credits goes to My Bloggertricks 

How To Add Floating Social Media Buttons To Blogger


Having a "Floating Social Media Sharing Buttons" is a very widely used type of  widget on all outstanding blogs/websites for it  increases the number of times your posts being shared on social networking sites such as Twitter, Facebook and many others . Furthermore, it has some of the following functions: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and RSS Feed , each of them has comes with a live counter.

How To Add Floating Social Media Buttons To Blogger


Follow the steps below:
floating social media buttons

Step 1. Go to Blogger Dashboard >> Click Layout >> Add A Gadget link.
    Wait until the pop-up window will appear.

Step 2. From the pop-up window, scroll down and select HTML/Javascript
Step 3. Copy the code below and place it inside the empty box.

<!-- floating share bar Start bloggingtipsandtrix.blogspot.com--> <style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from Helpblogger.com">
<div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div>
<br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='Bloggingtipsandtrix' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><a href='http://feeds.feedburner.com/Bloggingtipsandtrix' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='http://2.bp.blogspot.com/-MoGJ9Y3EdzQ/T8f4cj6LHMI/AAAAAAAACP4/VsM0eaG2EM4/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://bloggingtipsandtrix.blogspot.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating share bar End --></div>
Step 4. Save the gadget.

Customization:

Vertical alignment - Change the value of bottom in code line 3. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
Horizontal alignment - Change the value in red of margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.
Twitter setting - Replace BloggingtipsandTrix (in red color) with your Twitter username.
Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code: <div class='sbutton'> BUTTON CODE HERE </div>
RSS Feed - Change the text in green with the url address of your RSS feed.
Click here for another version of floating social media buttons

Enjoy :-)
Credits goes to Helplogger with some modification from me.