» »

Скрипт социальные закладки на ваш сайт

Скрипт социальные закладки на ваш сайт

Трудно представить сайт без социальных закладок под материалом или на главной странице, здесь подборка горизонтальных кнопок. Которая идет в светлом дизайн и на них размещены кнопки соответствующих социальных площадок. Они созданы под вид материалов и комментариев к нему, это там где будет написана статья или размещены разные файлы, чтоб скачать.

Основном администратор сайта берет скрипты на разных сервис, что иногда сильно тормозит сайт при их загрузки. Здесь они будут автономны и только зависеть от вашего интернет ресурса. С ними идут стили, а это означает, вы по дизайн из можете изменить, ко кроме самой кнопки, так как она на ссылке. Проверены материал на работоспособность и все отлично открывает и отправляет.

Так они реально будут смотреться и настроены по умолчанию.



Приступаем к установке:

1. Ставим там где нужно, но не забываем, что они горизонтально будут расположены.
2. Потом находим ссылку "http://zornet.ru" у каждой кнопки и убираем ее и ставим свою, чтоб от вашего портала работало.

Код
<div class="news_btn" align="center">  
  <div class="vk_btn"><a href="http://connect.mail.ru/share?url=http://zornet.ru" target="_blank"><span><img src="http://zornet.ru/Aben/ABGER/mail.png" title="$SITE_NAME$" alt="Mail.ru" />Мне нравится</span></a></div>  
  <div class="vk_btn"><a href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=http://zornet.ru" target="_blank"><span><img src="http://zornet.ru/Aben/ABGER/od.png" title="Поделиться с друзьями на Одноклассниках $SITE_NAME$!" alt="Одноклассники" />Мне нравится</span></a></div>  
  <div class="vk_btn"><a href="http://vk.com/share.php?url=http://zornet.ru" target="_blank"><span><img src="http://zornet.ru/Aben/ABGER/vk.png" title="Мне нравится новость: $SITE_NAME$!" alt="Вконтакте" />Мне нравится</span></a></div>  
  <div class="vk_btn"><a href="https://www.facebook.com/sharer.php?u=http://zornet.ru" target="_blank"><span><img src="http://zornet.ru/Aben/ABGER/fb.png" title="Поделиться новостью в Facebook" alt="Я.ру" />Мне нравится</span></a></div>  
  <div class="vk_btn"><a href="http://twitter.com/share" target="_blank"><span><img src="http://zornet.ru/Aben/ABGER/tw.png" title="Твиттнуть" alt="Google" />Твиттнуть</span></a></div>  
  </div>  
  <div class="clr"></div>  
  </div>


CSS

Код
.news_btn {overflow:hidden; clear:both; margin:5px 0 0 0;}  
  .vk_btn {font-size:11px; display:block; float:left; margin:0 5px 0 0;}  
  .vk_btn a {color:#2b5e81;}  
  .tw_btn {font-size:11px; display:block; float:left; margin:0 5px 0 0; }  
  .tw_btn a {color:#2b5e81;}  
  .ya_btn {font-size:11px; display:block; float:left; margin:0 5px 0 0;}  
  .ya_btn a span:first-letter {color:#2b5e81;}  
  .google_btn {font-size:11px; display:block; float:left; margin:0 5px 0 0;}  
  .google_btn a {color:#2b5e81;}  
  .code_btn {font-size:11px; display:block; float:right;}  
  .code_btn a {color:#72990e;}  
  .news_btn a, .news_btn a span {float:left; max-width:290px; overflow:hidden; height:30px; padding: 0 0 0 5px; background: url('http://zornet.ru/Aben/ABGER/soc_btn.png') no-repeat; }  
  .news_btn a span {display:block; line-height:27px; padding: 0 8px 0 0; background-position: 100% 100%;}  
  .news_btn a span img {vertical-align:middle; margin:0 5px 0 0;}  
  .news_btn a:hover {text-decoration:none;}


PS - проверка происходила на светлом по стилистике сайта, и там они отлично вписываются в основу.
22.01.2017 Просмотров: 566 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 22.01.2017 21:571
0
Если вы решили поставить оригинальные кнопки от самих социальных площадок, то здесь можно применить код, который также все кнопки выставить горизонтально. Вам только нужно скопировать скрипт и поставить его.

Код
<div style="height:20px">  

<div style="width:150px;overflow:hidden;float:left">  
  К примеру тут от В Контакте  
</div>  

<div style="width:105px;overflow:hidden;float:left">  
  К примеру тут от Twitter  
</div>  

<div style="width:135px;overflow:hidden;float:left">  
  К примеру тут от Facebook  
</div>  

<div style="width:70px;overflow:hidden;float:left">  
  К примеру тут от Google Plus  
</div>  

<div style="width:230px;overflow:hidden;float:left">  
  К примеру тут от Мой Мир и Одноклассники  
</div>  
</div>
avatar