2015/08/06

Responsywne, kolorowe przyciski społecznościowe

W tym tutorialu znajdziesz instrukcję instalacji stylowych, responsywnych, kolorowych przycisków z odnośnikami do swoich profili społecznościowych. Tym razem się postarałam i stworzyłam również video tutorial, byś mógł zobaczyć "na żywo", jak umieścić te fajne buttony na swoim blogu :) Widżet dostosowuje się automatycznie do szerokości bocznego paska. Możesz dowolnie modyfikować kolory oraz ikony przycisków.


Instrukcja instalacji widżetu

1. Skopiuj kod widżetu:
<div class="ac-social-buttons-widget">
<ul class="sidebar-social clearfix">
<li>
<a href="http://twitter.com/Blokotek" class="social-btn twitter">Twitter
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com/blokotek" class="social-btn facebook">Facebook
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="https://plus.google.com/+BlokotekPlDodatki" class="social-btn google-plus">Google+
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a href="http://www.pinterest.com/blokotek" class="social-btn pinterest">Pinterest
<i class="fa fa-pinterest"></i>
</a>
</li>
<li>
<a href="http://feeds.feedburner.com/blokotek" class="social-btn rss">RSS
<i class="fa fa-rss"></i>
</a>
</li>
<li>
<a href="http://www.youtube.com/user/Blokotek" class="social-btn youtube">Youtube
<i class="fa fa-youtube"></i>
</a>
</li>
<li>
<a href="http://instagram.com/Blokotek.pl" class="social-btn instagram">Instagram
<i class="fa fa-instagram"></i>
</a>
</li>
<li>
<a href="https://www.flickr.com/people/blokotek/" class="social-btn flickr">Flickr
<i class="fa fa-flickr"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/blokotek" class="social-btn linkedin">Linkedin
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="http://www.bloglovin.com/blog/13115087" class="social-btn bloglovin">Bloglovin'
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="http://blokotek.deviantart.com/" class="social-btn deviantart">DeviantArt
<i class="fa fa-deviantart"></i>
</a>
</li>
<li>
<a href="https://github.com/Blokotek" class="social-btn github">GitHub
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>

<style>
.social-btn i,
.social-btn {
line-height: 55px;
}
.social-btn {
display: block;
width: 100%;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0 0 0 15px;
position: relative;
overflow: hidden;
margin-bottom:10px;
}
.social-btn i {
width: 55px;
float: right;
border-left: 1px solid rgba(255, 255, 255, 0.2);
font-size: 16px;
font-weight: normal;
text-align: center;
}
.social-btn:hover {
padding-left: 20px;
}
.header-social-icons a.social-btn {
width: 30px;
line-height: 30px;
height: 30px;
text-align: center;
padding: 0;
}
.header-social-icons a.social-btn i {
width: auto;
float: none;
border: none;
line-height: 30px;
font-size: 13px;
}
/* --- Social Buttons Colors */

.social-btn.facebook {
background-color: #659de3;
}
.social-btn.twitter {
background-color: #65b8e3;
}
.social-btn.google-plus {
background-color: #e3be65;
}
.social-btn.rss {
background-color: #e38c65;
}
.social-btn.youtube {
background-color: #e36a65;
}
.social-btn.instagram {
background-color: #65a3e3;
}
.social-btn.flickr {
background-color: #e265aa;
}
.social-btn.tumblr {
background-color: #6eb8d9;
}
.social-btn.bloglovin {
background-color: #659de3;
}
.social-btn.pinterest {
background-color: #e36a65;
}
.social-btn.linkedin {
background-color: #6eb8d9;
}
.social-btn.deviantart {
background-color: #7E9180;
}
.social-btn.github {
background-color: #666666;
}
/* --- Social Buttons Colors | :hover state */

.social-btn.facebook:hover {
background-color: #559af2;
}
.social-btn.twitter:hover {
background-color: #55bcf2;
}
.social-btn.google-plus:hover {
background-color: #f2c355;
}
.social-btn.rss:hover {
background-color: #f28555;
}
.social-btn.youtube:hover {
background-color: #f25c55;
}
.social-btn.instagram:hover {
background-color: #55a1f2;
}
.social-btn.flickr:hover {
background-color: #f155ab;
}
.social-btn.tumblr:hover {
background-color: #60bce6;
}
.social-btn.vk:hover {
background-color: #559af2;
}
.social-btn.pinterest:hover {
background-color: #f25c55;
}
.social-btn.linkedin:hover {
background-color: #60bce6;
}
.social-btn.deviantart:hover {
background-color: #475C4D;
}
.social-btn.github:hover {
background-color: #777777;
}
.ac-social-buttons-widget a {
color: #fff;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
}
.ac-social-buttons-widget ul li {
width: 135px;
display: inline-block;
float: left;
margin-right: 21px;
}
.widget ul {
padding: 0;
}
</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
2. Zaloguj się do swojego panelu admina na Bloggerze.
3. Wejdź w menu Układ.
4. Dodaj gadżet HTML/JavaScript.
5. W treść gadżetu wklej skopiowany kod.
6. Zapisz.


Konfiguracja

  • Linki do profili społecznościowych zamień na własne.
  • Ikony zmienisz wchodząc na stronę FontAwesome. Jak to zrobić, zobaczysz w filmiku.
  • Jeśli chcesz usunąć dany przycisk, wytnij jego kod. Instrukcja w filmiku.
  • W arkuszu stylu możesz zmienić kolor przycisku, np. Facebooka - background-color: #659de3; w:
.social-btn.facebook {
background-color: #659de3;
}

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

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