Блок подписки feedburner с социальными кнопками

В посте о предлагаемых мной скромных услугах пользователи попросили указать на пост, рассказывающий о панели подписки, который размещен в блоге под статьями. Такого поста нет, а поделиться этим блоком желание есть. Ну если нравится людям, почему нет?

Блок подписки 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://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://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://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 замените на папку картинок, в которую поместим изображения формы.

Картинка

Она одна:

Сохраните ее и закиньте в ту папку, которую указали в стилях выше.

Это все. Совсем не сложно, но если будут вопросы — задавайте их в комментариях.

Удачи Вам друзья, успехов!


Комментарии

26 на запись "Блок подписки feedburner с социальными кнопками"
  1. Спасибо.. очень актуально мне попалось.

  2. Кстати уже 3 письма писал в Плюсо, ребята отвечали что они пилят. Но что-то мне кажется что так не делают проекты.. Писал их инвестору — отвечали что ребята работают, но что-то мне говорит о другом.

  3. Сергей, спасибо Вам, за то что выкладываете такие вещи для народа )))

    Но у меня небольшой конфуз: немного коряво работает форма подписки по e-mail.

    при добавлении точ-в-точ как у Вас и при установке курсора в поле ввода пропадает часть картинки, а ввод можно продолжать….

    пришлось в #rss-to-email input { в style.css добавить подложку в виде исходного изображения формы ввода.

    Сейчас при установке курсора в поле ввода чуть ниже появляется ещё несколько рядов пикселей «подложки»
    Помогите пожалуйста.
    С наступающим Новым Годом и Рождеством!
    Процветания и Благополучия Вам )))

  4. deniro21:

    Классно! Спасибо!

  5. Людмила Плехова:

    Я поставила эту подписку, в результате-на записях она есть, а на страницах нет, кроме того уж очень низко встала форма, что некрасиво. Получилось, что на странице благодарности ее нет, а исходя из положения в записи, она не получиться над подарком, если можно — жду подсказку.

  6. Сергей, скажите, вы не работали с шаблонами сделанными в Artisteer 3?
    Там код совсем другой и не могу понять, как туда, что вставить! :)
    Может вы сообразите?

  7. Интересное решение, мне очень понравилось. каждый делает для себя подобные фишки, исходя из личных предпочтений.

  8. outstanding45:

    Уфф спасибо, все никак руки не доходят, на моем блоге пока этого нету =( все пичально
    завтра попробую и себе сделать!

  9. Здравствуйте!

    Спасибо!

    Попробуйте в стиле .post-subscribe поправить строчку padding:5px 3px 35px 3px;, а именно 5px заменить на 0, а 35px на 40px. В общем стоит поиграть с этими двумя отступами.

    • trezub:

      Вот спасибо, Сергей!
      Все получилось. Одна просьба: если возможно — не могли бы Вы предоставить код от формы подписки в сайтбаре. На сколько я помню, я не один итересуюсь этим. У Вас очень аккуратно и красиво получилось.
      Заранее благодарен! Успехов Вам!

  10. aesinru:

    Спасибо. Надоела уже стандартная форма.

  11. Александра:

    Сергей, спасибо за код блока — очень полезно! 😉 Подскажите, вы в этом блоке вроде бы нигде не задаете параметры шрифта для фразы: «Я не пишу просто так…» ?

  12. Спасибо. Сейчас буду пробовать слепить что-то подобное)

  13. Сергей, может раскроете секрет вашей формы подписки? Виджет, который в сайт баре самый верхний)

Спасибо, что оставили свой комментарий

banner