» »

Социальные иконки Dsantyn для uCoz


Социальные иконки 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;}


16.04.2016 Просмотров: 413 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
vitsavu
vitsavu 16.04.2016 01:321
0
Здравствуйте. Устанавливаем и делимся в коментариях за материал!
PS - Материал прошел проверку и работает на все 100%
Kosten
Kosten 19.04.2016 18:127
0
Но видать проверка проверялась не тем человеком, если косяки нашли.)
FeStemBer
FeStemBer 16.04.2016 16:442
0
В топку такие кнопки, лучше от юкоз поставлю.
Kosten
Kosten 19.04.2016 18:126
0
Но здесь каждому свое.
workman
workman 16.04.2016 17:343
0
На хрена выдумывать велосипед, если его уже давно придумали ... Ребята. Прекратите выдирать материал с других сайтов не понимая того что он не полон.
Kosten
Kosten 18.04.2016 13:534
0
workman, но так по сути, эти закладки, можно поставить вид материала и комментариев к нему, не понимаю, почему он не полный, он только к скриптам не очень относиться.

Kosten
Kosten 19.04.2016 18:125
0
А что там не доработано?
avatar