How To Add Social Networking Buttons In blogger Post Footer

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.
Share on Google Plus

About Owan Ndoma

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

1 comments:

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

    ReplyDelete

Did you enjoy this post? Click the share button to share with your friends or contribute to the post with a comment by using the comment box below.