In this post I am going to show you great tips on adding beautiful wood style social sharing icon in blogger blog. Special Thanks for these icons Land of Web. and make some change in these icons and add two more icons Reddit and Stumbleupon and make useful in blogger with hover effect. in few days we thinking sharing with you some icons. which all icons is my own creation so I post these as soon as possible. this tip is very easy and just 2 step for adding this tip, you need to add css and html code in your template I am showing video for doing this. if you face any problem with doing this. leave your comment below in comment sections thanks for reading so lets start Tutorial.
Add Beautiful Social Bookmarking Icons
Before Editing Make a Template Backup ( How to make a template backup )
1. Go to your blogger Dashboard>>Template>>Edit Template (do not click on expand widget box)
2. and find these lines..
]]></b:skin>
3. And paste this css code before ]]></b:skin>.
/*----Start BT Social Sharing CSS----*/
.fade img {
filter:Charlie(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.fade:hover img {
filter:Charlie(opacity=20);
-moz-opacity: 0.20;
opacity: 0.20;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
/*----end BT SocialSharing CSS----*/
4. click on save template.
5. and now click on expand widget box which available on top left corner at the blogger template window.
6. and find these lines.
<data:post.body/>
7. and paste this html code after <data:post.body/>.
<b:if cond='data:blog.pageType == "item"'>
<center><span style='color: #000000; font-size: 14px; font-family: Trebuchet MS;'><b>If You Enjoyed This Take 5 Second to Share it.</b></span><br/>
<a class='fade' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk8JmODm2HObqmQbl8iGL63HT114K28zRM3icBqxrwSjqyLoZjezDQqGWBr26TiAdvLc1cbSMAe8vZJVBwUT6LYheQUDtPUTtk27ntk4xXvygMblzO0LqcnNWcZsjTj94ynemPJUalmVYa/s1600/technorati1.png ' width='64px'/></a>
<!-------DIGG-------->
<a class='fade' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiow4jvOipEfcQDhraJqs8snJ0daXqEVHrUTdqhpRNarvfYnwKd9wSxUshWEd8f-FbA7FPWeBJ95IXfR0cfIUi6LSpO1GM3oLgqGA4lqoAW7Dd1Q3VfI471FkATRKrEmhMeGI217ll0Y8g4/s1600/Digg1.png ' width='80px'/></a>
<!------ Twitter ------>
<a class='fade' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVUk7hFaQ-TSNKhvPd5y58cylRC77B4BKm5Vz0KkRIaotMtHuNUgjx7Vh3hH_QRBB7I6iFsswoIVWOZ1Hb4s4-f4ct-iIWhNz2LCWC3jPhFt-cUydrtpO-yldBdCsKa_1u5PkMQbPTyNf_/s1600/Twitter1.png' width='100px'/></a>
<!------Facebook------>
<a class='fade' 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='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgENydmObN5I9z7qAbvabjI-4OJoEKiq3BlXwPUQy6N2z4lyes0raA-WTZwD2265bDK5TlIh3StcrLVpw5spKSMmX3lODSs9N32pcIvPGvkeN6bLpQlSEc56AXjDd1LILmcT8MoBfkHGR_a/s1600/Facebook1.png ' width='100px'/></a>
<!------Reddit------>
<a class='fade' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg49e5UMzuLVdBhqivcY15nHOJHyeg2k4Vnf8lSrrPjbfJu8lVYB8akRURfPcd_4_KHCF9E2elzQol3IiHSLD7OVqoYvpufdYe8Rfp6qH_HA0Zi4X9RROC68m64V2O4ynH5QGVtlI4hYNCX/s1600/Reddit1.png' width='80px'/></a>
<!------Stumble------>
<a class='fade' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDHTBosscIfD4Ow4y_8Xpdvkep8F8Q8Mei545j0aOzr9nk4wlwhCRKf8Y2KB_MqAfrM1LA6NIipjrrrYu9fNWt7qeLuPLLK6HKiWT2LzLrL4tKkFi3ao3fBiuNG7B2exmX5DmcJdwbpJ1/s1600/Stumble1.png' width='64px'/></a>
</center>
</b:if>
and now click on save and see result your blog.
Note:- if you want to change text color, font and font size make change in these lines. yellow for text color green for text size and red for font style. and pick color from color code genrator tool.
<span style='color: #000000; font-size: 14px; font-family: Trebuchet MS;'>
if you have any problem leave your comment and question below.
