LIVE DEMO
Social media is one of the major source of traffic, that is why every blog or website have a social sharing button to make it simple to share their blog content. Social sharing button has many looks now, one is coming from the official social networking site and other is a custom by the user. Many users make their own, because they want a very attractive and awesome social sharing button. This is important that your social sharing button has a good looking and have an awesome effect to attract or to get the attention of your visitor to share your blog.
Yesterday when I have a time I make my own social sharing button for blogger blog and now I want it, to share. This social media icon set is maked by SOFTAREA at deviantart and I added Stumbleupon and delicious button. This widget had an 8 popular social networking site such as Facebook, Twitter, Google Plus, Pinterest, Digg, Linkedin, Stumbleupon and Delicious and with an awesome spinning and darker hover effect for each button and also have a transition effect to add cooler effect. Follow the procedure below for adding this in your blogger post footer.
Procedure:
1. Log in to you blogger account --> Templates --> Back Up Templates
2. After backed up click EDIT HTML
3. Find(ctrl+f)
2. After backed up click EDIT HTML
3. Find(ctrl+f)
<div class='post-footer-line post-footer-line-1'>
CODE:
1: <b:if cond='data:blog.pageType == "item"'>
2: <div id='kevz-share'>
3: <ul>
4: <li><a class='twit' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Tweet this post'></a></li>
5: <li><a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'></a></li>
6: <li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'></a></li>
7: <li><a class='gplus' expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url + ""' rel='nofollow' target='_blank' title='Plus One this post'></a></li>
8: <li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title' rel='nofollow' target='_blank' title='Pin this post'></a></li>
9: <li><a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'></a></li>
10: <li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stumbleupon'></a></li>
11: <li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' rel='nofollow' target='_blank' title='Share this post on LINKEDIN'></a></li>
12: </ul>
13: </div>
14: <style>
15: #kevz-share ul li a {
16: background-repeat: no-repeat;
17: display: block;
18: float: left;
19: height: 50px;
20: margin-left: 10px;
21: transition: all 2s ease 0s;
22: -moz-transition: all 2s ease 0s;
23: -webkit-transition: all 2s ease 0s;
24: width: 50px;
25: }
26: #kevz-share {
27: background: none repeat scroll 0 0 transparent;
28: border: 1px dashed gray;
29: height: 60px;
30: padding: 5px;
31: width: 98%;
32: }
33: #kevz-share ul {
34: clear: none;
35: list-style: none outside none;
36: margin: 5px 0 5px 5%;
37: padding: 0;
38: }
39: #kevz-share ul li {
40: background: none repeat scroll 0 0 transparent;
41: display: inline;
42: margin: 0;
43: padding: 0;
44: }
45: #kevz-share ul li a.twit:hover {
46: opacity: 1;
47: transform: rotateY(350deg);
48: -moz-transform: rotateY(350deg);
49: -webkit-transform: rotateY(350deg);
50: }
51: #kevz-share ul li a.twit {
52: background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicEVVHaDJ810tR5lft6uWmekYxhB3DwkW3eMIxXr3g0Oy8aTHL_rNAmxkicS_UR2Xuc8oj21itcShPNQkl8BjPW6zeZY-xvMDFNCCtRMk6wUg-t6MftmbaprVe6tVfYdYusITKGgGsZaE/s1600/twitter.png") no-repeat scroll 0 0 transparent;
53: opacity: 0.5;
54: }
55: #kevz-share ul li a.fb:hover {
56: opacity: 1;
57: transform: rotateY(350deg);
58: -moz-transform: rotateY(350deg);
59: -webkit-transform: rotateY(350deg);
60: }
61: #kevz-share ul li a.fb {
62: background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwCR81Kbuavdyg6J20hnrgp-dwQk8KOg68VK7drJ4tkSqiLkbamLoGiuXr2B3kM2NI5ru7JHveK65SftuypdY3IlRCUERz9swxpFDD7Bm_XVYDAmAcdQtahEX7asBUGGiz7DWGYJHsGU/s1600/facebook.png") no-repeat scroll 0 0 transparent;
63: opacity: 0.5;
64: }
65: #kevz-share ul li a.gplus:hover {
66: opacity: 1;
67: transform: rotateY(350deg);
68: -moz-transform: rotateY(350deg);
69: -webkit-transform: rotateY(350deg);
70: }
71: #kevz-share ul li a.gplus {
72: background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs4bub2QfR2jRezrmLWFARJeT27JxZj_nIwWf4SXkO68yxBvJXvEn7dEx_eN82ZWyKzSBkol-Q9vWxdURkwwXOZ-X9gH-VJ2n5_IpXBeTBhLxU1czdBSVp6VbEldpeiEwgL6V9TWn5Q1s/s1600/gplus.png") no-repeat scroll 0 0 transparent;
73: opacity: 0.5;
74: }
75: #kevz-share ul li a.digg:hover {
76: opacity: 1;
77: transform: rotateY(350deg);
78: -moz-transform: rotateY(350deg);
79: -webkit-transform: rotateY(350deg);
80: }
81: #kevz-share ul li a.digg {
82: background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNzDCA3nOcshLcPTyTGZAGssb__zu4jrO-LWAWLkBO6lt-XNSurw4Ur5KopHcptWSzmSzllWqwvQwiJ0cS2_eZRR0LySzHqFlOcLyrbM6BXnwQmVpkOqMcXtC0aoc3Hn_BUSuMM2Dxc7I/s1600/digg.png") no-repeat scroll 0 0 transparent;
83: opacity: 0.5;
84: }
85: #kevz-share ul li a.pinterest:hover {
86: opacity: 1;
87: transform: rotateY(350deg);
88: -moz-transform: rotateY(350deg);
89: -webkit-transform: rotateY(350deg);
90: }
91: #kevz-share ul li a.pinterest {
92: background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeuqQ32RPcLhgTIeAu5JwTd5Mx9SIBNDhlscd16EKs2Itz53CJeWbsqlSPRgBtHVN60pd9W1YpbWegBRbNCDsRU-Iu0dv-8Colw__NMd8yZxQoZKMTc1DT1R2yrxEQSuDRn2dML0r4wqA/s1600/pinterest.png") no-repeat scroll 0 0 transparent;
93: opacity: 0.5;
94: }
95: #kevz-share ul li a.stumbleupon:hover {
96: opacity: 1;
97: transform: rotateY(350deg);
98: -moz-transform: rotateY(350deg);
99: -webkit-transform: rotateY(350deg);
100: }
101: #kevz-share ul li a.stumbleupon{
102: background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqq_NRHyHrqIAHFUnYlMIFkrjBO4oA-HGGWN2-6dbCzKEh5Pr0VUF7osV-zD-zt8WUkyCEhllIFYHUmvh3sT4QOQzi77PIF4OeZ6Aziy55qfxWjYsNkl8NoiI6KqWKGum1v5v9CuYOjY8/s1600/stumbleupon.png") no-repeat scroll 0 0 transparent;
103: opacity: 0.5;
104: }
105: #kevz-share ul li a.delicious:hover {
106: opacity: 1;
107: transform: rotateY(350deg);
108: -moz-transform: rotateY(350deg);
109: -webkit-transform: rotateY(350deg);
110: }
111: #kevz-share ul li a.delicious{
112: background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4WwuFGUoGrBkSM0m5x0i7_7EBnUi7olPoAmoqOZre4G2CnroTTn-x-LZ9aa-1gy1QvrLztf316dxFUajrUJu07f_Ek0QA0AqhVcoHl3YgKnONbrKHwVuF1dqoPYVbtYSoV4UcsYEckLo/s1600/del.png") no-repeat scroll 0 0 transparent;
113: opacity: 0.5;
114: }
115: #kevz-share ul li a.linkedin:hover {
116: opacity: 1;
117: transform: rotateY(350deg);
118: -moz-transform: rotateY(350deg);
119: -webkit-transform: rotateY(350deg);
120: }
121: #kevz-share ul li a.linkedin{
122: background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRl5n5LI0PmPKoj8w2BRQBaBJgjgU-EBLoxU0UfA8a-Js9AZ-GEUuS-6bkz6wk4btTJPy1KYaBJGiJEQG-uqFgb56a4gt9II7fSOaPuEnTmM7DnWrzEw_OOrNeVegWODl1y9SWxdQLbEpd/s1600/in.png") no-repeat scroll 0 0 transparent;
123: opacity: 0.5;
124: }
125: </style>
126: </b:if>
4. Click SAVE TEMPLATE and you are done.
If you have a problem to adding this in your template, contact me I'm willing to help you.
0 comments: