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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Виджеты - blogshear.com

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

Комментарии

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

  • У меня не работает 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. Чтобы не пропустить, подпишись на обновление моего блога.

          • Уже подписан. Спасибо Вам большое!

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

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

  • Станислав, конечно его не видно на главной, нечего ему там делать.

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

  • Nice tutorial, thanks for sharing this, also visit myblog

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку: *