Всплывающая форма подписки в Blogger.

 форма потпискиЗдравствуйте, друзья, читатели и гости блога. Сегодня у меня для вас компактная, всплывающая форма подписки для блога. Уж столько вариантов формы подписки было предложено. Посмотреть их можно здесь или здесь. Эта же, не занимает много места на блоге, устанавливается через гаджет HTML и всегда видна посетителям.

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

Скопируйте код, приведённый ниже, в блокнот и разберём некоторые настройки.

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
/*<![CDATA[*/
#w2bfollowSubscribe {background-color:#A78383 ;width: 220px;color:#fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
.followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
.w2bfollowButton {background:#A30A0A ;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
.w2bfollowButton span {background: url("http://4.bp.blogspot.com/-cojt7gQfz4Q/TztYuq2TltI/AAAAAAAABcE/OTwMxjnwak8/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.w2bfollowButton:hover,.followActive {color: #fff !important;}
.w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
.followactive {background-color: #333;}
.w2bfollowForm {padding: 15px;}
.w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.w2bfollowForm p {margin: 0 0 10px;}
.w2bfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
.w2bfollowForm form {text-align: center;}
.w2bfollowForm .emailInput:focus {color:#A30A0A;border-color:#A30A0A;}
.w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
.emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
.emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
.w2bFollowFooter {text-align: center;font: normal 11px "Verdana", verdana;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
.w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
.w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="w2bfollowSubscribe" style="display:none;">
<div class="w2bfollowForm">
<a class="w2bfollowButton" href="#" title=" подписка"><span><b>Подписаться</b></span></a>
<center><h3><b>Подписывайтесь на обновления блога</b></h3>
<p>Получайте новые статьи прямо на почту! </p></center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Введите Ваш Email..."/>
<input type="hidden" value="shpargalochkiru " name="uri"/>
<input type="hidden" name="loc" value="ru_US"/>
<input type="submit" value="Подписаться" class="emailSubmit"/>
</form>
<p class="w2bFollowFooter">
</p>
</div>
</div>

Синим цветом в начале кода я выделила скрипт jQuery. Кто пока не знает что это и как с ней быть, почитайте эту статью.
То, что отмечено красным цветом это ваш адрес feedburner. Посмотрите, что именно нам нужно.
форма связи
Всё, что выделено зелёным цветом смело меняйте на свои варианты. Ну и основные цвета самой кнопки подписаться и цвет всплывающей формы, я в коде выделила формы жёлтым. Поиграйтесь и подберите подходящие под дизайн блога. Генератор цвета есть здесь. И как я уже говорила выше, идём во вкладку дизайн-добавить гаджет-HTML/JavaScript. Туда и вставляем подготовленный код. Установите в любое место блога. Лучше где-нибудь внизу.

И сегодня всё. Спасибо, что заглядываете ко мне. Удачи всем. Увидимся.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


6 комментариев:

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

    ОтветитьУдалить
    Ответы
    1. Мне такая тоже нравиться. Такая ненавязчивая и функциональная.

      Удалить
  2. Можно попробовать, интересно. Спасибо, Вика.

    ОтветитьУдалить
    Ответы
    1. Пожалуйста. Мне такой вариант нравится тем, что и глазу заметен и компактный.

      Удалить
    2. Вика, у меня справа стрелка наверх, этак кнопка её закрывает. Я сделала слева, цвета поменяла, но так некрасиво. А можно сбоку сделать? Вместо left что написать или как?

      Удалить
    3. Поменяй значения right: 10px на left. Возможно придётся поиграться с цифрами в коде.

      Удалить

Пользовательский поиск