Кнопки «Поделиться новостью» для DLE
Красивая реализация кнопок «Поделиться новостью» для DataLife Engine. При клике на кнопку \»Поделиться\» выскакивает окно с ссылками на новость.
Как реализовать:
1. В шаблоне полной новости fullstory.tpl после тега
|
1 |
{full-story} |
Добавляем этот код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<noindex> <div class="news_btn"> <hr /> <div class="vk_btn"><a href="http://vk.com/share.php?url={full-link}" target="_blank"><span><img src="{THEME}/images/soc_icon/vk.png" title="Поделиться новостью: {title} в Вконтакте" alt="Вконтакте" />Мне нравится</span></a></div> <div class="tw_btn"> <script type="text/javascript"> document.write('<a href="https://twitter.com/intent/tweet?source=webclient&text=' + encodeURIComponent('{title} {full-link}') + '" target="_blank"><span><img src="{THEME}/images/soc_icon/tw.png" title="Твитнуть новость: {title}" alt="Твиттер" />Tweet</span></a>'); </script> </div> <div class="ya_btn"><a href="http://www.facebook.com/share.php?u={full-link}" target="_blank"><span><img src="{THEME}/images/soc_icon/fb.png" title="Поделиться новостью: {title} в Facebook" alt="Facebook" />Поделиться</span></a></div> <div class="google_btn"><a href="https://www.google.com/bookmarks/mark?op=add&bkmk={full-link}&title={title}" target="_blank"><span><img src="{THEME}/images/soc_icon/google.png" title="Добавить в закладки: {title}" alt="Google" />В Закладки</span></a></div> <div class="code_btn"> <script type="text/javascript"> //<![CDATA[ $(function() {$( "#LinksPublication" ).dialog({autoOpen: false, show: 'fade', hide: 'fade', width: 650}); $('#LinksPublication-link').click(function(){$('#LinksPublication').dialog('open'); return false;}); }); //]]> </script> <a id="LinksPublication-link" href="#"><span><img src="{THEME}/images/soc_icon/g.png" title="Скопировать ссылку и поделиться новостью с друзьями" alt="" />Поделиться</span></a> <div id="LinksPublication" title="Поделитесь новостью с друзьями" style="display:none; " > <table align="center" cellpadding="2" cellspacing="1" width="100%"> <tbody> <tr> <td class="txtw">Прямой адрес:</td><td><input onclick="this.select()" value="{full-link}" type="text" style="width:100%" readonly="readonly" /></td> </tr> <tr> <td class="txtw">BB-code:</td><td><input onclick="this.select()" value="[url={full-link}]{title}[/url]" type="text" style="width:100%" readonly="readonly" /></td> </tr> <tr> <td class="txtw">HTML ссылка:</td><td><input onclick="this.select()" value='<a href="{full-link}" target="_blank">{title}</a>' type="text" style="width:100%" readonly="readonly" /></td> </tr> </tbody> </table> </div> </div> </div></noindex> <div class="news_btn"><hr /></div> |
2. Добавим стили CSS — В самый конец файла engine.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#LinksPublication td { padding: 3px 0; } .news_btn {overflow:hidden; clear:both; margin:0px 0 0 0;} .news_btn hr { height: 0; border: 0; border-top: 1px solid #eeeeef; -moz-box-sizing: content-box; box-sizing: content-box; margin: 10px 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:#ee4348;} .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('../images/soc_icon/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;} @media (max-width: 980px) {.news_btn { display: none; } } |
3. В целом готово, осталось только загрузить иконки соц-сетей:
Папку soc_icon загружаем в папку images в вашем шаблоне.
[attachment=127]
Готово.
Скачать Кнопки «Поделиться новостью» для DLE:
