Beauty

Nowoczesny widżet społecznościowy w ramkach

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:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' id='fontawesome' rel='stylesheet' type='text/css'/>

<style>
  ul#vt_socialbox a i {
    color: #fff;
    display: inline-block;
    font-size: 24px;
    padding: 10px 5px;
    text-align: center;
    width: 40px;
    border-radius: 2px 0 0 2px;
    -webkit-transition: transform .2s ease-in-out;
    -moz-transition: transform .2s ease-in-out;
    -o-transition: transform .2s ease-in-out;
    -ms-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
  }
  
  ul#vt_socialbox a i {
    background: #FC9A9A; /* kolor tła ikon */
  }
  ul#vt_socialbox span {
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;
    position: relative;
    top: -3px;
    font-family: arial;
    font-weight: normal;
    letter-spacing: 2px;
  }
  ul#vt_socialbox a {
    display: block;
    text-align: left;
    background-color: #F9F9F9;
    box-shadow: 0 0 0 1px #EEE inset;
    color: #555;
    font-weight: 700;
    text-transform: uppercase;
  }
  ul#vt_socialbox li {
    display: block;
    float: left;
    margin: 0 0 10px;
    width: 100%;
    padding: 0!important;
  }
</style>

<ul id='vt_socialbox'>
  <li>
    <a data-title='Facebook' href='http://www.facebook.com/blokotek' target='_blank'>
      <i class='fa fa-facebook'>
      </i>
      <span>
        Facebook
      </span>
    </a>
  </li>
  <li>
    <a data-title='Twitter' href='http://twitter.com/Blokotek' target='_blank'>
      <i class='fa fa-twitter'>
      </i>
      <span>
        Twitter
      </span>
    </a>
  </li>
  <li>
    <a data-title='Google+' href='https://plus.google.com/+BlokotekPlDodatki' target='_blank'>
      <i class='fa fa-google-plus'>
      </i>
      <span>
        Google
      </span>
    </a>
  </li>
  <li>
    <a data-title='Bloglovin' href='http://www.bloglovin.com/blog/13115087' target='_blank'>
      <i class='fa fa-heart'>
      </i>
      <span>
        Bloglovin
      </span>
    </a>
  </li>
  <li>
    <a data-title='Youtube' href='http://www.youtube.com/user/Blokotek' target='_blank'>
      <i class='fa fa-youtube-play'>
      </i>
      <span>
        Youtube
      </span>
    </a>
  </li>
  <li>
    <a href='http://instagram.com/Blokotek.pl' target='_blank'>
      <i class='fa fa-instagram'>
      </i>
      <span class='social-type'>
        Instagram
      </span>
    </a>
  </li>
  <li>
    <a href='http://www.pinterest.com/blokotek' target='_blank'>
      <i class='fa fa-pinterest'>
      </i>
      <span>
        Pinterest
      </span>
    </a>
  </li>
  <li>
    <a href='http://feeds.feedburner.com/blokotek' target='_blank'>
      <i class='fa fa-rss'>
      </i>
      <span>
        Rss
      </span>
    </a>
  </li>
</ul>
5. Do treści gadżetu wklej skopiowany kod.
6. Zapisz gadżet.

Jak dostosować przyciski?

  • Linki zamień na adresy do profili społecznościowych. 
  • background: #FC9A9A; /* kolor tła ikon */

Instagram