[tealtable]Рипал: Бармен[/tealtable]
[graytable]Ссылка на скачивание![/graytable]
Вставляем в Нижнею часть сайта или куда душе угодно:
Код
<footer>
<h3>Поделись с друзьями:</h3>
<div class="sharing-container">
<div onclick="ShareUpdate.fb()" data-target="fb" class="share-btn fb"></div>
<div onclick="ShareUpdate.ok()" data-target="ok" class="share-btn ok"></div>
<div onclick="ShareUpdate.vk()" data-target="vk" class="share-btn vk"></div>
</div>
</footer>
CSS:
Код
@import url('https://fonts.googleapis.com/css?family=Oswald&subset=cyrillic');
@media screen and (max-width: 1400px) footer {
bottom: 1.875rem;
}
footer {
position: absolute;
bottom: 3.125rem;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 1400px) footer h3 {
position: relative;
top: 1.5625rem;
}
@media screen and (max-width: 1768px) footer h3 {
font-size: 30px;
margin: .625rem auto;
}
footer h3 {
text-shadow: 0 1px 0 rgba(0,0,0,.51);
font-size: 32px;
font-weight: 500;
line-height: .88;
letter-spacing: 1.3px;
color: #f1f1f1;
margin: 1.25rem auto;
}
footer h3 {
font-family: 'Oswald', sans-serif;
}
footer h3 {
text-align: center;
}
@media screen and (max-width: 1400px) footer .sharing-container {
position: relative;
top: .9375rem;
}
footer .sharing-container {
text-align: center;
margin: auto;
}
footer .sharing-container .share-btn.fb {
width: 83px;
height: 185px;
background-image: url(/images/share/social/f@1x.png);
}
footer .sharing-container .share-btn.ok {
width: 83px;
height: 185px;
background-image: url(/images/share/social/ok@1x.png);
}
footer .sharing-container .share-btn.vk {
width: 83px;
height: 185px;
background-image: url(/images/share/social/vk@1x.png);
}
footer .sharing-container .share-btn:last-child {
margin: 0 auto;
}
footer .sharing-container .share-btn {
display: inline-block;
background-repeat: no-repeat;
background-position: 0 0;
cursor: pointer;
margin-right: 36px;
}
footer .sharing-container .share-btn:active {
background-position: -166px 0;
}
footer .sharing-container .share-btn:hover {
background-position: -83px 0;
}
){kind=link}