2015/02/25

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.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.