Виджет подписаться по Email (Subscribe) для Blogger

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

podpisat'sja-po-EmailДоброго времени суток, дамы и господа! Я уже показывал вам, как разместить форму подписки по email после каждого сообщения и на боковую панель в вашем блоге. Вспомнили? Так вот, время не стоит на месте, благодаря разработкам зарубежных умельцев, появляются новые, более функциональные виджеты подписки по электронной почте для платформы Blogger. С вашего разрешения, сегодня я познакомлю вас с новинками, которые отыскал на просторах буржунета. Спасибо им, за то, что у меня появляются темы для новых сообщений. Давайте начнем.

Красивый Blogger виджет подписаться по Email

Этот блок подписки можно установить, как на боковую панель блога (смотреться будет лучше, если ширина  сайдбара 300), так и после каждого сообщения.

На боковой( здесь, ширина 260) будет выглядеть так:

Subscribe-po-Email
Виджет подписаться по Email

После статьи:

Subscribe-Email
Виджет подписаться по Email после поста

Кто предпочитает минимализм,тогда эта форма для вас. Установка стандартная. Все стили устанавливаем чуть выше строки ]]></b:skin> в вашем шаблоне. Код HTML устанавливаем, если в сайдбар блога тогда при помощи волшебного гаджета " HTML/JavaScript ", а если после статьи тогда после одной из этих строчек:

<data:post.body/> таких бывает три, вставлять после второй или третьей

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>

И так, стиль для установки такой:

/*****************************************
Name : Subscribe Box Bubble blue
******************************************/
.BD-sub{
border:1px;
solid #1A2638;
border-radius:10px;
margin-bottom:0px;
padding:10px;
text-align:center;
}
.BD-sub input{
border-radius:10px 10px 10px 10px;
font-size:14px;
padding:10px;
text-shadow:1px 1px 0 #FFF;
width:190px;
color:#0000CC;
font-family:georgia;
margin-bottom:5px;
border: 1px solid rgb(9, 149, 223);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(192, 191, 191);
border-color: #0066FF;
background:-moz-linear-gradient(top, #D6FCFE, #fff);
background:-moz-linear-gradient(top, #D6FCFE, #fff);
}
.BD-sub .kirim{
border: 2px solid rgb(9, 149, 223);
border-radius:5px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#000000;
cursor:pointer;
font-family:verdana;
font-size:12px;
padding:0px;
text-transform:uppercase;
width:auto;
height:36px;
border-color: #006A9D;
background: -o-linear-gradient(top, #00FFFF, #00A4A4);
text-shadow: none;
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
background:-moz-linear-gradient(top, #00FFFF, #0076AE);
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
}
.BD-sub .kirim:hover{
color: #666666;
box-shadow:0 0 4px 2px #666 inset;
border-color: #333333;
background-color: #00CCCC;
}
.bdbal-sub {
position:relative;
padding:10px;
margin:-10px 5px 5px 5px;
color:#000000;
border-radius:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: solid #999999 1px;
background-color: #00FFFF;
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
background:-moz-linear-gradient(top, #00FFFF, #0076AE);
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
box-shadow: 2px 2px 2px 2px #bbb;
}
.bdbal-sub:after {
content:"";
display:block;
position:absolute;
top:-30px;
left:50px;
width:0;
height:0;
border:15px solid transparent;
border-bottom-color:#00FFFF;
}

Друзья, после установки этого виджета цвет может отличаться от скриншота, все настройки цвета производятся в коде выше.

HTML код виджета:

<!--Subscribe box start -->
<div style="width:300px; border:dashed #0000CC 2px; padding:5px; background-color:#FFFFFF; ">
<div class='BD-sub'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=ВАШ ID ФИДА &#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=600,height=550&#39;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == "") {this.value = "Введите Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' type='text' value='Enter Your Email Address...'/>
<input name="kirim" type='submit' class='kirim' value='Subcribe'/>
<input name='uri' type='hidden' value='ВАШ ID ФИДА'/>
<input name='loc' type='hidden' value='ru_RU'/>
</form></div>
<div class="bdbal-sub" >
<em>Бесплатная подписка на новые статьи по электронной почте!</em><br/>
Введите свою почту, чтобы получать последние обновления из этого блога ..
</div></div>
<!--Subscribe box End -->

Вставьте ваш фид блога, напишите подходящий текст, измените ширину 300 на подходящий вам размер. Переходим к следующему блоку.

Социальный виджет подписаться по Email с анимацией

Блин, мне самому нравится это чудо, очень красиво смотрится:

Subscribe-now
Социальный виджет подписаться по Email с анимацией

Как видите здесь, не только можно подписаться по почте и rss (волны анимированные), но и присоединиться к вам в социальных сетях. Для этого виджета я объединил стиль и HTML код вместе. заключив CSS в теги <style> стиль </style>, для того, чтобы облегчить вам его установку. Виджет устанавливается на боковую панель блога.

Вот этот код для установки на ваш блог:

<style>
/*****************************************
Name : Subscribe ANIMASI
******************************************/
#RS_box{ background:#fff url(http://1.bp.blogspot.com/-Sy_IDTsnZ3A/UYvZdKll2pI/AAAAAAAABG0/vP0hCkpa6OQ/s1600/bg-red-1.png) repeat-x;
width:280px;
border:1px solid rgb(9, 149, 223);
border-radius:3px;
padding:3px 0;
border: 1px solid rgb(9, 149, 223);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(192, 191, 191);
border-color: #A21009;

}
.RS_blog{
color:#111;
font-size:14px;
line-height:20px;
padding:1px 20px 10px;
text-align:center;
text-transform:uppercase;
}
.email_box{-moz-border-radius:4px;-webkit-border-radius:4px;
background:#fff url(http://4.bp.blogspot.com/-kQkS7LruRB0/UYvZdgZx_7I/AAAAAAAABG4/OXbm8bTUfrg/s1600/bg-red-2.png) repeat-x;
border:1px solid #990000;
border-radius:4px;
color:#333333;
margin:0 0 5px;
padding:10px 1px;
width:90%;
}
.buttonrs_email{
background:#09f;
border: 2px solid rgb(9, 149, 223);
border-radius: 3px 3px 3px 3px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#fff;
cursor:pointer;
font-family:verdana;
font-weight:700;
padding:10px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:100%;
background-color: #940A0A;
border-color: #FF0000;
}
.buttonrs_email:hover,.buttonrs_email:focus{
background-color: #CC0000;
color: #000000;
}
a.RS-image{margin-right: 1px;height:45px;width:45px; border: 2px solid rgb(209, 22, 22);
border-radius: 3px 3px 3px 3px;
box-shadow: 2px 4px 4px rgb(113, 112, 112); }
a.RS-image:hover { opacity: .3; }
.RS_form{clear:both;display:block;margin:10px 0}
.buttonrs_email:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px; background-color:#3E0600;}
</style>
<!--Subscribe box start -->
<div id="RS_box">
<div class="RS_blog"><br/>
<a href="https://www.facebook.com/zagulyaevsv" target="_blank" class="RS-image" title="Add facebook"><img src="http://4.bp.blogspot.com/-E91PS1bAsZw/UYvYd9vZsGI/AAAAAAAABFc/AI4TkWQXgd8/s1600/FB-1.png" /></a>
<a href="https://twitter.com/zagulyaevsv" target="_blank" class="RS-image" title="Follow twitter"><img src="http://3.bp.blogspot.com/-qxb6-Q0TNw8/UYvYlGs4W9I/AAAAAAAABGI/xyiD1yhDfxY/s1600/T-1.png" /></a>
<a href="https://plus.google.com/ID GOOGLE PLUS" target="_blank" class="RS-image" title="Invite google plouse"><img src="http://4.bp.blogspot.com/-LJXvGstrucY/UYvYeUNXT8I/AAAAAAAABFg/r7HPBE22y5U/s1600/G-1.png" /></a>
<a href="https://www.youtube.com/ПРОФИЛЬ ЮТУБЕ" target="_blank" class="RS-image" title="Se you tube"><img src="http://4.bp.blogspot.com/-9EwbelK6J2w/UYvYn4dxH3I/AAAAAAAABGc/NQS4GvLn1fc/s1600/Y-2.png" /></a><div style="margin:-55px 2px 0px -20px; float:left; "> <a href="http://feeds.feedburner.com/ID FEED " target="_blank"><img src="http://1.bp.blogspot.com/-aWvsxrYG6WY/UYvYkEJxe2I/AAAAAAAABGE/UcHozBbUxxY/s1600/RSS2.gif" title="RSS" width="180" height="180" border="0" style="margin-top:-20px;"/></a></div>
<p style="float:right; margin:-90px -10px -20px 2px; font-family:Geneva, Arial, Helvetica, sans-serif; color:#000000; text-transform:none; text-align: right; z-index: inherit;" >
Подписаться по электронной почте<br/>
получить последние статьи из<br/>
<b>[&nbsp;&nbsp; <a href="http://shkolablogger.ru/" title="Школа Bloggera" target="_blank">Школа Bloggera</a> &nbsp;&nbsp;]</b> <br/>
Бесплатно только для вас !!
</p>
<div class="RS_form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER" class="RS_form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=550');return true" target="popupwindow"><input name="uri" type="hidden" value="ID FEEDBURNER" />
<input name="loc" type="hidden" value="ru_RU" /><input class="email_box" name="email" placeholder=" Ваш электронный адрес !"/>
<input class="buttonrs_email" title="" type="submit" value="++ Subscribe Now ++ " /></form></div></div></div>
<!--Subscribe box End -->

В этом коде подставьте свои данные на соцсети,  id фида, ссылку блога моего, замените на свой URL, напишите свой текст и так далее. Поехали дальше.

Blogger виджет всё в одном

Я даже не знаю, как этот виджет назвать. Назову его - многофункциональным гаджетом с кодом HTML 5 и CSS 3. В этом блоке в дополнение к подписи по почте присутствует: место под рекламу 120 х 120 (использовать можно не обязательно под объявление); социальные кнопки Like Facebook, Google plus, Follow Twitter - "Присоединиться",  а так же присутствует в форме, название читаемой статьи (SEO ссылка). Вот он супер красивый виджет:

Subscribe-Vidzhet-Email-socseti
Многофункциональный виджет подписки HTML 5 и CSS 3

Этот виджет можно увидеть воочию тут. Фон у меня получился серенький, но у вас должен быть белый.

Стиль для данного виджета:

/*****************************************
Name :Widget Email subscribe with Advertise
******************************************/
#bdrs-subscribe {
width:590px; /* LEBAR WIDGET */
min-height:60px;
border-radius: 5px;
box-shadow: 0px 0px 5px #BBB;
background: none repeat scroll 0 0 transparent;
border: 1px solid #c4c4c4;
padding: 8px;
margin:10px 0;
}
#bdrs-subscribe td{
padding:3px 0;
}
ul.vay-social {
margin:0px 0 5px -20px;
display:inline-block;
list-style-type: disc;
margin-top: -20px;
}
ul.vay-social li { display:inline; float:left; }
ul.vay-social li a { display:block; height:48px; margin-right:10px; position:relative; text-decoration:none; }
#bdrs-subscribe #vay-skin:hover li { opacity:0.1; }
#bdrs-subscribe #vay-skin li:hover { opacity:1; }
#bdrs-subscribe #vay-skin li:hover a strong { opacity:1; top:-5px; }
#bdrs-subscribe .bdrs-sub{
width:270px;
padding:10px 0 0 15px;
float:left;
font-family: &quot;Trebuchet MS&quot;,sans-serif;
font-size:1.2em;
font-weight:bold;
margin:0 0 0px 0;
color:#111;
}
#bdrs-subscribe .bdrs-form {
padding:7px 15px 7px 5px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
border-radius: 4px;
box-shadow: 0 0 2px #CCC inset;
background-color: #E6FFFF;
}
#bdrs-subscribe .bdrs-submit {
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #c4c4c4;
cursor: pointer;
border-radius: 4px;
background-color: #00FFFF;
}/* CSS code End */

