Beauty

6 bocznych przycisków społecznościowych

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:
<style>
.social-buttons {
position:fixed;
top:150px;
width:45px;
z-index:9999;
}

.button-right {
right:0;
}

.social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn .social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon {
background-image:url(http://4.bp.blogspot.com/-IdLl6aXILEw/VNtjJnK93CI/AAAAAAAAI8w/hu4J9DLPE5Q/s1600/mas-icons.png);
}
  
.social-buttons #twitter-btn:hover .social-icon,.social-buttons #facebook-btn:hover .social-icon,.social-buttons #google-btn:hover .social-icon,.social-buttons #rss-btn:hover .social-icon,.social-buttons #pinterest-btn:hover .social-icon,.social-buttons #youtube-btn:hover .social-icon {
background-color: #444;
}
  
.button-left #facebook-btn span {
background-position:right 10px;
}

.button-left #twitter-btn span {
background-position:right -35px;
}

.button-left #google-btn span {
background-position:right -127px;
}

.button-left #rss-btn span {
background-position:right -80px;
}

.button-right #facebook-btn span {
background-position:12px 10px;
}

.button-right #twitter-btn span {
background-position:11px -35px;
}

.button-right #google-btn span {
background-position:10px -127px;
}

.button-right #rss-btn span {
background-position:11px -80px;
}

.social-buttons #facebook-btn .social-icon {
background-color:#3B5998;
}

.social-buttons #twitter-btn .social-icon {
background-color:#62BDB2;
}

.social-buttons #google-btn .social-icon {
background-color:#DB4A39;
}

.social-buttons #rss-btn .social-icon {
background-color:#FF8B0F;
}

.social-buttons #pinterest-btn .social-icon {
background-color:#D43638;
}

.social-buttons #youtube-btn .social-icon {
background-color:#C4302B;
}

.social-buttons a:hover {
display:block;
}

.button-right .social-icon {
-moz-transition:background-color .4s ease-in 0;
-webkit-transition:background-color .4s ease-in 0;
background-repeat:no-repeat;
display:block;
float:right;
height:43px;
margin-bottom:2px;
width:43px;
}

.button-right .social text{
display:none;
float:left;
font-size:80%;
font-weight:700;
white-space:nowrap;
margin:11px 0 11px 40px;
}

.button-right #pinterest-btn span {
background-position:11px -177px;
}

.button-right #youtube-btn span {
background-position:11px -223px;
}
</style>

<div class='social-buttons button-right'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'></span></a>
</div>
5. Do treści gadżetu wklej skopiowany kod.
6. Zapisz gadżet.

Jak dostosować przyciski?

Tekst zaznaczony na pomarańczowo zamień na nazwy użytkownika lub numery swoich profili społecznościowych.

Instagram