Социальные иконки Dsantyn для uCoz
 | |
| Это простые и в тоже время нужно заметить, рабочие социальные закладки, которые можно вывести на главную страница и если блок позволяет, то установить туда. Но есть также минус в них, так как резчик рекламы может их принять за рекламный баннер и порезать их, а точнее пользователи или гости сайта их не увидят. Кнопки очень красивы и оригинальны,так как куда бы вы их. При нажатие на любую кнопку, срабатывает эффект оттенка и становиться она темной. Установка! Это сам код иконок,ставим в любое место. Код <div class="margin-b20"> <ul class="social-icon"> <li><a href="http://vk.com/share.php?url=$HOME_PAGE_LINK$$REQUEST_URI$" title="Поделится в Vk" class="fa fa-vk"><span>Вконтакте</span></a></li> <li><a href="http://twitter.com/share?text=$ENTRY_NAME$&url=$HOME_PAGE_LINK$$REQUEST_URI$" title="Поделится в Twittere" class="fa fa-twitter "><span>Twitter</span></a></li> <li><a href="http://www.facebook.com/sharer.php?u=$HOME_PAGE_LINK$$REQUEST_URI$" title="Поделится в Facebooke" class="fa fa-facebook"><span>Facebook</span></a></li> <li><a href="https://plus.google.com/share?url=$HOME_PAGE_LINK$$REQUEST_URI$" title="Поделится в Google " class="fa fa-google-plus"><span>Google +</span></a></li> <li><a href="https://www.youtube.com/" title="Youtube" class="fa fa-youtube"><span>Youtube</span></a></li> </ul> </div> А этот код мы устанавливаем в стили CSS Код /*social-icon*/ .social-icon {overflow:hidden;} .social-icon li {float:left; text-align:center; width:20%; height:60px;} .social-icon li:first-child a {border-top-left-radius:3px; border-bottom-left-radius:3px;} .social-icon li:last-child a {border-top-right-radius:3px; border-bottom-right-radius:3px;} .social-icon li a {display:block; font-size:22px; color:#fff; line-height:60px; margin-left:1px;} .social-icon li a span {display:none; text-indent:-9999px} .social-icon li a.fa-vk {background:#78C2EB; background:rgba(120,194,235,0.7)} .social-icon li a.fa-facebook{background: #7998CA; background:rgba(121,152,202,0.7)} .social-icon li a.fa-twitter {background:#02B0E4; background:rgba(2,176,228,0.7)} .social-icon li a.fa-google-plus {background:#FC7EA4; background:rgba(252,126,164,0.7)} .social-icon li a.fa-youtube {background:#F12567; background:rgba(241,37,103,0.7)} .social-icon li a:hover {color:#a5bbdc; background:#304156;} #footer .social-icon li {width:40px; height:40px;} #footer .social-icon li a {line-height:40px; font-size:18px;} | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