Код HTML  для установки под сообщение в вашем блоге:

<!--SUBSCRIBE start -->
<div id='bdrs-subscribe'>
<table width='100%' >
<tbody>
<tr>
<td height='100' style="float:left; margin-top:1px" width='340'>
<p style='color:#111; font-size: 11px;font-family: &quot;Trebuchet MS&quot;,sans-serif; margin:0px 0px 5px 0px; '>
Judul :<span style="color:#990000"> <a expr:href='data:post.url'>
<data:post.title/>
</a> </span> </p>
<div class='bdrs-sub'>
Подписаться на новые статьи:
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=shkolablogger/Kyok &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='shkolablogger/Kyok'/>
<input name='loc' type='hidden' value='ru_RU'/>
<input class='bdrs-form' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Введите адрес email…&quot;;}' onfocus='if (this.value == &quot;Введите адрес email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='bdrs-submit' title='' type='submit' value='Получать!'/>
</form>
</div> </td>
<td ><img alt="advertiser" src="http://3.bp.blogspot.com/-HYzvNk4gQ_0/Ui_5oWo0HNI/AAAAAAAABw0/gKvoslV3Od4/s1600/advertiser.gif" title="advertiser"/></td>
<td><img alt="advertiser" src="http://3.bp.blogspot.com/-HYzvNk4gQ_0/Ui_5oWo0HNI/AAAAAAAABw0/gKvoslV3Od4/s1600/advertiser.gif" title="advertiser"/></td>
</tr>
</tbody>
</table>
<div align='left'>
<ul class="vay-social" id="vay-skin">
<li>
<a href="https://www.facebook.com/zagulyaevsv" target="_blank" ><img alt='facebook' src="http://3.bp.blogspot.com/-yRUxDt11GnE/UjCkLgaEmdI/AAAAAAAABxU/-3VeWp6a8o4/s1600/fbk.png" width="100" height="28" title='Like Facebook'/></a>
</li>
<li>
<a href="https://plus.google.com/u/0/b/111471932706805203111/+DljabloggerRu" rel="nofollow" target="_blank" ><img alt='gplus' src="http://3.bp.blogspot.com/-ByzOfPrQLpc/UjCkKGJGF8I/AAAAAAAABxE/6kcQFFfdFMc/s1600/GP.png" width="100" height="28" title='invite google plus'/></a>
</li>
<li>
<a href="https://twitter.com/zagulyaevsv" rel="nofollow" target="_blank" ><img alt='twitter' src="http://4.bp.blogspot.com/-xq_h8wkL0jM/UjCkLPHhREI/AAAAAAAABxM/q-eSJoZmE_I/s1600/twk.png" width="100" height="28" title='Follow twitter'/></a>
</li></ul> <div style=" margin-top:-25px;">Спасибо за ваш визит!Получайте актуальные статьи о Blogger, заработку на сайте или в Интернете прямо на электронную почту.</div>
</div>
</div>
<!-- SUBSCRIBE end -->

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

Многофункциональный виджет для Blogger

В блок входит: форма подписки; социальные кнопки и даже не поверите, похожие сообщения. Вот так то. Выглядеть виджет будет так, скрин будет буржуйский, так как у меня уже не куда его устанавливать:

related-post-blogspot
Много функциональный виджет для Blogger

Стиль виджета:

/*****************************************
Name : widget Related post with subscribe
******************************************/
#BDRS-widget {
width:580px;//lebar widget
padding:3px;
border: solid #999 1px;
background-color: #FFFFFF;
height: 200px;// tinggi widget
border-radius:5px;
box-shadow: 0 1px 4px #000;
}
#BDRS-widget .left {
width:56%;
padding:3px;
float: left;
}
#BDRS-widget .right {
width:40%;
padding:5px;
background-color: #CCCCCC;
float: right;
}
.BDRS-box{
border:1px;
solid #1A2638;
border-radius:10px;
padding:10px;
text-align:center;
background-color: #FFFFFF;
height: 171px;
}
.BDRS-box h2{
margin-top:5px;
color:#FF0000;
font-family:georgia;
font-size:18px;
margin-bottom:5px;
padding:0;
text-shadow:0px 1px 1px #000;
line-height:35px;
font-weight: bold;
}
.BDRS-box .input1{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:180px; color:#990000; font-family:georgia; margin-bottom:5px;border: 1px solid rgb(9, 149, 223);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(192, 191, 191);
border-color: #A21009;}
.BDRS-box .BDsubmit{background:#09f;
border: 2px solid rgb(9, 149, 223);
border-radius: border-radius:10px 10px 10px 10px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#fff;
cursor:pointer;
font-family:verdana;
font-size:12px;
padding:0px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:100px;
height:36px;
background-color: #990000;
border-color: #FF0000;
}
.BDRS-box .BDsubmit:hover{background-color: #DD0000;
color: #000000;
border-color: #550000;}
.BDRS-box .submit:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px; background-color:#5B0A00;} #related-posts { float : left; width:100%; margin-left : 5px; font : 11px Verdana; margin-bottom:2px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 {
font-size : 14px;
font-weight: bold;
margin : 5px 7px 0;
padding : 0 0 5px;
font-family: Geneva;
font-style: italic;
border-bottom:dashed #990000 1px;
} #related-posts a {
text-decoration : none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000099;
} #related-posts a:hover {
text-decoration : none;
color: #990000;
} #related-posts ul { border : medium none; padding : 0; }
#related-posts ul li {
display : block;
background : url(&quot;&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 0px;
margin-bottom : 0px;
}
#related-posts ul li{
background:transparent url(http://1.bp.blogspot.com/-LZRTi6LiSXc/UfOaqASxwSI/AAAAAAAABlU/TcibyuwSwJo/s1600/ico-rss.jpg) no-repeat;
display:block;
list-style-type:none;
margin-bottom: 5px;
padding-left: 20px;
padding-top:0px;
}
#related-posts ul li a {block;color: #222}
#related-posts ul li a:hover {block;
color: #990000;
}
.BD-sosial a {
background-color:#99FF00;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 13px;
color: #6C0000;
font-weight: bold;
text-decoration: none;
padding:3px 10px;
margin-right:2px;
border: solid #999900 1px;
margin-bottom:2px;
text-shadow: 0px 1px 0px #111;
border-radius:3px;
}
.BD-sosial a:hover {
background-color:#E6FFBF;
color: #333333;
text-shadow: 0px 1px 0px #111;
border: solid #666 1px;
box-shadow:0 0 2px #666;
}/*** Blog Design CSS and ***/

