Beauty

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;
    }

Instagram