Блок подписки feedburner с социальными кнопками
В посте о предлагаемых мной скромных услугах пользователи попросили указать на пост, рассказывающий о панели подписки, который размещен в блоге под статьями. Такого поста нет, а поделиться этим блоком желание есть. Ну если нравится людям, почему нет?
Блок этот состоит из двух частей: 1. Кнопки социальных сетей от Pluso (кстати, так нам обещанную статистику и не открыли :(); 2. Форма подписки от feedburner.
Чтобы не мучить желающих разместить точно такой же блок у себя лишними словами, отдам сразу все — код, стили, картинки. А Вы уж у себя разместите это дело и все будет хорошо. Ок?
Код
<div class="post-subscribe"><h2 align="center" style="color:#990000;">Спасибо за репост, друзья: </h2> <div class='pluso pluso-theme-light pluso-multiline' style='float: left; margin-right: 5px;'><div class='pluso-more-container'><a class='pluso-more' href=''></a><ul class='pluso-counter-container'><li></li><li class='pluso-counter'></li><li></li></ul></div><a class='pluso-twitter'></a><a class='pluso-facebook'></a><a class='pluso-google'></a><a class='pluso-vkontakte'></a><br /><a class='pluso-evernote'></a><a class='pluso-bookmark'></a><a class='pluso-email'></a><a class='pluso-print'></a></div> <script type='text/javascript'>if(!window.pluso){pluso={version:'0.9.1',url:'http://pervushin.com/share.pluso.ru/'};h=document.getElementsByTagName('head')[0];l=document.createElement('link');l.href=pluso.url+'pluso.css';l.type='text/css';l.rel='stylesheet';s=document.createElement('script');s.src=pluso.url+'pluso.js';s.charset='UTF-8';h.appendChild(l);h.appendChild(s)}</script> <div style="float: right; margin-left: 5px; width: 330px;">Я не пишу просто так. Не пишу, чтобы просто писать. Я пишу тогда, когда есть действительно интересная информация. Оставьте свой e-mail и я сообщу, когда такая информация будет (<b><a href="http://pervushin.com//category/exclusive-for-subscribers" title="Подписчикам плюшки!">+</a></b>): <div style="float: left; padding: 10px 0 0 0;"><form action="http://pervushin.com/feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://pervushin.com/feedburner.google.com/fb/a/mailverify?uri=pervushin_com', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" id="rss2mail"><input type="hidden" name="action" value="quick" /><input type="text" name="email" value="Ваш e-mail" onblur="if(this.value=='') this.value='Ваш e-mail';" onfocus="if(this.value=='Ваш e-mail') this.value='';" class="rss2mail" /><input type="submit" value="" class="go" /><input type="hidden" value="pervushin_com" name="uri" /><input type="hidden" name="loc" value="ru_RU" /></form></div></div> </div><br /> |
Это точная копия того, что размещено у меня. Текст (при желании) и адрес ленты в feedburner (обязательно) меняем на свои. Размещаем в single.php сразу после <?php the_content(); ?> или подобной ей строчки (применительно к wordpress).
Стили
.post-subscribe { border:1px dashed #910a0a; padding:5px 3px 35px 3px; height: 110px; } #rss2mail { clear:both; text-align:right; width:100%; overflow:hidden; position:relative; top:-6px; margin:0 0 -6px; } #rss2mail label { display:block; margin-right:28px; height:25px; } #rss2mail input { float:left; border:none; margin:0; } .rss2mail { width:152px; background:url(i/rss2mail.gif) no-repeat; font:11px Verdana, Tahoma, Arial; color:#7A7A7A; padding:5px 3px 8px 26px; } #rss2mail .go { width:33px; height:24px; background:url(i/rss2mail.gif) 100% 0 no-repeat; } |
Их мы помещаем в свой файл стилей. Обычно это style.css вашей темы. В строках (их две) background:url(i/rss2mail.gif) букву i замените на папку картинок, в которую поместим изображения формы.
Картинка
Она одна:
Сохраните ее и закиньте в ту папку, которую указали в стилях выше.
Это все. Совсем не сложно, но если будут вопросы — задавайте их в комментариях.
Удачи Вам друзья, успехов!
Спасибо.. очень актуально мне попалось.
Кстати уже 3 письма писал в Плюсо, ребята отвечали что они пилят. Но что-то мне кажется что так не делают проекты.. Писал их инвестору — отвечали что ребята работают, но что-то мне говорит о другом.
Да, поспешили они в грудь себя бить, поспешили.
Я уж ни раз порывался свои кнопки писать,
Тоже посещают мысли сделать такой сервис, но уж очень занят smart linker.
Сергей, спасибо Вам, за то что выкладываете такие вещи для народа )))
Но у меня небольшой конфуз: немного коряво работает форма подписки по e-mail.
при добавлении точ-в-точ как у Вас и при установке курсора в поле ввода пропадает часть картинки, а ввод можно продолжать….
пришлось в #rss-to-email input { в style.css добавить подложку в виде исходного изображения формы ввода.
Сейчас при установке курсора в поле ввода чуть ниже появляется ещё несколько рядов пикселей «подложки»
Помогите пожалуйста.
С наступающим Новым Годом и Рождеством!
Процветания и Благополучия Вам )))
Классно! Спасибо!
Я поставила эту подписку, в результате-на записях она есть, а на страницах нет, кроме того уж очень низко встала форма, что некрасиво. Получилось, что на странице благодарности ее нет, а исходя из положения в записи, она не получиться над подарком, если можно — жду подсказку.
За вывод страниц отвечает файл page.php вашей темы. Там примерно тоже самое, что и в single.php.
А почему низко встала надо посмотреть. Адрес страницы с формой подскажите, гляну.
http://dengiskofe.ru я страницу благодарности пока не опубликовала.
В постах блок выводится нормально, сразу после блока «По этой теме прочтите еще».
и чем больше я изучаю ваш блог, тем больше он мне нравиться — мне в тексте мешает плагин schаre, у вас все это собрано в сайтбаре в одном месте очень компактно. Поделитесь.
Сергей, скажите, вы не работали с шаблонами сделанными в Artisteer 3?
Там код совсем другой и не могу понять, как туда, что вставить! 🙂
Может вы сообразите?
Нет, не работал, к сожалению. А что там не так? Если хотите, можете прислать мне на sergey[гав]pervushin.com — гляну.
Сергей, спасибо БОЛЬШОЕ! Вы очень мне помогли!
Сейчас уже работаю над тонкостями 🙂
Интересное решение, мне очень понравилось. каждый делает для себя подобные фишки, исходя из личных предпочтений.
Уфф спасибо, все никак руки не доходят, на моем блоге пока этого нету =( все пичально
завтра попробую и себе сделать!
Делайте 😉
Здравствуйте!
Спасибо!
Попробуйте в стиле .post-subscribe поправить строчку padding:5px 3px 35px 3px;, а именно 5px заменить на 0, а 35px на 40px. В общем стоит поиграть с этими двумя отступами.
Вот спасибо, Сергей!
Все получилось. Одна просьба: если возможно — не могли бы Вы предоставить код от формы подписки в сайтбаре. На сколько я помню, я не один итересуюсь этим. У Вас очень аккуратно и красиво получилось.
Заранее благодарен! Успехов Вам!
Спасибо!
Как-нибудь на досуге напишу пост 😉
Спасибо. Надоела уже стандартная форма.
Сергей, спасибо за код блока — очень полезно! 😉 Подскажите, вы в этом блоке вроде бы нигде не задаете параметры шрифта для фразы: «Я не пишу просто так…» ?
Нет, никаких параметров, только текст.
Спасибо. Сейчас буду пробовать слепить что-то подобное)
Сергей, может раскроете секрет вашей формы подписки? Виджет, который в сайт баре самый верхний)