Beauty

Przyciski społecznościowe z efektem animacji

Demo



Jak umieścić przyciski na Bloggerze?

1. Zaloguj się do panelu admina na Bloggerze.
2. Wejdź w menu Szablon => Edytuj kod HTML szablonu.
3. Kliknij w okno edytora i wciśnij Ctrl + F.
4. W wyszukiwarkę wpisz:
<header>
5. Wciśnij Enter, by wyszukać znacznik.
6. Tuż pod wyszukanym znacznikiem wklej poniższy kod:

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

<style>
/* Social Buttons in Header by Blokotek.pl
----------------------------------------------- */
ul.socialheader {
float: right;
margin-top: 10px;
padding: 0;
list-style: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.socialheader li {
position: relative;
margin: 10px 5px;
padding: 0;
max-width: 40px;
min-width: 40px;
-webkit-box-flex: 1;
-webkit-flex: 1 100px;
-ms-flex: 1 100px;
flex: 1 100px;
height: 40px;
text-align: center;
border-radius: 3px;
border: 2px solid slategrey; /* kolor obramowania */
background: slategrey; /* kolor tła */
cursor: pointer;
}
.socialheader li:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 0;
height: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: .5s ease all, 2s linear -webkit-transform, 0s linear top, 0s linear left;
transition: .5s ease all, 2s linear transform, 0s linear top, 0s linear left;
border-radius: 300px;
background: #fff;
z-index: 1;
}
.socialheader li:hover:before {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
border-radius: 0;
-webkit-transition: .5s ease all, .1s linear -webkit-transform, 0s linear top, 0s linear left;
transition: .5s ease all, .1s linear transform, 0s linear top, 0s linear left;
}
.socialheader li:hover .item {
color: slategrey; /* kolor ikony po najechaniu myszą */
}
.socialheader .item {
position: relative;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-transform: uppercase;
color: #fff; /* kolor ikony */
z-index: 10;
}
</style>

              <ul class='socialheader'>
                <li>
                  <div class='item'>
                    <i class='fa fa-facebook'>
                    </i>
                    <a href="#">
                    </a>
                  </div>
                </li>
                <li>
                  <div class='item'>
                    <i class='fa fa-twitter'>
                    </i>
                    <a href="#">
                    </a>
                  </div>
                </li>
                <li>
                  <div class='item'>
                    <i class='fa fa-google-plus'>
                    </i>
                    <a href="#">
                    </a>
                  </div>
                </li>
                <li>
                  <div class='item'>
                    <i class='fa fa-instagram'>
                    </i>
                    <a href="#">
                    </a>
                  </div>
                </li>
                <li>
                  <div class='item'>
                    <i class='fa fa-heart'>
                    </i>
                    <a href="#">
                    </a>
                  </div>
                </li>
                <li>
                  <div class='item'>
                    <i class='fa fa-pinterest-p'>
                    </i>
                    <a href="#">
                    </a>
                  </div>
                </li>
                <li>
                  <div class='item'>
                    <i class='fa fa-youtube-play'>
                    </i>
                    <a href="#">
                    </a>
                  </div>
                </li>
              </ul>
7. # zamień na linki prowadzące do profili społecznościowych.
8. Zapisz szablon.

Jeżeli chcesz, by przyciski znajdowały się po lewej stronie zamień:
float: right;
na
float: left;

Instagram