How to Add Social Media Buttons to the Top of your Blogger Posts

how to add facebook twitter and g+ share button on blogger

How to Add Social Media Buttons to Blogger Posts

 

1.Back Up your blog's template

2.Go to Layout then Edit HTML tab.

3.Check Expand Widget Templates.

4.Now find this code:

<data:post.body/>

 

Place the following code right before the code.

<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div> 
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<style type='text/css'> 
#pin-wrapper > a {background-image:none !important;}
</style> 
</b:if> 
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->

How to Add Facebook Share Button in Blogger posts

17:10 Posted by Waleed Khan

Social media could be great source of quality traffic for any blog.There are many popular social media sites like twitter,stumble upon,Digg and Facebook.There are many social media widgets available for blogger like Pop Up Fixed Bookmarking Gadget For Blogger and Twitter one Click Follow button For Blogs.So today I am going to share How to Add Facebook Share Button in Blogger posts.
Recommended:Cool Flying Twitter Bird Gadget For Blogger 
Floating Facebook Like and Retweet Counters for Your Websites

Steps to Add Facebook Share Button Below Post Title

It is very easy to add Facebook Share Button in Blogger posts.

1.Back Up your blog's template

2.Go to Layout then Edit HTML tab.

3.Check Expand Widget Templates.

4.Now find this code:

<data:post.body/>

5.Place the following code right before the code.

<!-- Facebook Button -->
<div style='float: left; padding: 5px; '>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Button -->

6.Save your template and that's all.

Steps to Add Facebook Share Button Below Post Body

1.Back Up your blog's template

2.Go to Layout then Edit HTML tab.

3.Check Expand Widget Templates.

4.Now find this code:

<data:post.body/>

5.Place the following code right Below the code.

<!-- Facebook Button -->
<div style='float: left; padding: 5px; '>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Button -->

Button modifications

You can also change the button type like adding a counter with the button. All you need is to replace TYPE OF BUTTON from the above code with:
1.box_count for a button like this:

2.button_count for a button like this:

3.button for a button like this:

4.Icon for a button like this:

Hope you find this useful.Share if you like it.Drop comments in the comment box.

Add Each Blog Post In Separate box

If you are trying to design your blog and make it neat and clean then you will try to separate each blog post .In blogger default template every post is displaying in same panel it become harder for reader to differentiate post,In this post I will give Css code which make your post separate in boxes.

Follow Below Steps to  separate  each blog post

1. Go to blogger Dashboard.
2. Click On Template Tab.
3. Now Click On Customize button.
4. Now Click on Advanced link
5. Now click on Add CSS And paste the following code there.

.post {
background:#FFFFFF;
border: 2px solid #000000;
padding-right:7px;
padding-left:7px;
}
.post:hover {
border: 2px solid #FF0000;
}
.post:active {
border: 2px solid #0004FF;
}

Now Save It.

Customization 

If you want to change background color then replace #FFFFFF this with your color code.

If you want to change border color then replace #000000 #FF0000 #0004FF this with your color code.

How To Get Color Code-Go to Our Hex Color Chart And Choose your favorite color and get the code.