Ajax Loader
×

Metro Style Social Media Widget for Blogger Blogs

Metro Style Social Media Widget for Blogger Blogs

HTML 
<div >
1
<div >
2
  <ul id='supportive' >
3
 
4
  <li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage/'/></a></li>
5
<li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li>
6
 
7
<li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUser/PageID/'/></a></li>
8
 
9
<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>
10
 
11
</ul></div>
12
 
13
</br></br></br></br></br></br></br></br></br></br></br></br><footer align='middle'>
14
  <a href="http://www.digitalhubinc.com/2013/02/New-metro-style-social-media-widget-blogger-blogs-for-2013.html"><img src="https://lh6.googleusercontent.com/-OGTRrjAwwKs/URkNoPIIBtI/AAAAAAAARD8/9dTtg4E3oWA/h120/back+to+home.png"></a>
15
</footer>
 
CSS 
.widget-item-control a{display:none;}
1
.widget-item-control a{display:none;}
2
 
3
    .widget-item-control a{display:none;}
4
 
5
    #supportive{width: 300px;
6
 
7
    float: left;margin-top: 10px;}
8
 
9
    #supportive li{position:relative; cursor:pointer; padding: 0 !important;}
10
 
11
    #supportive .facebook, .googleplus, .rss, .twitter{
12
 
13
    position: relative;
14
 
15
    -moz-transition: all 0.4s ease-in-out;
16
 
17
    -webkit-transition: all 0.4s ease-in-out;
18
 
19
    -o-transition: all 0.4s ease-in-out;
20
 
21
    transition: all 0.4s ease-in-out;
22
 
23
    z-index: 5;
24
 
25
    display: block;
26
 
27
    float: left;
28
 
29
    margin: 1px;}
30
 
31
    #supportive .icon{overflow:hidden;}
32
 
33
    #supportive .facebook{width: 147px;
34
 
35
    height: 150px;
36
 
37
    background: rgba(59,89,152,1) url("https://lh4.googleusercontent.com/-6tuOBGcpzGc/URPO_I2Yj9I/AAAAAAAAC_0/qBm56PAG1yY/h120/facebook.png") no-repeat center center;}
38
 
39
    #supportive .twitter{width: 148px;
40
 
41
    height: 74px;
42
 
43
    background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/s1600/Twitter.png") no-repeat center center;}
44
 
45
    #supportive .googleplus{width: 148px;
46
 
47
    height: 74px;
48
 
49
    background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/s1600/google+plus.png") no-repeat center center;}
50
 
51
    #supportive .rss{ width: 299px;
52
 
53
    height: 74px;
54
 
55
    background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/s1600/rss.png") no-repeat center center;}
56
 
57
    #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
58
 
59
    -webkit-transition: all 0.1s ease-in-out;}
60
 
61
    #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://lh6.googleusercontent.com/-gp5q_y7kibQ/URPO_I6-sKI/AAAAAAAAC_w/twhFzlX2p1c/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
62
 
63
    -webkit-transition: all 0.1s ease-in-out;}
64
 
65
    #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://lh6.googleusercontent.com/-5-00TE6gtvM/URPO_ALyNwI/AAAAAAAAC_4/A4Dr7Hg7C6A/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
66
 
67
    -webkit-transition: all 0.1s ease-in-out;}
68
 
69
    #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://lh4.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S2lzrz6uZ0c/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
70
 
71
    -webkit-transition: all 0.1s ease-in-out;}
 

Metro Style Social Media Widget for Blogger Blogs

CSSDeck G+