2015/01/29

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.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

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