2015/02/05

Jak umieścić okrągłe przyciski społecznościowe w nagłówku Bloggera?

W tym poradniku pokażę ci, w jaki sposób samodzielnie umieścić stylowe okrągłe przyciski społecznościowe w nagłówku bloga na Bloggerze. Większość blogów posiada ikonki w tym stylu, gdyż są teraz bardzo modne, dlatego nie powinieneś/aś zostać w tyle i wstawić je również u siebie! By to zrobić:

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>
ul.socials {
float: right;
z-index: 999;
position: relative;
}
.socials li {
display: inline-block;
margin: 5px;
}

.socials li a {
display: block;
text-align: center;
line-height: 1em;
font-size: 22px;
border: 0;
height: 40px;
width: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff; /* kolor ikon */
background: #0DB5B6; /* kolor tła przycisków */
}

.socials i {
position: relative;
top: 20%;
left: 0;
}
</style>

<ul class='socials'>
<li><a href='http://www.facebook.com/blokotek'><i class='fa fa-facebook-official'/></a></li>
<li><a href='http://twitter.com/Blokotek'><i class='fa fa-twitter'/></a></li>
<li><a href='https://plus.google.com/+BlokotekPlDodatki'><i class='fa fa-google-plus'/></a></li>
<li><a href='http://www.pinterest.com/blokotek/'><i class='fa fa-pinterest'/></a></li>
<li><a href='http://instagram.com/Blokotek.pl'><i class='fa fa-instagram'/></a></li>
<li><a href='https://www.linkedin.com/groups/Blokotek-6796840?gid=6796840'><i class='fa fa-linkedin'/></a></li>
<li><a href='http://www.youtube.com/user/Blokotek'><i class='fa fa-youtube'/></a></li>
<li><a href='http://feeds.feedburner.com/blokotek'><i class='fa fa-rss'/></a></li>
</ul>
7. Linki prowadzące do profili społecznościowych zamień na własne.
8. Zapisz szablon.
Jeżeli chcesz zmienić kolor przycisków, możesz zrobić to poprzez edycję poniższego kodu:

color: #fff; /* kolor ikon */
background: #0DB5B6; /* kolor tła przycisków */
Jeżeli natomiast chcesz, by przyciski znajdowały się po lewej stronie zamień:

float: right;
na

float: left;

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

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