Beauty

15 wysuwanych ikon społecznościowych na bloga

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>
#top-social, #top-custom-social {
    position: relative;
    float: right;
    height: 40px;
    margin: auto;
    font-family: 'Open Sans';
    font-size: 12px;
}

#top-custom-social {
    margin-right: 0;
}

#top-social ul, #top-menu ul, #top-custom-social ul {
    margin: 0;
}

#top-social li, #top-social li a, #top-social li .ts-icon, #top-social li .ts-text {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
}

.ts-text {
    top: -40px;
    left: 40px;
}

#top-social li, #top-social li a, #top-social li .ts-text {
    float: left;
    width: auto;
    overflow: hidden;
    webkit-transition: all ease-in-out .2s;
    -moz-transition: all ease-in-out .2s;
    -o-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;
}

#top-social li a {
    width: 40px;
    line-height: 40px;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

#top-social li .ts-icon {
    float: left;
}

#top-social li.ts-facebook a {
    background-color: #3B5998;
}

#top-social li.ts-facebook .ts-icon {
    background: url("http://1.bp.blogspot.com/-sG3YF1EjEHU/U3YLqeVDqJI/AAAAAAAACig/Ssh3akWMA9Y/s1600/facebook.png") no-repeat center center;
}

#top-social li.ts-twitter a {
    background-color: #3CF;
}

#top-social li.ts-twitter .ts-icon {
    background: url("http://2.bp.blogspot.com/-7TRieVpL0Do/U3YLygnvWlI/AAAAAAAACko/U8HXjex2JRA/s1600/twitter.png") no-repeat center center;
}

#top-social li.ts-gplus a {
    background-color: #BD3518;
}

#top-social li.ts-gplus .ts-icon {
    background: url("http://2.bp.blogspot.com/-J65T5DDFmGA/U3YLsQjIJ-I/AAAAAAAACjE/mzdFbksJX-8/s1600/gplus.png") no-repeat center center;
}

#top-social li.ts-dribbble a {
    background-color: #D97AA5;
}

#top-social li.ts-dribbble .ts-icon {
    background: url("http://3.bp.blogspot.com/-IZTTI5NPGuE/U3YLpm65MQI/AAAAAAAAClk/x9DNwmbtZsE/s1600/dribbble.png") no-repeat center center;
}

#top-social li.ts-instagram a {
    background-color: #517FA4;
}

#top-social li.ts-instagram .ts-icon {
    background: url("http://3.bp.blogspot.com/-sTK6n7pusaA/U3YLtWaH62I/AAAAAAAACjU/zXBZYzKbuqI/s1600/instagram.png") no-repeat center center;
}

#top-social li.ts-forrst a {
    background-color: #304C25;
}

#top-social li.ts-forrst .ts-icon {
    background: url("http://3.bp.blogspot.com/-zMVVSWXiAq8/U3YLr0efB5I/AAAAAAAAClk/Ps_VoktRWLQ/s1600/forrst.png") no-repeat center center;
}

#top-social li.ts-blogger a {
    background-color: #FCA448;
}

#top-social li.ts-blogger .ts-icon {
    background: url("http://2.bp.blogspot.com/-ApMFb_vWI0s/U3YLptPEBpI/AAAAAAAAClk/zqtb9S5Gtw4/s1600/blogger.png") no-repeat center center;
}

#top-social li.ts-flickr a {
    background-color: #FF0084;
}

#top-social li.ts-flickr .ts-icon {
    background: url("http://3.bp.blogspot.com/-9s6wqujYMsE/U3YLrNGyN4I/AAAAAAAACi0/U6vUdDuTJvA/s1600/flickr.png") no-repeat center center;
}

#top-social li.ts-pinterest a {
    background-color: #CB2027;
}

#top-social li.ts-pinterest .ts-icon {
    background: url("http://2.bp.blogspot.com/-Y3L5v5ZT57Q/U3YLw-7ggzI/AAAAAAAAClg/_0WJEBsgBlI/s1600/pinterest.png") no-repeat center center;
}

#top-social li.ts-rss a {
    background-color: #F88F16;
}

#top-social li.ts-rss .ts-icon {
    background: url("http://4.bp.blogspot.com/-FaS42rrnU2A/U3YLxw_AzgI/AAAAAAAAClc/5oHfu6y-nnM/s1600/rss.png") no-repeat center center;
}

#top-social li.ts-vimeo a {
    background-color: #0590B8;
}

#top-social li.ts-vimeo .ts-icon {
    background: url("http://1.bp.blogspot.com/-LhNTQq4s8p0/U3YLzpIcmqI/AAAAAAAACk8/w8zkVefAHA0/s1600/vimeo.png") no-repeat center center;
}

