» » » Социальные кнопки - поделится
24 0  

Социальные кнопки - поделится

Маленький скрипт Социальные кнопки - поделится очень легко добавить на страницу социальные кнопки для сайтов на DLE.

 

Вывод описания для поста формируется из первых 75 символов полной новости.


1. Все что Вам нужно скопировать код в полную новость где должны отображатся социальные кнопки.

<div id="share">
<div class="like">Понравилось? Поделитесь с друзьями!</div>
<div class="social" data-url="{full-link}" data-title="{title}" data-desc="{full-story limit="75"}">
	<a class="push facebook" data-id="fb"><i class="fa fa-facebook"></i> Facebook</a>
	<a class="push twitter" data-id="tw"><i class="fa fa-twitter"></i> Twitter</a>
	<a class="push vkontakte" data-id="vk"><i class="fa fa-vk"></i> Вконтакте</a>
	<a class="push google" data-id="gp"><i class="fa fa-google-plus"></i> Google+</a>
	<a class="push ok" data-id="ok"><i class="fa fa-odnoklassniki"></i> OK</a>
</div>
</div>
<style>#share {width:100%;border:1px solid #eaeaea;margin: 0 auto;background:#fff;text-align:center;}.like {font-size: 16px;font-weight: 700;line-height: 50px;}.push {display: inline-block;width: 17%;min-width: 100px;line-height: 40px;margin: 5px 2px 20px 2px;font-size: 15px;text-align: center;color:#fff;cursor: pointer;}.facebook {background-color:#3b5998;}.facebook:hover {background-color:#2d4373; color:#fff;}.google {background-color:#dd4b39;}.google:hover {background-color:#c23321; color:#fff;}.twitter {background-color:#55acee;}.twitter:hover {background-color:#2795e9; color:#fff;}.vkontakte {background-color:#587ea3;}.vkontakte:hover {background-color:#466482; color:#fff;}.ok {background-color:#ee8208;}.ok:hover {background-color:#ee7808; color:#fff;}
</style>
<script defer src="{THEME}/js/socknopki.js"></script>


2.Подключить скрипт отдельным файлом загрузив его а папку шаблона в /js/


3. Вставить в main.tpl такой код, перед "</body>"

<script defer src="{THEME}/js/socknopki.js"></script>

Скачать файл socknopki.rar [1,21 Kb] (cкачиваний: 0)  


4. (<i class="fa fa-google-plus"></i>) Заменить на свою иконку или рисунок


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019