Beauty

Obracające się pionowe przyciski społecznościowe

Demo

Jak umieścić widżet na Bloggerze?

1. Zaloguj się do panelu admina na Bloggerze.
2. Wejdź w menu Układ.
3. Dodaj gadżet HTML/JavaScript.
4. Skopiuj kod widżetu:
<style>
ul.wgsqurflip{ 
position:fixed; 
padding:0 0 3px 0; 
bottom: 22%; 
margin-left:0px; 
float:left; 
list-style:none; 
-webkit-perspective: 10000px; 
-moz-perspective: 10000px; 
perspective: 10000px; 
} 
ul.wgsqurflip li{ 
margin:0; 
display: block; 
width: 25px; 
height: 25px; 
margin-bottom: 39px; 
background: transparent; 
text-transform: uppercase; 
text-align: center; 
} 
ul.wgsqurflip li a{ 
display:table; 
font: bold 36px Arial;
width: 100%; 
height: 100%; 
color: black; 
background: transparent; 
text-decoration: none; 
outline: none; 
-webkit-transition:all 300ms ease-out;
-moz-transition:all 300ms ease-out; 
transition:all 300ms ease-out; 
} 
ul.wgsqurflip li a span{ 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
display: table-cell; 
vertical-align: middle; 
width: 100%; 
height: 100%; 
-webkit-transition: all 300ms ease-out; 
-moz-transition: all 300ms ease-out; 
transition: all 300ms ease-out; 
} 
ul.wgsqurflip li a img{ 
border-width: 0; 
vertical-align: middle; 
} 
ul.wgsqurflip li:hover a{ 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
transform: rotateY(180deg); 
background: transparent; 
-webkit-transition-delay: 0.2s; 
-moz-transition-delay: 0.2s; 
transition-delay: 0.2s; 
} 
ul.wgsqurflip li:hover a span{ 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
transform: rotateY(180deg); 
-webkit-transition-delay: 0.2s; 
-moz-transition-delay: 0.2s; 
transition-delay: 0.2s; 
}
</style>

<ul class='wgsqurflip'> 
<li><a href='https://www.facebook.com/#'><span><img src='http://1.bp.blogspot.com/-QNjU7EuYWSY/U3zimEKVtFI/AAAAAAAAERM/LVXokaVW_Eg/s1600/facebook.png'/></span></a></li> 
<li><a href='http://www.twitter.com/#'><span><img src='http://3.bp.blogspot.com/
-8Vffl9w_qBA/U3zioQ0tjHI/AAAAAAAAERo/rmE_WFsLssM/s1600/twitter.png'/></span></a></li> 
<li><a href='https://plus.google.com/b/#'><span><img src='http://4.bp.blogspot.com/-ZMIdv_IxQlw/U3zimfqx9GI/AAAAAAAAERQ/xzB1yFyp0jE/s1600/googleplus.png'/></span></a></li> 
<li><a href='http://feeds.feedburner.com/#'><span><img src='http://4.bp.blogspot.com/-ZVuhm2wRtnY/U3zioPrWl4I/AAAAAAAAERk/1njD2YSEzA8/s1600/rss.png'/></span></a></li> 
  <li><a href='http://www.youtube.com/#'><span><img src='http://4.bp.blogspot.com/-_CT4jELC91g/U3zio7xqBlI/AAAAAAAAER0/ZXWbhvsxG8s/s1600/youtube.png'/></span></a></li></ul>
5. Do treści gadżetu wklej skopiowany kod.
6. Zapisz gadżet.

Jak dostosować przyciski?

Tekst zaznaczony na pomarańczowo zamień na nazwy użytkownika lub numery swoich profili społecznościowych.

Instagram