#top-social li.ts-youtube a {
    background-color: #F33;
}

#top-social li.ts-youtube .ts-icon {
    background: url("http://2.bp.blogspot.com/-zUxuIiep2bk/U3YL0l16H4I/AAAAAAAAClA/ec0ubzqBD50/s1600/youtube.png") no-repeat center center;
}

#top-social li.ts-phone a {
    background-color: #4818AB;
}

#top-social li.ts-phone .ts-icon {
    background: url("http://4.bp.blogspot.com/-p1zKbm4ZiaU/U3YLv6pbVbI/AAAAAAAACkA/nZqTlNGKz2k/s1600/phone.png") no-repeat center center;
}

#top-social li.ts-mail a {
    background-color: #444;
}

#top-social li.ts-mail .ts-icon {
    background: url("http://3.bp.blogspot.com/-EGkzxTyci5o/U3YLvFWPewI/AAAAAAAACjw/VuJ24asmX2I/s1600/mail.png") no-repeat center center;
}

#top-social li.ts-linkedin a {
    background-color: #0A6495;
}

#top-social li.ts-linkedin .ts-icon {
    background: url("http://2.bp.blogspot.com/-phqIna__rRI/U3YLuG9B9uI/AAAAAAAACj8/id10r8rmLA0/s1600/linkedin.png") no-repeat center center;
}

#top-custom-social li {
    float: left;
    margin: 12px 0 12px 10px;
}

#top-custom-social li:first-child {
    margin-left: 0;
}

#top-custom-social li, #top-custom-social a {
    display: block;
    width: 16px;
    height: 16px;
}

#top-social li.ts-facebook a:hover {
    padding-right: 70px;
}

#top-social li.ts-twitter a:hover {
    padding-right: 70px;
}

#top-social li.ts-gplus a:hover {
    padding-right: 70px;
}

#top-social li.ts-dribbble a:hover {
    padding-right: 70px;
}

#top-social li.ts-instagram a:hover {
    padding-right: 70px;
}

#top-social li.ts-forrst a:hover {
    padding-right: 70px;
}

#top-social li.ts-blogger a:hover {
    padding-right: 70px;
}

#top-social li.ts-flickr a:hover {
    padding-right: 70px;
}

#top-social li.ts-pinterest a:hover {
    padding-right: 70px;
}

#top-social li.ts-rss a:hover {
    padding-right: 70px;
}

#top-social li.ts-vimeo a:hover {
    padding-right: 70px;
}

#top-social li.ts-youtube a:hover {
    padding-right: 70px;
}

#top-social li.ts-phone a:hover {
    padding-right: 70px;
}

#top-social li.ts-mail a:hover {
    padding-right: 70px;
}

#top-social li.ts-linkedin a:hover {
    padding-right: 70px;
}
</style>
<div id='top-social'>
  <ul>
    <li class='ts-facebook'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Facebook
        </div>
      </a>
    </li>
    <li class='ts-twitter'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Twitter
        </div>
      </a>
    </li>
    <li class='ts-gplus'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Google+
        </div>
      </a>
    </li>
    <li class='ts-dribbble'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Dribbble
        </div>
      </a>
    </li>
    <li class='ts-instagram'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Instagram
        </div>
      </a>
    </li>
    <li class='ts-forrst'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Forrst
        </div>
      </a>
    </li>
    <li class='ts-blogger'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Blogger
        </div>
      </a>
    </li>
    <li class='ts-flickr'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Flickr
        </div>
      </a>
    </li>
    <li class='ts-pinterest'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Pinterest
        </div>
      </a>
    </li>
    <li class='ts-rss'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          RSS
        </div>
      </a>
    </li>
    <li class='ts-vimeo'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Vimeo
        </div>
      </a>
    </li>
    <li class='ts-youtube'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          YouTube
        </div>
      </a>
    </li>
    <li class='ts-phone'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Phone
        </div>
      </a>
    </li>
    <li class='ts-mail'>
      <a href='mailto:info@mail.pl' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Email
        </div>
      </a>
    </li>
    <li class='ts-linkedin'>
      <a href='#' target='_blank'>
        <div class='ts-icon'>
        </div>
        <div class='ts-text'>
          Linkedin
        </div>
      </a>
    </li>
  </ul>
</div>

Jak dostosować widżet?

# zaznaczone na zielono zamień na linki do swoich profili społecznościowych.
Adres E-mail zaznaczony na pomarańczowo zamień na własny.

Instagram