Гаджет "Follow by Email" или "Рассылка обновлений по электронной почте"

В наборе стандатартных блоггеровских гаджетов есть один любопытный виджет/гаджет в полурусифицированном состоянии под названием "Follow by Email" или "Рассылка обновлений по электронной почте".
Его функция такая же, как и у той формы, которая предлагается для установки в блог сервисом FeedBurner, только код сократили и изменили внешний вид.
Кстати, гаджет добавляется в блог всего один раз, и если у вас до этого не была создана лента в FeedBurner'е, он создаст новую.

создание гажета в админке Blogger

Настройка гаджета из админки Blogger

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

Техническое описание ↓
В шаблоне Blogger (если не ставить галку "Рсаширить шаблоны виджетов) этот виджет почтовой подписки выглядит вот так:

<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'/>

А полностью, то есть в развёрнутом виде, так:

<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'>
<b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
  <div class='widget-content'>
    <div class='follow-by-email-inner'>
      <form action='http://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
        <table width='100%'>
          <tr>
            <td>
              <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
            </td>
            <td width='64px'>
              <input class='follow-by-email-submit' type='submit' value='Submit'/>
            </td>
          </tr>
        </table>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
    </div>
  </div>
  <span class='item-control blog-admin'>
    <b:include name='quickedit'/>
  </span>
</b:includable>
</b:widget>

А после установки в блоге выглядит довольно "не по-нашему":

Форма подписки по умолчанию

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

Настройка гаджета ↓
Если взяглянуть на второй код (см. выше), то там мы видим возможность исправить некоторые погрешности перевода:

• placeholder='Email address... - в этом месте можно заменить надпись для ввода своего мыла
• value='Submit' - надпись на кнопки подтверждения
• title='Follow by Email' - заголовок виджета (изменяется в настройках виджета из админки тоже)
• value='en_US' - нужно изменить на value='ru_RU' (чтобы "Запрос на подписку по электронной почте" был на русском языке)

И ещё один недостаток данного гаджета - нельзя настроить внешний вид, нет такой функции в настройках. Но на помощь приходит CSS.
Попробуйте добавить в шаблон перед тегом ]]></b:template-skin> или ]]></b:skin> (в разных шаблонах по-разному) набор следующих стилей:

/* Follow by Mail */
.FollowByEmail .follow-by-email-inner .follow-by-email-address {
color:#4DA6FE !important; 
width:100%;
height:22px;
font-size:13px;
border:1px inset
}

.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
width:60px;
margin:0;
border:0;
border-radius: 4px !important;
-moz-border-radius: 4px !important;
background:#4DA6FE !important;
background:rgba(0,0,0,.6);
color:#fff;
font-size:13px;
height:24px;
z-index:0
}

.follow-by-email-inner .follow-by-email-submit:hover {
background:#FF7700!important;
}

Где:

• Первый блок .FollowByEmail .follow-by-email-inner .follow-by-email-address регулирует оформление поля ввода адреса email
• Второй блок .FollowByEmail .follow-by-email-inner .follow-by-email-submit заведует кнопкой "отправить"
• Третий блок .follow-by-email-inner .follow-by-email-submit:hover изменяет цвет кнопки при наведении на него курсора мыши

Цвета html можете взять в моём калибровщике, а генератор CSS кода находится здесь.

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

Изменённая вручную форма подписки

По мотивам этой статьи.