Форма подписки по электронной почте — виджеты для Blogger

Просмотров: 464

Всем привет! В этом уроке я покажу вам, как добавить в Blogger красивые коробки подписки по электронной почте под каждое сообщение, а так же и на боковую панель блога. Виджет подписаться (subscribe) на обновления блога, является одним из важных факторов на существование и развития блога (можно даже так сказать).

Посетители или ваши гости подписавшиеся на рассылку для получения новостей с вашего блога, будут ждать с большим нетерпением весточки от вас. Бесценные читатели не дадут вам расслабиться, тем самым подталкивая вас на постоянное обновление блога. ПисАть, писАть и ещё раз писАть посты. Вот как то так.

subscribe
Виджет подписаться (subscribe) на обновления блога

Дорогие друзья, как всегда вы можете посетить мой демо блог, для просмотра (даже можете подписаться там) предоставленных сегодня элегантных виджетов.

Как установить виджет подписки по электронной почте под каждый пост блога

podpiska
Виджет подписаться

Для того, чтобы установить такой блок подписки под сообщение блога зайдите в панель управления Blogger - Шаблон - Изменить HTML. Находим тег ]]></b:skin> и чуть выше добавляем код стиля виджета:

#emailsub{clear:both;background:#3C3C33;color:#fff;display:block;position:relative;text-align:center;line-height:1.47}#emailsub
h4{font-size:24px;border-bottom:1px solid #746E6E;padding:10px;letter-spacing:2px}#emailsub input[type=&quot;email&quot;],.sl_in_mail{margin-right:-6px;padding:16px
0 16px 40px;width:50%;border:none}#emailsub
form{text-align:center;padding:20px
90px}#emailsub input[type=submit]{border-radius:0;box-shadow:none;padding:18px
24px 16px;letter-spacing:2px;border:none;background:#E06;cursor:pointer;color:#FFF}#emailsub
.counter{margin:0
0 25px}#emailsub.efooter{background:none}#emailsub.efooter
form{text-align:left;padding:0}#emailsub.efooter input[type=&quot;submit&quot;],#emailsub.efooter input[type=&quot;email&quot;],.wg_in_mail{padding:10px;letter-spacing:0px}#emailsub.efooter.sidebar{background:#3C3C33;padding:20px}#emailsub.efooter.sidebar
form{text-align:center}

В этом коде пожалуйста настраивайте - фон, цвет..виджета. Далее, в шаблоне находим такую строчку  <data:post.body/> или такую <div class='post-footer-line post-footer-line-1'> и после одной из этих строчек вставляем код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='emailsub'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ххххх&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=500&apos;);return true' target='popupwindow'><h4>Email Newsletter</h4><div class='counter'><b>У меня 549 подписчиков ! </b> Подпишитесь на обновления блога и <b>получайте извещения о новых статьях на вашу почту!</b></div><input class='sl_in_mail' name='email' placeholder='Введите Email Address' type='email'/><input name='uri' type='hidden' value='ххххх'/><input name='loc' type='hidden' value='ru_RU'/><input type='submit' value='Подписаться!'/><p/><p/><p><small>При регистрации Вы изначально получите электронную почту для подтверждения требующих вашего одобрения для завершения подписки.</small></p></form></div></b:if>

Здесь, как видите можно изменить текст на тот который вам нужен и не забудьте поменять ххххх на ваш фид блога подписки по почте. Я установил в демо блог такую форму и вот что получилось:

vidzhet_podpisat'sja
Подписка по электронной почте

Идем дальше. Следующий блок подписаться с кнопками социальных сетей. Я скрин представлю на английском языке, а код уже на родном великом и могучем:

blok_podpiski
Блок подписаться с кнопками социальных сетей

Вставляем код сразу чуть ниже строчки <data:post.body/> или <div class='post-footer-line post-footer-line-1'>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.tpbtext{
background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/s28/w2b-mail.png)
no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.tpbbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#subscribe-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#subscribe-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#subscribe-outer td{
padding:3px 0;
}
</style>
<div id='subscribe-outer'>
<div id='subscribe'>
<table width='100%'>
<tbody>
<span style='font-style: bold; font-size: 25px; font-family: verdana; color:#060;'>
Понравился пост?
</span>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:bold; margin:0px 0px 5px 0px; '>
Получите бесплатные обновления по электронной почте !</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?
uri=ххххх&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ххххх'/>
<input name='loc' type='hidden' value='ru_RU'/>
<input class='mbttext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your Email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='tpbbutton' title='' type='submit' value='Подписаться!'/>
</form>
</td>
<td><p style='color:#666; font-style:bold; margin:5px 5px 10px 10px; '>Связаться со мной!</p>
<a href='http://plus.google.com/ххххх' rel='nofollow' target='_blank' title='Добавить в круги'><img src='https://dl.dropbox.com/u/110248421/google%2B.png'/></a>
<a href='http://twitter.com/ххххх' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://dl.dropbox.com/u/110248421/twitter-icon.png'/></a>
<a href='http://www.facebook.com/ххххх' rel='nofollow' target='_blank' title='Like us on Facebook'><img src=’https://dl.dropbox.com/u/110248421/facebook-icon.gif’/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>

Здесь Вы тоже можете поменять весь текст на свой и замените ххххх на свои данные. Готово. Перейдем пожалуй теперь к установке виджетов подписки по электронной почте на боковую панель блога. Все представленные блоки ниже, устанавливаются при помощи волшебного гаджета Html/JavaScript.

Виджет подписаться с эффектом при наведении на боковую панель блога

vidzhet_podpisat'sja_emeil
Виджет подписаться с эффектом при наведении

Вот код для установки:

<style>
.subscriptionboc
{
border-style:solid;
border-width:2px;
border-color:#000;
padding:20px;
width:250px;
background:#fff;
transition: box-shadow .777s;
-webkit-transition: box-shadow .777s;
-moz-transition: box-shadow .777s;
-o-transition: box-shadow .777s;
-ms-transition: box-shadow .777s;
}
.subscriptionboc:hover
{
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
.paratraf
{
font-size:20px;
font-family:&#39;georgia&#39;;
text-align:center;
color:#000;
}
.feed-links{display:none;}
.enteremail
{
background: no-repeat scroll 10px center #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
color: #8B8B8B;
padding: 10px 40px;
border-style:solid;
border-width:2px;
border-color:#CACACA;
}
.forspace
{
padding:15px;
}
.button45
{
background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
background:#249334;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
</style>
<div class="subscriptionboc">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=shkolablogger/Kyok', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div class="paratraf">Для обновления блога подписаться</div><p> <div class="forspace">
<center>
<input class="enteremail" type="text" style="width:140px" name="email" value="Введите ваш email..." onfocus="if (this.value == &quot;Введите ваш email...&quot;) {this.value = &quot;&quot;}"/></center></div>
</p>
<input type="hidden" value="shkolablogger/Kyok" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<center>
<input class="button45" type="submit" value="Подписаться!" /></center></form>
</div>

Меняйте shkolablogger/Kyok на свой фид подписки по электронной почте, а так же как обычно текст на свой.

Красивый социальный виджет стиль Mashable все в одном

vidzhet_ Mashable
Виджет стиль Mashable

Виджет показывает лица ваших поклонников страницы блога в Facebook и страницы на Google plus (я вон первый на эскизе, ну красавец). Сколько у вас фолловеров в twitter и так далее. Для такого соцвиджета код для вставки в гаджет Html/JavaScript:

<style type="text/css">
#social-box { background-color:#f6f6f6;
border-bottom:1px solid #ccc; height: 312px;
position:relative; margin-bottom:10px; width:292px; }
#social-box:before,
#social-box:after{ background:#f7f7f7;
border:1px solid #aaa; border-top:none; bottom:-3px; content:"";
height:1px; left:2px; position:absolute; right:2px; }
#social-box:after { bottom:-5px; box-shadow:0 0 2px #aaa; left:4px; right:4px; }
.gpluspage { height: 118px; overflow: hidden; }
.twitterpage { height: 34px; overflow: hidden; }
/***** Softwarevilla Social Share widget CSS ******/
.btnt-social { float: left; margin: 5px 20px 0 0; width: 90px; }
/***** Softwarevilla Inside post Widget CSS *****/
.post-body .btntEmailsub { text-align:center; background: #fbfbfb; padding:
20px 20px 40px; clear: both; display: block; margin: 10px 0; border: 4px solid #eee; }
.post-body .btntEmailsub h5
{ font-style: italic; font-weight: normal; margin-bottom: 10px; text-transform: capitalize; }
.post-body .btntEmailsub p { font-style: italic; text-transform: capitalize; }
</style>
<div id="social-box"> <div class="gpluspage"> <link href="https://plus.google.com/u/0/111471932706805203111/" rel="publisher" />
<script type="text/javascript">window.___gcfg={lang:'en'};undefinedfunctionundefined){var po=document.createElementundefined"script");
po.type="text/javascript";po.async=true;po.src="
https://apis.google.com/js/plusone.js";var s=document.getElementsByTagNameundefined"
script")[0];s.parentNode.insertBeforeundefinedpo,s);})undefined);</script>
<script type="text/javascript">var _gaq=_gaq||[];_gaq.pushundefined['_setAccount',
'UA-29131740-1']);_gaq.pushundefined['_trackPageview']);
undefinedfunctionundefined){var ga=document.createElementundefined'script');ga.type=
'text/javascript';ga.async=true;
ga.src=undefined'https:'==document.location.protocol?
'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagNameundefined'script')[0];s.parentNode.insertBeforeundefinedga,s);})undefined);</script>
<g:plus href="https://plus.google.com/u/0/111471932706805203111/" width="300"
height="131" margin="0px" theme="light"></g:plus></div>
<div class="twitterpage">
<iframe allowtransparency="true" frameborder="0 " scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?
screen_name=ХХХХХ" style="background: #f6f6f6;
border-color: #CCCCCC; border-style: solid; border-width: 0 1px; height: 20px;
padding: 7px; width: 276px;"></iframe></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/ХХХХХ&amp;
width=292&amp; height=200&amp;show_faces=true&amp;stream=false&amp;
header=false&amp;" style="border:none; overflow:hidden; width:292px;
height: 160px;"></iframe> </div>

Что нам здесь менять, это - ххххх на ваш профиль twitter и страницы на Facebook; 111471932706805203111 - числовой id страницы на Google plus. Вроде всё здесь. Да, еще можете менять размеры и цвет.

И в заключении, я приготовил для вас отличный виджет подписки, как в WordPress. Мне самому нравится очень. Просто супер. Куда нибудь надо его установить.

Стильный виджет подписаться как в WordPress на боковую панель Blogger

vidzhet_ wordpress
Стильный виджет подписаться как в WordPress

Для такого блока подписки код:

<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=shkolablogger/Kyok', '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="shkolablogger/Kyok" /><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>

Здесь надо только поменять два раза shkolablogger/Kyok на вашу подписку фида. Если хотите меняйте текст на свой. Готово. Не забывайте подписываться на обновление моего блога, можно здесь ниже или испытайте виджеты в демо блоге. Удачи всем. До новых встреч.

Виджеты - blogshear.com

С уважением, Сергей


16 комментариев к “Форма подписки по электронной почте — виджеты для Blogger”

  1. Спасибо Вам за информацию. Воспользовался блоком подписки после каждой статьи с социальными кнопками. Однако у меня возникла проблема: текст на кнопке «подписаться» становиться белым и сливается с фоном.
    Как это можно исправить, возможно вы знаете?
    Заранее спасибо.

    Ответить
  2. У меня не работает Email Newsletter виджет подписки по электронной почте под каждый пост блога (тот, что у Вас первый в посте)
    Все делаю по инструкции.

    Ответить
    • Привет, Станислав! Не работает в каком смысле? Не отображается виджет или не работает подписка? 🙂

      Ответить
          • После какой строчки вставлял, таких может быть три-<data:post.body/> надо после второй или третьей. Если не получается тогда ищи — <div class=’post-footer-line post-footer-line-2′> или <div class=’post-footer-line post-footer-line-3′>

          • Размещал уже везде, где только можно. Также пробовал удалять виджет FeedBurner-овский — тоже не помогло…
            Может причина в уже имеющихся дополнениях и виджетах? Может быть количественное ограничение на самом блоге?

          • Нет, ограничений на установку виджетов в блог нету. Ладно пока брось это занятие, я постараюсь сегодня представить новые, очень красивые формы подписки по email. Чтобы не пропустить, подпишись на обновление моего блога.

          • Станислав, готово.Забирай, думаю понравится. 🙂

          • У этого виджета «под каждый пост блога» — имеется ввиду ТОЛЬКО при просмотре конкретного поста на блоге. Т.е. на главной его (виджет) не видно.

  3. а как сделать кнопку RSS, но рассылку получать по почте (сама кнопка уже есть, интересует именно как заставить её работать)? пробовала сделать по одному примеру, но ничего не работает (
    активировала через feedburner

    Ответить

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