Beauty

5 przycisków udostępniania

Demo

Jak umieścić widżet na Bloggerze?

Zaloguj się do panelu admina, wejdź w menu Układ i dodaj gadżet tam, gdzie chcesz, by wyświetlał się widżet.
Wybierz HTML/JavaScript.
W tytule możesz napisać Nasze profile, lub inny własny tekst, a w treści wklej skopiowany kod widżetu. Na koniec Zapisz.

Kod widżetu

<style>
.social-icons a {
  font-size: 18px;
  line-height: 40px;
  list-style: none;
  display: inline-block;
  text-align: center;
  height: 40px;
  width: 40px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 3px;
  background-color: #aaa;
  color: #fff;
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}
#footer-area .social-icons a {
  margin-right: 7px;
  background-color: #363636;
}

.social-icons a.facebook:hover {
  background-color: #4265b9 !important;
}
.social-icons a.twitter:hover {
  background-color: #55ACEE !important;
}
.social-icons a.dribbble:hover {
  background-color: #ea4c89 !important;
}
.social-icons a.flickr:hover {
  background-color: #ff0084 !important;
}
.social-icons a.googleplus:hover {
  background-color: #d62408 !important;
}
.social-icons a.skype:hover {
  background-color: #0bbff2 !important;
}
.social-icons a.pinterest:hover {
  background-color: #c31e26 !important;
}
.social-icons a.linkedin:hover {
  background-color: #005987 !important;
}
.social-icons a.vimeo:hover {
  background-color: #1bb6ec !important;
}
.social-icons a.tumblr:hover {
  background-color: #35506b !important;
}
.social-icons a.youtube:hover {
  background-color: #df3333 !important;
}
.social-icons a.instagram:hover {
  background-color: #F95B60 !important;
}
.social-icons a.rss:hover {
  background-color: #f39c12 !important;
}
</style>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<div class="social-icons">
  <a href="#" class="facebook">
    <i class="social_icon fa fa-facebook">
    </i>
  </a>
  <a href="#" class="twitter">
    <i class="social_icon fa fa-twitter">
    </i>
  </a>
  <a href="#" class="googleplus">
    <i class="social_icon fa fa-google-plus">
    </i>
  </a>
  <a href="#" class="youtube">
    <i class="social_icon fa fa-youtube">
    </i>
  </a>
  <a href="#" class="pinterest">
    <i class="social_icon fa fa-pinterest">
    </i>
  </a>
</div>

Jak dostosować widżet?

# zaznaczone na zielono zamień na linki do swoich profili społecznościowych.

Instagram