Код для вставки после сообщения:

<!--BDRS start for widget -->
<div id='BDRS-widget'>
<div class='left'>
<div id='related-posts'>
<h2><b>Статьи по теме:</b>
</h2><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var relatedTitles=new Array();var relatedTitlesNum=0;
var relatedUrls=new Array();function related_results_labels(json)
{for(var i=0;i<json.feed.entry.length;i++)
{var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=
entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==&#39;alternate&#39;)
{relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);
for(var i=0;i<relatedUrls.length;i++){if
(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length- 1]=
relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length- 1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;}
function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length- 1)*
Math.random());var i=0;document.write(&#39;<ul>&#39;);
while(i<relatedTitles.length&amp;&amp;i<20)
{document.write(&#39;<li><a href=&quot;&#39;+ relatedUrls[r]+&#39;&quot;>&#39;+
relatedTitles[r]+&#39;</a></li>&#39;);if(r<relatedTitles.length- 1){r++;}else{r=0;}
i++;}
document.write(&#39;</ul>&#39;);document.write();}
</script>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp; max-results=5&quot;' type='text/javascript'/>
</b:if></b:loop></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
<div class="BD-sosial" style="margin-bottom:10px;">
<a href="LINK GPLUS " target="_blank" title="gplus">Gplus</a>
<a href="LINK FACEBOOK " target="_blank" title="facebook">Facebook</a>
<a href="LINK TWITTER " target="_blank" title="twitter">Twitter</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=ID BLOGGER " target="_blank" title="follow">Blogger</a>
</div></div>
<div class='right'>
<div class='BDRS-box'><h2> подписка на статьи по электронной почте </h2>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=ID Feedburner&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=600,height=550&#39;);return true' target='popupwindow'>
<input class='input1' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Введите Email Address...&quot;;}' onfocus='if (this.value == &quot;Введите Email Address...&quot;) {this.value = &quot;&quot;}' type='text' value='Введите Email Address...'/>
<input class='BDsubmit' name='submit' type='submit' value='Получать!'/>
<input name='uri' type='hidden' value='ID Feedburner '/>
<input name='loc' type='hidden' value='ru_RU'/>
</form></div></div></div><div style='clear: both;'/>
<!--BDRS clear for widget -->

Все так же, ссылки на профили соцсетей, текст свой и так далее. На этом у меня все. Конечно есть ещё запасы, но это в следующий раз. Чтобы не пропустить новые статьи прошу подписаться на мой блог. До встречи. Пока, пока.

Виджеты одолжил у индонезийского автора - rivai-silaban, дай ему господь здоровья и побольше создать хороших и разных виджетов для нас, российских пользователей.

Всего доброго, Сергей


13 комментариев к “Виджет подписаться по Email (Subscribe) для Blogger”

  1. Ну Сергей у меня глаза разбегаются. И думаю придётся отступить от моих принципов минимализма.
    многофункциональный гаджет с кодом HTML 5 и CSS 3. Суппер. Пошла играться. А с анимацией вообще что-то. Благодарна Вам. Спасибо.

    Ответить
    • Виктория, как приятно читать такие комментарии. Значит я не зря мучился с их проверкой на работоспособность и так далее. Надо здесь на блоге установить виджет топ комментаторов, Вы у меня точно войдете в top, пусть все видят какие у меня замечательные читатели. 🙂

      Ответить
  2. Сергей. Ну вы меня прямо в краску ввели.
    с кодом многофункционального гаджета немного повозилась. Но в нём поменяла теги на и т.д. а то по вертикали разместились соцсети.. А так всё получилось . Сейчас попробую анимашку. Ох и люблю я это всё.

    Ответить
    • Привет, Виктория! Если иконки друг над другом оказались, наверное надо ширину виджета поменять, в большую сторону. Да, анимашка класс.:)

      Ответить
  3. Сергей, спасибо. поставила себе анимашку. Немного подправила под себя. Работает. И ещё, почему-то, когда я отправляю комментарий Вам и нажимаю уведомлять у меня абракадабра вылазит. А без этой галочки нормально.

    Ответить
  4. Здравствуйте Сергей, последний код подписки, в нем не хватает в конце и без него даже не сохраняет, в стиле он уехал у меня в левый нижний угол экрана ), отказался, думаю, вот как бы на фиббернер примастырить нужную оболочку.

    Ответить
    • Надо проверить, попробую его куда нибудь установить, хотя места уже нет. Опять придется демоблог создавать.

      Ответить

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