Monday, April 16, 2012

Add Facebook Like,Send Twitter,Google Plus,Stumbleupon And Addthis Gadget To Blogger

In the past I shared How to add Facebook like and send button under post title in blogger .Now i am sharing how would you add +1 button,twitter, stumbleupon, Facebook like and send and special Addthis button under post title or at the last of the post in blogger

Go to Blogger → Design → Edit HTML

For safety backup your template

Using CTRL+F find the following code


And just above it paste the code given below

<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='/' href='/' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='/' type='text/javascript'> </script> </b:if> </td>
<iframe allowTransparency='true' expr:src='/;; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=/;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='/;;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='/' 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='/' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;Edutechnology.Net&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>
<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>

If you want to change the background color of the container edit #FEE6E6. Change Edutechnology.Net with your blog title so that it appears on the add this button upon mouse hover

Note: skip the following step if you have already added a Google+ button anywhere in your blog

Now search for the following code


Now just below it paste the following code

<script src='/' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

Save your template now see your fabulous share buttons


Click Here To add Comment