How to add media sharing buttons below every post title

For an easy way of sharing your desired information to the internet community. It is then necessary to put media sharing widget on your blog.

A widget today is an enhance version of the sharing widget we earlier shared. It includes popular social networking buttons like Twitter, Facebook Like, Google Plus +1, Add this and Stumbleupon. I am using it in my blog as you can see. We will also customize here the Add This button and will add blog title inside it. You can easily customize it to change the background colors and widget overall look. It can be added to both Blogger and Wordpress. It has a big impact in accumulating blog traffic through the shares made by these buttons which will circulate in social media and help you enjoy a long lasting referenced traffic. Lets start adding these valuable buttons to your blog.

Add Social Sharing Buttons Below Post Titles

Here is the method for blogspot blogs. If you are using Wordpress then you may please add the code shared below inside your template by going to template section.

Please follow the steps below if you use Blogger. Go To Blogger > Design > Edit HTML Backup your template Click on the box at top right that says "Expand Widget Templates" Then search for Just above it paste the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='background:#FEE6E6; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'> <table border='0'> <tr>
<td><!-- Twitter -->
<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>
<td><!--Facebook-->
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>
<td><!-- AddThis Button BEGIN -->
<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;MYBLOGGERSNIPERS&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>

<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>

Do these changes:

To change the background color of the container edit #FEE6E6 

Replace MYBLOGGERSNIPERS with your blog title so that it appears on the add this button upon mouse hover. As shown below:

5. Note: skip this step if you have already added a Google+ button somewhere in your blog. Search for ]]></b:skin> and just below it paste the following code:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

6. Save your template.

Then see your blogs and look what's appearing on post pages and not on the homepage. If you want to show it even on your homepage then just delete the two blue lines from the code above.

I am so grateful to mybloggertricks for the ideas about this post.

Take Care Friends!

How to add widgets on both sidesof Blogger header

Another tricks in blogging is observable in some professional blogs where there are more than one widget found in the header section. In this particular application of css codes pushed some newbe to ask how to put it in their blog header. Or some readers asked how to add a widget on each side of the header as pictured below, while others asked how to place multiple widgets on the right side of the header. This tutorial will cater those questions. It will  show you how to add your desired number of widgets in the header area, and arrange them in such a way that it's done horizontally.

It’s an improved version of my previous tutorial on similar customization: Add banner, Adsense or search box in header, as it doesn’t require the addition of a new widget container i.e. section.

1. Please unlock the header section

Maybe you've been through a lot of testings on how to apply this trick. However you cannot add widgets to the header section in Layout because it is locked. Blogger by default limits the header section to only one widget (the header).

Fortunately we can unlock it so easily. Go to Template > Edit HTML > Proceed and look for this line thru control F:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no"></b:section>

Replace the above code with this:

<b:section class='header' id='header' maxwidgets='' showaddelement='yes'>

What the new code does, is removing the widget count limit, and adds the Add-A-Gadget link in the section.

2. Add widgets and get the IDs

Go to Layout page and add in your widgets via Add-A-Gadget. Arrange them according to how you want them to appear on the actual blog. The topmost widget here will appear farthest to the left on the blog, and the bottom one will appear farthest to the right.

Once the widgets are saved, check the widget IDs by following this tutorial: How to find Blogger a widget ID. You need to know the IDs so you can address the widgets individually when styling them in the next step.

3. Add CSS code

Now you’ve done adding the widgets in the header, but they are stacked on top of each other. In this step you will make the widgets appear side by side, add margins or paddings etc. Note: The horizontal layout will not be reflected in Layout page i.e. the widgets will still appear to be stacked vertically.

1.Go to Template > Customize > Advanced > Add CSS, enter the code below and press Enter key. Or you can paste it right before ]]></b:skin> in Edit HTML.

.header .widget  {
border: 1px solid;
display:inline-block;
*float: left;
height: 200px;
overflow: auto;
margin: 10px 5px !important;
vertical-align: top;
}

.header #Header1 {
width: 50%;
}

.header #widgetID1, .header #widgetID2 {
width: 20%;
}

1. Change the widget ID with the widget ID you get in previous step. Pay attention to the width property -you can set the widths to any values as long as the sum of all the widths, padding, margins and borders of the widgets do not exceed the width of the header section. Otherwise the rightmost widget will be pushed below the rest of the widgets.

2. See the preview pane while doing the adjustment, your aim is for the widgets to align nicely as pictured above.

3. Click Apply To Blog button when it's done.

My gratefulness is extended to bloggersentral for the information about blogging.

Enjoy Friends!