Home » » How To Add Social Networking Buttons In blogger Post Footer

How To Add Social Networking Buttons In blogger Post Footer

Written By Owenayuk on Wednesday, 19 September 2012 | Wednesday, September 19, 2012

This is one easy way to allow your members share your posts with their friends on social networking websites. We all know how difficult it is to write a good post that will drive your visitors into wanting to share it with friends online. If your posts are good enough, why not allow your members enjoy it with their friends. The below codes will give your blogger post footer something like the one I have in this blog.

Let's Get Started:
1.)Login To Blogger Dashboard > Design > Edit HTML
2.) Before you do anything, please Back Up your blogger template by downloading full template.
3.)Now Click The "Expand Widgets Template" box at the top right corner.
4.)Tab the Ctrl+F buttons and search for
]]></b:skin>


And just above the searched code in (4.), copy and paste the below code:


/*------------ LS Image Opacity--------------*/

.Fadein img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}


Now, also search for this code
<data:post.body=".body">

and paste just below it the following code:


<b:if cond='data:blog.pageType == "item"'>



<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Thanks For Reading! Kindly Bookmark and Share it.</b></span><br/><br/>

<a class='Fadein' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGYWGbF8I/AAAAAAAABxU/o5IHL_Ciwss/s400/TECHNORATI1.png ' width='64px'/></a>

<!--DIGG-->

<a class='Fadein' expr:href='"http://digg.com/submit?phase=2&url="  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGHk_dvrI/AAAAAAAABwk/kmAe1jCxrGA/s400/DIGG1.png ' width='80px'/></a>

<!--Stumble-->

<a class='Fadein' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='http://4.bp.blogspot.com/_7wsQzULWIwo/Ssnw2ChIPXI/AAAAAAAAB5U/bgiT3bu2_xo/s400/stumble1.png' width='100px'/></a>

<!--Reddit-->

<a class='Fadein' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGJWOkYZI/AAAAAAAABxE/_cOecHZDRsY/s400/REDDIT1.png' width='100px'/></a>

<!--Facebook-->

<a class='Fadein' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='80px' src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGIS5ncrI/AAAAAAAABw0/LaZwhbVchUQ/s400/FACEBOOK1.png ' width='80px'/></a>

<!-- Twitter -->

<a class='Fadein' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='64px' src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGZCTqMOI/AAAAAAAABxk/eAIBpRqgJiE/s400/TWITTER1.png' width='64px'/></a></center>





</b:if>



5.)Wait! don't save it yet. First click on preview. Is there no error? Ok, now you can SAVE and ENJOY! Please drop your comment if there is any problem.

1 comments:

  1. Cool, this blog is growing and changing almost every day. I love your design.

    ReplyDelete

Connect with large audience. Start a discussion!