Efektli Sosyal Ağ Butonları Kodu

Yeni yaptığım sosyal ağ butonları kodu çok hoşunuza gidicek. Çünkü bu mükemmel kod süper bir efekt ile çalışıyor. Sitenize eklemek ise çok kolay. Bloggerda Gadget Ekleden ve diğer sitelerde kullanmak istediğiniz yere bunu koyun. Çok hoşunuza gidecek. Eminim...

<wolderking>
<div class="wolderking">
 
<ul>
<li class="rss"><a href="http://feeds.feedburner.com/wolderking" target='_blank'><span></span>RSS</a></li>
<li class="twitter"><a href="https://twitter.com/wolderking" target='_blank'><span></span>Twitter</a></li>
<li class="gplus"><a href="https://plus.google.com/u/0/+WolderKingsten/posts" target='_blank'><span></span>Google Plus</a></li>
<li class="facebook"><a href="https://www.facebook.com/wolderking" target='_blank'><span></span>Facebook</a></li>
</ul>
</div>
<style> 
.wolderking li { 
display: block !important; 
margin-right: 0 !important; 
width: auto !important; 
} 
.wolderking li a span { 
display: block; 
height: 32px; 
left: 0; 
position: absolute; 
top: 2px; 
transform: rotate(-20deg); 
-wolderking-transform: rotate(-20deg); 
transition-duration: 0.8s; 
transition-property: all; 
width: 32px; 
} 
.wolderking .twitter span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggLl2NmVmAhsgVVKqFeBNW1r9K3WEMpTQ79HNGeCRajrSlotLdkIjAvQLKF_97X9lIJHFVrPNEZbmKXGvGIDWTrV-aTAcoKjuZJfChUx_Xsqe2qsjlwBu1wHXVbA37fFz-7Y-ZZKWugwE/s1600/twitter_icon.png) no-repeat; 
} 
.wolderking .twitter a { 
background: #91C661; 
} 
.wolderking li a:hover span { 
transform:rotate(340deg); 
-wolderking-transform:rotate(340deg);    
}    
ol, ul { 
list-style: none outside none; 
} 
.wolderking li { 
display: block !important; 
margin-right: 0 !important; 
width: auto !important; 
} 
.wolderking li { 
display: inline-block; 
margin: 0 20px 10px 0; 
position: relative; 
width: 200px; 
} 
.wolderking .rss span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH-dCuLjgnWoYX73cNWpw62kdneJK9llXyeCIZTCgBin9dBsjPxWkXy4z6dc6grBTHXgfZc1-Or5jy_CthbApzgfSiezjXIcPJlmEXso4NavLZapQm11ZSYi3dX6Vpa4TEiofsGxVqCQM/s1600/rss-icon.png) no-repeat; 
} 
.wolderking .rss a { 
background: #F67F00; 
} 
.wolderking li a { 
color: #FFFFFF; 
display: block; 
font-family: verdana; 
font-size: 12px; 
padding: 10px 10px 10px 40px; 
text-decoration: none; 
font-weight: bold; 
} 
.wolderking li a span { 
display: block; 
height: 32px; 
left: 0; 
position: absolute; 
top: 2px; 
transform: rotate(-20deg); 
-wolderking-transform: rotate(-20deg); 
transition-duration: 0.8s; 
-wolderking-transition-duration: 0.8s; 
transition-property: all; 
width: 32px; 
} 
.wolderking li a:hover span { 
transform:rotate(340deg); 
-wolderking-transform:rotate(340deg); 
}  
.wolderking .twitter span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggLl2NmVmAhsgVVKqFeBNW1r9K3WEMpTQ79HNGeCRajrSlotLdkIjAvQLKF_97X9lIJHFVrPNEZbmKXGvGIDWTrV-aTAcoKjuZJfChUx_Xsqe2qsjlwBu1wHXVbA37fFz-7Y-ZZKWugwE/s1600/twitter_icon.png) no-repeat; 
} 
.wolderking .twitter a { 
background: #91C661; 
} 
.wolderking .gplus span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc0-NC7KqnAVUPzMGEji2aZBGn25xB_JWtvb6gldUkkUHXu1d8cW3B5lLXNMwrhW4R7cyRA7ZHDP8j1Cer3onRsJXCHKkLN1Ntbr1nRmQEqKh1KGnlrc0CoGTjuOqJ9jnC1-BmrAqwJe4/s1600/googleplus.png) no-repeat; 
} 
.wolderking .gplus a { 
background: #D74D2F; 
} 
.wolderking .facebook span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT-KqLhzOfNTGrmA_eMB-zydIYLiZF_fpvJlGB7gDj-0tjHE2u97Ykt8EScZg5VOuxy0lp-jaRFU4wSX9wlf7xUGyXXrpVQK_mvFB7IwSjSQjJJVd2m67FbUDqrnKIDxu7iNtiWblZmEo/s1600/facebook-icon.png) no-repeat; 
} 
.wolderking .facebook a { 
background: #3B5998; 
} 
</style>
</wolderking>

Efektli Sosyal Ağ Butonları Kodu

1 Yorum:

Popüler

Arşiv

Efektli Sosyal Ağ Butonları Kodu

Next

Sonraki Kayıt

Previous

Önceki Kayıt

1 Yorum: