Blogger: CSS label styles for blogger templates and moving social share buttons to the top (bloggerplugin)

In the ongoing series of Blogger modifications, here is another one. Particularly I prefer the social sharing buttons on top as, as a lot of readers decide the intent to share upon glancing the first few lines of an article. Personally I often find myself tweeting rather than bookmarking a post for later-reading.



Insert the following CSS as described in the article of fixing the CSS of dynamic view templates:

On top of the article:

For that you will have to reorder the article's footer, and remove the timestamp, as well as include the following CSS. Tinkering in the template's code directly is not as easy, as invalid modifications are automatically re-stored, yet figuring out the validity of the template's code is hard given the current Blogger template-editor. Below is all the required code. Copy and past the JavaScript somewhere between the blogger's template <script> tags. Add the CSS via Template > Customize > Add CSS, as described here.