2015/03/19

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 */

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

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