Стильные формы подписки.


Всем доброго времени суток. Сегодня хочу вам предложить 3 варианта симпатичных виджетов подписки для блога.  
 Эти блоки достаточно легко устанавливаются через гаджет HTML/JavaScript.
Единственное, что нужно будет сделать -  это поменять в коде некоторые значения на свои.


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

Ну а сейчас давайте посмотрим, как выглядят эти блоки подписки

Вариант 1. Работу его можно увидеть здесь на тестовом блоге.


А это код его

<center>
<div align="center" id="bloggertrix1-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 250px;">
<h3 id="bloggertrix1-title-text" style="color: white; font-size: 20px;">
получайте бесплатно  обновления блога </h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<a class="social-icons"https://www.facebook.com/viktoria.barad  "><img src="http://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/VikserV"><img src="http://2.bp.blogspot.com/-H-E4Ll7i2-0/USDjw3bxgVI/AAAAAAAAAZc/a2kMp8rGRVU/s1600/bloggertrix-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/u/0/102675035951405180575/posts"><img src="http://3.bp.blogspot.com/--KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="http://feeds.feedburner.com/shpargalochkiru "><img src="http://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/s1600/Bloggertrix-Rss.png" /></a>

<input class="email" id="bloggertrix_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="введите свой Email адресс" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="bloggertrix" /><input name="loc" type="hidden" value="en_US" /> <input id="digitalhubinc_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="подписаться" /></form>
</div>
</div>
</center>
<style>
a.social-icons {margin-right: 5px; height:40px;width:40px;}
a.social-icons:hover {opacity: .7;filter:alpha(opacity=70); }
#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(http://3.bp.blogspot.com/-Jl2lcnXe42Y/UOb49YMFH8I/AAAAAAAAAiA/hOnOANR83gc/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(http://2.bp.blogspot.com/-nmlWGnTX5y4/UOb44zqKGBI/AAAAAAAAAh4/Aaa-E2D0Umk/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style>

Всё, что выделено красным поменяйте на адреса своих страниц 
в facebook ,twitter, google+ и id feeds.feedburner. Синим цветом-ширина блока. Текст в форме можно поменять на свой. Он в коде выделен зелёным.

Вариант 2. Я установила на этом блоге в боковой колонке. (сейчас уже поменяла).

Вот код его.
<style>
#topbox{width:250px;border:1px solid #a1a1a1;background-color:#ffffff;padding-bottom:15px;padding-top:5px;}
#news-letter{clear:both;padding-top:10px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:5px;background: url(https://lh4.googleusercontent.com/-u3si_YxFoT0/TnmfA71Ti3I/AAAAAAAABko/arZLNvC3FYs/s800/mail-box.png) no-repeat;}
.news-headline{position: relative;z-index: 999;font-size: 18px;padding-bottom:10px;font-weight:bold;}
</style><br />
<div id="topbox">
<center>
<div class="news-headline" color:="color:">
получайте бесплатные обновления блога
</div></center>
<center>
<table border="0">
<tbody>
<tr>
<td style="padding-right: 4px;"><a href="https://twitter.com/VikserV"" target="_blank" title="follow me on twitter">
<img src="http://1.bp.blogspot.com/-Q4L6phRaHaA/UOKc13ilEwI/AAAAAAAAGLM/qZrVGXriT2s/s1600/bloggertrix.com-twitter-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://feeds.feedburner.com/shpargalochkiru " target="_blank" title="Subscribe Via RSS">
<img src="http://2.bp.blogspot.com/-Y0dHt53dw40/UOKc1B3zfJI/AAAAAAAAGLE/QZzG4hMqUNU/s1600/bloggertrix.com-rss-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="https://www.facebook.com/viktoria.barad" target="_blank" title="Find Us On Facebook">
<img src="http://4.bp.blogspot.com/-xELUzYYkYY0/UOKcz34EO2I/AAAAAAAAGK0/AZz0lNN6Sos/s1600/bloggertrix.com-facebook-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="https://plus.google.com/u/0/102675035951405180575/posts" target="_blank" title="Add me on Google+">
<img src="http://3.bp.blogspot.com/-bWbBG7yV2dQ/UOKc0ohrt1I/AAAAAAAAGK8/6m2c4idvyBc/s1600/bloggertrix.com-google-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="https://www.youtube.com/channel/UCAn9Io77qACZ1F1HkYFLPfA">
<img src="http://1.bp.blogspot.com/-eZFb46_b9RQ/UOKc2hK48BI/AAAAAAAAGLU/pwTmG2--j4o/s1600/bloggertrix.com-youtube-icon.png" style="height: 25px; width: 25px;" /></a>
</td></tr>
</tbody></table>
</center>
<div id="news-letter">
<span class="msg-box"></span>
<b>хотите подписаться</b>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=адрес вашего потока', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="ebutton3" gtbfieldid="2" maxlength="100" name="email" onfocus="this.value = '';" size="25" style="color: #333333; font-size: 11px; height: 21px; width: 130px;" type="text" valign="middle" value="введите email адрес" />
<input name="uri" type="hidden" value="http://feeds.feedburner.com/blogspot/UkdBi" />
<input name="loc" type="hidden" value="en_US" />
<input class="ebutton2" id="submit" style="font-size: 11px;" type="submit" value="жмём" />
</form>
</div>
</div>
<div class="clear">
</div>

<br />
<div class="clear">
</div>

Вариант 3. Очень похож на первый. Но в нём отсутствуют кнопки социальных сетей и дизайн немного другой. 



Код для неё.

<center>
<div align="center" id="truebloggertricks-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 240px;">
<h3 id="truebloggertricks-title-text" style="color: white; font-size: 20px;">
Оформите подписку по EMAIL</h3>
<div id="truebloggertricks-sub-title-txt" style="color: white; font-size: 14px;">
Получайте новые статьи блога на почту.</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="truebloggertricks_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Ваше имя" /><br />
<input class="email" id="truebloggertricks_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Введите Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="shpargalochkiru" /><input name="loc" type="hidden" value="ru_RU" /> <input id="truebloggertricks_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Подписаться" /></form>
</div>
</div>
</center>
<style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(http://3.bp.blogspot.com/-Jl2lcnXe42Y/UOb49YMFH8I/AAAAAAAAAiA/hOnOANR83gc/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(http://2.bp.blogspot.com/-nmlWGnTX5y4/UOb44zqKGBI/AAAAAAAAAh4/Aaa-E2D0Umk/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style>


Код достаточно большой. Обратите внимание на 2 строчки, выделенные синим цветом. Это название вашего потока в feedburner.

Если, какой-то вариант блока подписки подошёл вам советую сначала скопировать нужный код в блокнот и там поменять выделенные значения на свои. Во втором варианте меняем всё на свои значения по аналогии с первым. Чтобы узнать как найти свои адреса в соц.сетях попрошу сюда.

Желаю всем удачи и до новых встреч.



хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

33 комментария:

  1. Очень интересное и полезное сообщение. Спасибо.

    ОтветитьУдалить
  2. Александр. Рада, что Вам понравилось.

    ОтветитьУдалить
  3. Вы молодчина, Ваш блог очень полезен, особенно новичкам, которые только завели блог. Хотя и не только новичкам, я вроде и не новичёк, а с удовольствием и пользой для себя читаю Ваши сообщения.

    ОтветитьУдалить
  4. Спасибо, Александр за добрые слова. Мои сообщения по сравнению с Вашим творчеством небо и земля.

    ОтветитьУдалить
  5. Просто каждый занимается своим делом. Вы своим, как вижу занимаетесь не хуже, а может и лучше, чем я своим.

    ОтветитьУдалить
  6. Лариса, пожалуйста.

    ОтветитьУдалить
  7. Мне очень понравился второй варинт блока подписки. Скажите, а для Wordpress такая форма подойдет?

    ОтветитьУдалить
  8. Жульен, я не знаю. На сколько мне известно там плагины.

    ОтветитьУдалить
  9. Спасибо. Поставлю себе вторую форму, но попробую ее маленько изменить, удалю соц сети и меня смущает вставка ссылок на картинки из чужих источников.

    ОтветитьУдалить
  10. Вопрос: а ваша подписка рабочая? Я мучился с кодом и ну ни как не работает подписка, потом решил проверить вашу подписку на почту (которая в правом, верхнем углу) и ваша подписка не рабочая. И еще вопрос: не ужели у всех одинаковые http feedburner? Я почему то думаю что нет, если я правильно думаю, то какие http надо подставлять, то есть, откуда их брать?

    ОтветитьУдалить
  11. Все, я справился, я молодец :) Не могли бы проверить подписку на моем блоге? И еще, вам надо будет переделать подписку по почте и дописать пост. Подскажу: это связано с feedburner.com. Я так увлекся с изучением кода, что захотелось написать свой вариант поста про такую форму подписки. :)

    ОтветитьУдалить
  12. Привет Иван. Справился-молодец. Проверю подписку обязательно. А пост пиши если есть желание, почему бы нет. свою поменяю. Она мне тоже уже не очень как-то.

    ОтветитьУдалить
  13. Виктория, просто для таких чайников, как я, надо расписывать все подробно. В предыдущих комментах писал про ссылки на feedburner, вот в них то и проблема. То что у каждого должны быть разные ссылки (у вас об этом ни чего не написано), понял сразу, даже смог догадаться где их взять, но форма комментариев все равно не работала. Помучившись с часок, я решил проблему, это было из за смены доменя и я не те ссылки впихивал в код. Сейчас скину скриншоты, благодаря которым вы почините свою подписку.

    ОтветитьУдалить
  14. Иван. я специально не расписывала весь процесс. Этой теме в сети стооооолько. Давай скрины посмотрю. А явыот после смены домена всё поменяла, но она так и увы....

    ОтветитьУдалить
  15. Расскажу кратко. Первое что я сделал, это удалил старую форму комментария. Потом, на сайте feedburner.com, создал новый фид под свой домен. Далее смотрите скриншоты, на которых показал, что менять в коде и откуда это взять. https://yadi.sk/d/rAFv5Ti_cJ5Ev Думаю разберетесь.

    ОтветитьУдалить
  16. Виктория, если что не понятно то спрашивайте, я вчера пару часов убил на изучение кода, так что я теперь спец по этому коду :)

    ОтветитьУдалить
  17. Иван, ты молодец. Да нет всё достаточно понятно. Я забыла прописать en_us. Тебе обязательно надо написать пост на эту тему пока свежо.

    ОтветитьУдалить
  18. Виктория, я подумаю. А не подскажите, как вставить после статьи подписку на обновления блога? Мне просто надо знать строчку в шаблоне, после которой можно вставить код.

    ОтветитьУдалить
  19. Иван, а вот здесь прочитай об этом http://www.shpargalochki.ru/2014/07/oformit-shablon-soobshenija.html. И удачи тебе.

    ОтветитьУдалить
  20. Виктория, так не пойдет. Мне надо добавить элемент, после всех публикаций в блоге, а не только после новых. Так как вы написали, будет только с новыми публикациями, а старые останутся без изменений.

    ОтветитьУдалить
  21. Иван отправила тебе на почту.

    ОтветитьУдалить
  22. Спасибо! Хочу попробовать сделать. А для чего нужны кнопки соцсетей в форме подписки? Извините, если вопрос Вам покажется глупым...

    ОтветитьУдалить
    Ответы
    1. Форма связи нужна для блога. Попробуйте конечно. А иконки сетей нужны. чтобы читатели смогли делится сообщением и рекомендовать его своим друзьям в соц. сетях. или же присоединиться к вам.

      Удалить
  23. Здравствуйте! У вас на тестовом блоге есть еще одна форма подписки в боковой колонке (синего цвета, без кнопок социальных сетей). Можно от этой формы код как-то получить?

    ОтветитьУдалить
    Ответы
    1. Олег Зенков, посмотрите. дописала статью по вашей просьбе.

      Удалить
  24. Еще раз здравствуйте! Спасибо за оперативный ответ. К сожалению, эта форма подписки, код которой я спрашивал, не работает. Если я указываю свой e-mail, например, в первом варианте формы и нажимаю «Подписаться», то все ОК. А вот в третьем варианте при нажатии на кнопку «Подпишись» появляется какая-то ошибка. Проверьте пожалуйста. Может получится исправить ситуацию... Заранее спасибо!

    ОтветитьУдалить
    Ответы
    1. Вот так и называется поспешишь, людей насмешишь. Форма на тестовом стоит давно. Поторопилась. Сейчас исправила немного. Можете на том же тестовом блоге посмотреть-ссылка выше. Она в самом верху. Немного её изменила. Только когда что-то меняете на свои значения будьте внимательны ко всем знакам.
      Приношу свои извинения за неудобства.

      Удалить
  25. Доброго времени суток Вика! Установила 2 вариант формы подписки (ehzoterika.ru/2016/10/shkola-kajlas.html) внесла в конце сообщения, но при введении эл.почты появляется вот такое окно goo.gl/MkbpBd, может я что-то не настроила? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, здравствуйте там нужно заменить на адрес вашего потока uri=адрес вашего потока, отметила жирным шрифтом. Не адрес блога, а потока. У меня например он такой feeds.feedburner.com/shpargalochkiru нужно взять только shpargalochkiru.

      Удалить
  26. Вика я внесла uri=ehzoterika-rss', но по прежнему это окно появляется. С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Что-то ссылка goo.gl/MkbpBd похожа на сократитель ссылок. Потом надо будет разобраться. Попробуйте 3 вариант. Проверила здесь http://smotritetyt.blogspot.ru/-работает корректно.

      Удалить
  27. Вика, это я сократила фото, чтоб длинного адреса не было, а если не открывается вот ссылка на фото 3.bp.blogspot.com/-c4MCIfghdFE/WCMqHQ_1FII/AAAAAAAACKs/-hJ-5ZntCvgZCFchNf2rasAeNdevPwtMACLcB/s1600/2016-11-06_132825.png. С уважением Тата.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo