Плавающий виджет Подписаться по E-mail

---

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

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

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

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

<style type="text/css"> /*<![CDATA[*/ #w2bfollowSubscribe {background-color: #8E8E8E;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: #464646;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: #000;border-color: #000;} .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="https://feedburner.google.com/fb/a/mailverify?uri=blogspot/tPo&loc=ru_RU" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=https://feedburner.google.com/fb/a/mailverify?uri=blogspot/tPo&loc=ru_RU', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type="text" class="emailInput" name="email" placeholder="Введите свой Email..."/> <input type="hidden" value="http://" name="uri"/> <input type="hidden" name="loc" value="ru_US"/> <input type="submit" value="Подписаться" class="emailSubmit"/> </form> <p class="w2bFollowFooter"> </p> </div> </div>

https://feedburner.google.com/fb/a/mailverify?uri=blogspot/tPo&loc=ru_RU-это мой feedburner адрес, вам надо заменить на свой. Обратите внимание, что изменить необходимо в двух местах кода. При желании можно изменить текст, цвет фона, размер и цвет шрифта. Вот и все, ничего сложного. На сегодня пока все. Всего Вам Доброго.

Рекомендуемый контент: