(Последнее обновление: 03.09.2017)

Всем привет! В этом уроке я покажу вам, как добавить в 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 >window.___gcfg={lang:'en'};undefinedfunctionundefined){var po=document.createElementundefined"script");
po.;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 >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

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