Setting up the social sharing stuff.

Search for the following in your HTML

<b:if cond='data:post.hasJumpLink'>      <div class='jump-link'>        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>      </div>    </b:if>

Below the above code, add

<b:if cond='data:blog.pageType == &quot;item&quot;'>

SAMPLE 

  </b:if>

Replace SAMPLE with the code for the social sharing buttons.

Ranjith, Will inserting this code remove the old/previous Buttons code?

What about the customization?

The above code is used for adding some content ( share buttons, email subscription form, recommended posts etc ) at the end of every post. It is completely unrrelated to other sharing buttons present in your blog. You  should remove the previous buttons yourself. The above code won't do it.

What customisations? 

Yes, sharing buttons at the end of every post will be a great help. But, personally I feel adding a gadget in Blogger is the simplest way we can employ as the code can be removed simply by deleting the gadget!

Please do elaborate about what "SAMPLE" can constitute. Can we put the Twitter &Google+-Sharing Widget code there?

Now my Twitter button is at the beginning of the Post, while G+ is at the end of the comments section! No clue

Some queries that I have are in my Post- here. Will be very helpful if you could suggest what to do!

It can also be done by adding a gadget but that requires knowledge of JavaScript and I am very poor at it.  But still, let me try.

Yes, you can put twitter and google+ code there in SAMPLE.

About your questions about customisation of Blogger buttons - there is no simple way.

The only way is to remove those default buttons from the footer using JS and add your custom code ( again using JS )

or

you can edit the HTML template of your blog and remove the default blogger buttons and add your custom buttons. This is same as the approach which I gave above. 

The second approach even though requires editing your template is better than the first approach because in the first approach, you will loading the buttons twice which will increase your page load time. 

Arti, Quest is on as even I am still trying to find the simplest & the best buttons!

Read a bit about some of the Share buttons and shared 2 Posts on my findings & requirements.

Most friends are using Shareaholic Buttons that can be customized. AddThis is cool too & we can update our details easily for customization. For ShareThis also we can customize... But, most involve codes.

Personally, I'd love if the default Blogger buttons can be customized to reflect our handle/info. Wish Blogger enhanced its own buttons so that we don't have to helplessly search for customized ones!

Further, Twitter & G+ have their own code that we can put in our Blog, but they'd need the code to be placed in the right place in the HTML section of our Blog. Else, just employing the widget would place it elsewhere & not where we desire! Even I have faced the same issues about the position.

Wonderful that you have shared these requirements on the Forum here. We are sure to find help & solutions soon!

I agree with the default share buttons that blogger provides, its high time they revamped the look and style and made life easier for us, as of now they are near to useless!

Till now, I had been using buttons from both AddThis and ShareThis but I could find no customizations mainly for twitter. Maybe, I missed digging deeper, but even if there are, I am sure they are not as easy to find and implement especially with Blogger.

And I am glad you bring up the point of your posts Anita, read one of them yesterday, and that's where I got the kick.  You have done a great job with your tutorials and I hope you also update it as and when you have the complete info on the placements, etc. It is going to be one helpful article for many out here, for sure! 

I played around a bit and the final result looks something like this:

I have got the official customized buttons in the footer of each of my posts. I followed all the instructions found in this post and placed it at the same place as Ranjith suggested. Looks good since yesterday. Thanks, Ranjith. 

Now, I need further customizations. 

1. I want the share buttons to appear not in the post-footer but in the post-body that is as soon as my post ends (in my case before the link-within gadget), consider this snippet example:

"

--------- MY POST ENDS HERE -----------------

If you enjoyed reading this article, you can ...

Subscribe to my e-mail subscribers or

*The social sharing buttons here*

---------- LINK WITHIN WIDGET -----------------

----------- POST FOOTER ----------------------

"

Where should the code be placed in this case? Also, how to include this line before the buttons,

"If you enjoyed reading this article, you can ...

Subscribe to my e-mail subscribers or"

... along with a link to my email subscription so that it appears in all the posts automatically?

@Anita Should you need the code or any other related help, please do let me know, I will paste it here. :) Also, if you are doing it along, do share your progress, it will be a better feeling to stumble upon together! 

@ Arti Did you include the code at the right place. 

Here is a test blog I've created. SAMPLE is the text I've inserted ( instead of the share buttons )

Here is the default blog template with the only change being the addition of the above code. See lines 1509-1520 and check if you have inserted the code at the right place. 

link for blog template : http://pastebin.com/5t7rCcxT 

Oops, put it in the wrong position!  Thanks for the heads-up, corrected. 

Now, the buttons can be seen at the end of the post area (and not the footer). Also, I re-installed my linkwithin gadget and customized it so that it appears below the share buttons with the help of this article: http://helplogger.blogspot.in/2014/02/customize-linkwithin-gadget-related-posts-gadget.html

Overall, looks pretty neat and much in line with what I had asked for, thanks for all your time and help, Ranjith, I will be here to trouble you again, when (and if) I need any further help. 

Arti use Filament Flare social share buttons they come both in horizontal and below the post type with customisations for various buttons colours etc.  You have to just sign up and add a code to your blog under <head> and then do the changes on Filament site. 

The best thing about filament is that they are drag and drop so pretty simple and the tweet or FB share dont contain outside links

You can see the demo if you want on my site 

Vijay

Thanks for sharing about Filament Flare, Vijay. I checked out your website, looks nice and it gels well with your layout. :)

It's lovely that filament gives all those customizations at the click of a button, makes it that much hassle free. However, I was wondering if the tweet button can also be customized? So that when someone shares the post, the tweet originates from  ----- via 'our twitter handle'?  -----

no Arti I dont think they allow it but will speak to the guy with filament 

Arti, whenever you add a code to your blog make sure you use the comment format too above and below the code, as we do not know html and css, atleast I so it would be difficult for us to manage things later. What I do is, this way:

<!--Below Codes Are For Social Sharing above blog posts--> This line is a comment so does not get included in the code<!--Facebook button starts--><b:if cond='data:blog.pageType == &quot;item&quot;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like action='like' colorscheme='light' layout='standard' send='true' show_faces='false' width='350'/></b:if> <!--Facebook button ends --><!-- Place this tag where you want the +1 button to render --><b:if cond='data:blog.pageType == &quot;item&quot;'><g:plusone/></b:if><!--stumbleuponbutton starts --><b:if cond='data:blog.pageType == &quot;item&quot;'><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; +data:post.url'><img alt='StumbleUpon' border='0' src='http://www.stumbleupon.com/images/stumble7.gif'/></a></b:if><!--stumbleupon button ends --><!--Above Codes Are For Social Share-->

Place this code where ever you wish the buttons to appear, you can also add other social sharing sites code inbetween which can be found on the site itself like twitter button on twitter blog or an official twitter page and likewise, just google it.

Yes! 

I forgot to mention that comments thing... 

Thanks for this tip, Neeraj. Yeah, you are right. For sites that generate auto-code for you like AddThis and ShareThis, these comments are in built. That's how I could find them and delete them. I will surely keep this comment thing in mind.

Get it from here and likewise

https://about.twitter.com/resources/buttons

Just have a look at this post you will find simple social sharing buttons.. Simple design with the respective logos of social media... you may like it and easy to install... 

please see http://www.techsperia.blogspot.in/2013/08/new-labnol-style-labels-widget-for.html, the earlier link is broken somehow...

That looks like a great site to learn and implement new things, technophilo! I will surely check out a few more links there! Let me see if I can get anything working for my site from there, many thanks for the share!

Hey all,

What are you all using for the vertical floating share buttons? I am looking for something subtle like the buttons these people have: http://milaap.org/fund 

If you have any useful links/tutorials to share or any ideas around that, please do take some time to share. 

Thanks! 

Hi Arti,

its quite easy to do that... Just go to www.addthis.com, select basic tools if you are looking for simple floating share buttons. In the smart layer options select the platform whether Blogger or wordpress, fill link to your facebook page, twitter profile etc., select the required options whether share is required... after completing this just click on install blogger widget, you will be directed to your blogger homepage (it will directly asks you to add widget if you are logged into your blogger) and widget 'AddThis Smart Layers' will be added to your blog layout. You can remove the title of the widget, just keep the title blank so that the name of widget will not be visible on blogpage and floating share buttons will be visible as floating as used in milaap site.

thats all

regards,

technophilo

Thank you so much, technophilo. Truly appreciate your taking the time to help. Will check this out. Thanks again! :)

Arti, We now have a wealth of info thanks to your thread & thanks to all the helpful souls!

Need to try these.