728x90 AdSpace

Latest News

Social Buttons With Hover Effect Gadget for Blogger

Δώστε τη ευκαιρία στους αναγνώστες σας να σας δείξουν πόσο πολύ ενδιαφέρονται για τη Σελίδα σας, ή πόσο καλό είναι ένα άρθρο σας, ώστε να το ανεβάσουν στα Μέσα Κοινωνικής Δικτύωσης.

Αυτή τη δυνατότητα τη δίνει το gadget που θα σας παρουσιάσουμε.

Live Demo


Προσθέστε το σαν gadget με τον παρακάτω κώδικα:



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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<style>
.social-contain {
 float: left;
 margin-bottom: 20px;
 text-align: center;
 width: auto;
 }
 
ul#social {
 position: relative;
 margin:0 auto;
 }
 
ul#social li {
 float: left;
 margin-right: 2px;
 list-style:none;
 }
 
ul#social li:last-child {
 margin-right: 0;
 }
 
ul#social li a {
 display: block;
 }
 
.soc-fb {
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) 0 0;
 position: relative;
 width: 58px;
 height: 58px;
 }
 
.soc-fb:hover {
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) 0 -58px;
 }
 
.soc-twi {
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -58px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }
 
.soc-twi:hover {
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -58px -58px;
 }
 
.soc-gp {
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -116px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }
 
.soc-gp:hover {
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -116px -58px;
 }
 
.soc-pin {
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -174px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }
 
.soc-pin:hover {
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -174px -58px;
 }
 
.soc-rss {
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -232px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }
 
.soc-rss:hover {
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -232px -58px;
 }
</style><br />
<br />
<div class="social-contain">
<ul id="social">
<li><a class="soc-fb" href="#" target="_blank"></a></li>
<li><a class="soc-twi" href="#" target="_blank"></a></li>
<li><a class="soc-gp" href="#" target="_blank"></a></li>
<li><a class="soc-pin" href="#" target="_blank"></a></li>
<li><a class="soc-rss" href="#"></a></li>
</ul>
</div>
  • Blogger Comments
  • Facebook Comments

0 comments:

Δημοσίευση σχολίου

Item Reviewed: Social Buttons With Hover Effect Gadget for Blogger Rating: 5 Reviewed By: Epiosy