Friday, February 1, 2013

Add Facebook Like Button To Blogger Posts

by Alex



As we all know facebook is one of the largest social media company in the word.If your blog have any fan page then it will help you a lot in increasing traffic on your blog.We already shared all types of twitter tweet buttons and here also we are giving all types of facebook like buttons.i.e. vertical count,horizontal count and without count.You can add this button just below of of post tile and below of the post.Just follow my instructions carefully....

Note - This button will not like your fan page it will like and share your post

How To Add Facebook Like Button To Blogger Posts?



  1. Go to Blogger Dashboard > Design > Edit HTML
  2. First take a backup of your template
  3. Tick  the expand widget check box
  4. Find for below code in your template


<data:post.body/>

If you wish to add like button just below of post title the add the below code just before of<data:post.body/>

and if you wish to add this like button just below of your post then add below code just below of <data:post.body/>

Facebook Like Button Styles


You can add like button in three styles :
  1. Vertical Count
  2. Horizontal Count
  3. Without Count

1. Vertical Count


<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/> </b:if>

2. Horizontal Count


<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

3. Without Count


<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>

If you faced any problem, please do not hesitate to let me know. :)


Read More...

Spinning Social Icons With CSS3 For Blogger

by Alex



We always try to make something different which will attract our readers/visitors quickly.In today's tutorial we will play with some simple CSS3 properties such as -moz-transform and create a simple social widget with CSS3 spinning effect.This widget will surely help you to increase number of social subscribers also it will attract your readers and grabs visitors attention quickly.On mouse hover they spins(rotates) some degrees and when mouse hovers out on it they return to their original position,this effect is caused by the CSS3 property which I have mentioned above.Now lets go to the tutorial and see how to add them into blogger blog.

How To Add Spinning Icons With CSS3 To Blogger?

I am giving 3 style of this widget,choose any of them and follow below steps to add it to your blog.
  1. Choose any style below
  2. Copy the code
  3. Replace my usernames with yours
  4. Go to Blogger Dashboard > Layout
  5. Click on Add a Gadget
  6. Select HTML/JavaScript
  7. Paste your code and save it.

Style 1



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
 
p#hb_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
 
/* Spinning Social Icons Widget By HelperBlogger */
</style> 
 
 
 
<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnTMczBEEl5hhTmzl23TfQlOcM331zJq4z9retI050QHadhfA-AQE9lD_e42lKG3wSqBdSiMeR4AJztMC_2Txj2XsYyxthqB4IMCDcQNgORuzfzglsM2IAB7JBcDrqNzNhZ_mV13zSekU/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJWkWzmjFJcysvSW0nUZgl2pEYRTy9mcVTTqMRuN05I42lTPkjglChNhkX3kpd8mMEX1cMi1G8uGYhnBVJ6P7M8DwSc2uIhBbBOhFCYPWIsrFAAWym-Ya5w3NpumqMrXkOJxcalzhsu0g/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggpi27XF7930ZUg-VzNaB0fkKmZDAPbQxJwHFRIHEnvqN0IldphDgccJ3rc9bGTsFE1d4eo-GRbMHwKN4mZBoYvrMU01buSMCR0shtxcExZ0DgFiLIpo_9q0QhJOcVY7bXtNsTohMP1I/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt1Boq0Wxw2-4YYJ35F2HGGP7FQH9BPlqw4TfN9Hr95mlRTRGc4k77RLGO3LcdFmSPghbBfgQ4wVOwx4LxmoQ0hZBwbFmOXdFF6Gsb7mrFmJLn3i5eBcI7daOWe697M_L7sKk9lY-d3sY/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggt1VYJ4Xxe2LAMEWowwF0jL9ewdM2i3K5HL-8PBcLFKufB01PCUjCig772SDJXWBNd8omA5xGidPly7NXaLZhJ_TpXvBQpJcLi4ef-sTmY9piA1-DKDpvnYVtRXoIvJ2DuglpxUVcJyQ/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

Style 2



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
 
p#hb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
 
/* Spinning Social Icons Widget By HelperBlogger */
</style> 
 
 
 
<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnTMczBEEl5hhTmzl23TfQlOcM331zJq4z9retI050QHadhfA-AQE9lD_e42lKG3wSqBdSiMeR4AJztMC_2Txj2XsYyxthqB4IMCDcQNgORuzfzglsM2IAB7JBcDrqNzNhZ_mV13zSekU/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJWkWzmjFJcysvSW0nUZgl2pEYRTy9mcVTTqMRuN05I42lTPkjglChNhkX3kpd8mMEX1cMi1G8uGYhnBVJ6P7M8DwSc2uIhBbBOhFCYPWIsrFAAWym-Ya5w3NpumqMrXkOJxcalzhsu0g/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggpi27XF7930ZUg-VzNaB0fkKmZDAPbQxJwHFRIHEnvqN0IldphDgccJ3rc9bGTsFE1d4eo-GRbMHwKN4mZBoYvrMU01buSMCR0shtxcExZ0DgFiLIpo_9q0QhJOcVY7bXtNsTohMP1I/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt1Boq0Wxw2-4YYJ35F2HGGP7FQH9BPlqw4TfN9Hr95mlRTRGc4k77RLGO3LcdFmSPghbBfgQ4wVOwx4LxmoQ0hZBwbFmOXdFF6Gsb7mrFmJLn3i5eBcI7daOWe697M_L7sKk9lY-d3sY/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggt1VYJ4Xxe2LAMEWowwF0jL9ewdM2i3K5HL-8PBcLFKufB01PCUjCig772SDJXWBNd8omA5xGidPly7NXaLZhJ_TpXvBQpJcLi4ef-sTmY9piA1-DKDpvnYVtRXoIvJ2DuglpxUVcJyQ/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

Style 3



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
 
p#hb_socialicons img:hover {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
 
/* Spinning Social Icons Widget By HelperBlogger */
</style> 
 
 
 
<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnTMczBEEl5hhTmzl23TfQlOcM331zJq4z9retI050QHadhfA-AQE9lD_e42lKG3wSqBdSiMeR4AJztMC_2Txj2XsYyxthqB4IMCDcQNgORuzfzglsM2IAB7JBcDrqNzNhZ_mV13zSekU/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJWkWzmjFJcysvSW0nUZgl2pEYRTy9mcVTTqMRuN05I42lTPkjglChNhkX3kpd8mMEX1cMi1G8uGYhnBVJ6P7M8DwSc2uIhBbBOhFCYPWIsrFAAWym-Ya5w3NpumqMrXkOJxcalzhsu0g/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggpi27XF7930ZUg-VzNaB0fkKmZDAPbQxJwHFRIHEnvqN0IldphDgccJ3rc9bGTsFE1d4eo-GRbMHwKN4mZBoYvrMU01buSMCR0shtxcExZ0DgFiLIpo_9q0QhJOcVY7bXtNsTohMP1I/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt1Boq0Wxw2-4YYJ35F2HGGP7FQH9BPlqw4TfN9Hr95mlRTRGc4k77RLGO3LcdFmSPghbBfgQ4wVOwx4LxmoQ0hZBwbFmOXdFF6Gsb7mrFmJLn3i5eBcI7daOWe697M_L7sKk9lY-d3sY/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggt1VYJ4Xxe2LAMEWowwF0jL9ewdM2i3K5HL-8PBcLFKufB01PCUjCig772SDJXWBNd8omA5xGidPly7NXaLZhJ_TpXvBQpJcLi4ef-sTmY9piA1-DKDpvnYVtRXoIvJ2DuglpxUVcJyQ/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

Now replace highlighted lines with your social profile URL.

Finally save your widget and you are done :)
Read More...