Получите красивый виджет всплывающие оконо для подписки по электронной почте без каких-либо затрат. Это действительно профессионально выглядящий виджет подписки на электронную почту для повышения активности пользователей. У вас может быть много всплывающих виджетов, но этот наверняка поразит вас. Я доработал этот высокопрофессионально выглядящий всплывающий виджет подписки на электронную почту для блогеров с чистым HTML, CSS и JavaScript (jquery). По этой причине вы найдете этот виджет более гибким и удобным для посетителя.
Кроме того, этот всплывающий виджет подписки по электронной почте имеет чистый и привлекательный вид, чтобы привлечь больше посетителей. В результате, он привращает больше читателей / посетителей в подписчиков. На самом деле, если у вас есть базовые знания в области кодирования, вы можете редактировать этот виджет для продвижения любого другого продукта. Но если вы этого не хотите делать, то можете использовать его совершенно бесплатно для значительного увеличения подписчика вашего блога. По сути, я доработал этот всплывающий виджет подписки на электронную почту для Blogger для работы с Feedburner.
Я предоставлю полную инструкцию по настройке здесь. Таким образом, вы сможете добавить это в свой блог в течение нескольких кликов. Наконец, я рекомендую вам настроить службу управления лентами Feedburner для достижения оптимального результата, потому что виджет оптимизирован для него и позволяет вашим подписчикам использовать все его возможности. Теперь давайте посмотрим, как добавить этот всплывающий виджет подписки на электронную почту, но перед этим мы должны знать, зачем его использовать.
Зачем использовать всплывающий виджет подписки электронной почты для блогера?
- Это может быть идеальным решением для увеличения читателей блога и подписчиков.
- Он будет уведомлять каждого подписчика автоматически после публикации нового сообщения.
- Это увеличит общее количество возвращающихся посетителей и снизит показатель отказов.
- Это может увеличить на 700% больше подписчиков электронной почты блога.
- Простой почтовый маркетинг и решение для создания списков бесплатно.
Особенности этого всплывающего виджета электронной подписки
Нет сомнений в важности наличия всплывающего виджета подписки на электронную почту. Теперь давайте посмотрим на некоторые привлекательные особенности этого.
1. Для улучшения работы с читателями мы не должны беспокоить их, показывая всплывающие окна снова и снова (при каждом нажатии или перезагрузке страницы). Вот почему этот виджет будет использовать технику jQuery cookie для показа всплывающего окна один раз в 7 дней, если он нажмет кнопку закрытия.
2. Он имеет привлекательный и очень профессиональный вид, чтобы привлечь больше посетителей, чтобы стать подписчиком.
3. Красивый эффект JQuery Fade in и Fade out обеспечит плавность использования всплывающего виджета.
4. Всплывающее окно появится в центре экрана, и вы можете легко увеличить или уменьшить размер всплывающего окна.
Подготовьте шаблон для всплывающего виджета подписки по электронной почте
Всплывающий виджет подписки на электронную почту предназначен для работы с Feedburner. Так что у вас не возникнет никаких проблем, если вы правильно настроите свой шаблон и Feedburner. Внимательно следуйте инструкциям, чтобы ваш шаблон правильно подготовлен для использования этого всплывающего виджета подписки на электронную почту. В основном нам нужно проверить три вещи:
1. Включение « jQuery » в нашем шаблоне, если это еще не сделано.
2. Импорт значков « Font Awesome »
3. Импорт бесплатного шрифта Google « Oswald ».
Примечание. Если вы используете шаблон Blogger по умолчанию, вам, возможно, придется добавить все эти три сценария, но если вы используете какие-либо настраиваемые шаблоны блоггера, возможно, уже включен jQuery. В этом случае вам не нужно импортировать данный скрипт jQuery.
Тем не менее, я предполагаю, что вы используете шаблон по умолчанию, поэтому давайте импортируем эти сценарии.
Войдите в свою учетную запись блогера> Перейдите в раздел « Тема »> Нажмите « Изменить HTML» > Найдите конечный тег « </head> ».
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js»></script>
<link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»/>
<link href=»https://fonts.googleapis.com/css?family=Oswald» rel=»stylesheet»/>
Теперь скопируйте приведенные выше (кодовые) скрипты и таблицы стилей, чтобы вставить их непосредственно перед конечным тегом « </head> », как я показал ниже:
Теперь нажмите кнопку « Сохранить тему ». Итак, вы включили в свой шаблон код для виджета подписки всплывающего окна электронной почты.
Добавить всплывающий виджет подписки по электронной почте для Blogger
Добавить всплывающий виджет подписки по электронной почте для Blogger очень просто. Просто вы должны скопировать и вставить код виджета подписки всплывающего окна электронной почты, который я дал ниже.
1. В HTML-редакторе Blogger прокрутите до конца и найдите закрывающий тег « </body> »
<style>
#to-popup-form,#to-popupbody{display:none;position:fixed;z-index:999}#tech-ornate-subscribe input.submit,.s-box-container .s-box h3.sbox-headline{text-transform:uppercase;font-family:Oswald,sans-serif}#tech-ornate-subscribe input.submit,#to-popupbody .pbLink,.s-box-container .s-box h3.sbox-headline,div.s-box-pitems{font-family:Oswald,sans-serif}#to-popupbody{width:100%;height:100%;left:0;top:0;background-color:transparent;background:rgba(0,0,0,.5)}#to-popup-form{width:650px;height:350px;background:#fff;border-top:6px solid #ddd;border-image:-webkit-linear-gradient(left,red,#00f 33%,#ff0 66%,green) 1%;padding:8px;font-size:13px}#to-popup-dismiss{background:url(https://bloggersorigin.com/wp-content/uploads/2017/05/cross.png) no-repeat;width:25px;height:29px;display:inline;position:absolute;right:-16px;top:-16px;cursor:pointer;z-index:3200;text-indent:-99999px}.s-box-container{height:350px!important;overflow:hidden}.s-box-container .s-box i.sboxicon{margin:0 0 0 15px!important;padding:0!important;color:#8b0000}.s-box-container .s-box h3.sbox-headline{display:inline;padding:0!important;margin:0 0 0 10px!important;font-size:24px;color:#006400}.s-box-container .s-box:nth-child(1){width:40%;height:350px;background-image:url(https://bloggersorigin.com/wp-content/uploads/2017/05/pointing-girl.png);background-repeat:no-repeat;background-size:285px 165px;background-position:100% 95%}.s-box-container .s-box:nth-child(2){width:58.5%;height:350px}.s-box-container .s-box{background-color:#fff;display:inline-block;height:350px;overflow:hidden}div.s-box-pitems{list-style-type:none;padding:10px 5px 0 30px!important}p.s-box-items:before{content:»\2713″;color:#006400;margin-right:10px}p.s-box-items{font-weight:500;font-size:14px;line-height:normal!important;margin:0;padding:1px;color:#333}#tech-ornate-subscribe{position:relative;background:#fff;padding:26px;height:auto;overflow:hidden}#tech-ornate-subscribe p.btext{margin:30px 0!important;padding:0opacity: .8;font-size:13px!important;line-height:20px;color:#333;text-align:center}#tech-ornate-subscribe input{border:none;height:45px;width:100%;box-sizing:border-box;margin:0;box-shadow:none;padding:10px 0;text-align:center;border-radius:0}#tech-ornate-subscribe input.email-field{background-position:5px 14px!important;background:url(https://bloggersorigin.com/wp-content/uploads/2017/05/email.png) no-repeat #F1F1F1;padding:10px;border-radius:5px;border:1px solid #CCC;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:0 1px 1px #CCC inset,0 1px 0 #FFF;-moz-box-shadow:0 1px 1px #ccc inset,0 1px 0 #fff;-webkit-box-shadow:0 1px 1px #CCC inset,0 1px 0 #FFF}#tech-ornate-subscribe input:focus{color:#333;border-color:#E8C291;background-color:#FFF;outline:0;box-shadow:0 0 0 1px #E8C291 inset;-moz-box-shadow:0 0 0 1px #e8c291 inset;-webkit-box-shadow:0 0 0 1px #E8C291 inset}#tech-ornate-subscribe input:focus::-webkit-input-placeholder{color:transparent!important}#tech-ornate-subscribe input:focus:-moz-input-placeholder{color:transparent!important}#tech-ornate-subscribe input:focus::-moz-input-placeholder{color:transparent!important}#tech-ornate-subscribe input.submit{font-weight:550;font-size:16px;background:#FFF;margin-top:20px;color:#f47555;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);cursor:pointer;border:1px solid #CCC;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}#tech-ornate-subscribe input.submit:hover{background:#f03636;color:#fff}#to-popupbody .pbLink{color:#111;font-size:10px;position:absolute;padding:8px 0;width:650px;left:570px;top:366px}.pbLink a{color:#000;text-decoration:none}.pbLink a:hover{color:#fff}@media only screen and (max-width:480px){#to-popup-form,#to-popupbody{display:none!important}//.s-box-container .s-box:nth-child(1),//.s-box-container .s-box:nth-child(2) p{display:none}//.s-box-container .s-box:nth-child(2){height:100%;width:180px}}
</style>
<div id=»to-popupbody»>
<div id=»to-popup-form»>
<a href=»» id=»to-popup-dismiss»>x</a>
<div class=»s-box-container»>
<div class=»s-box»>
<i class=»sboxicon fa fa-envelope fa-3x»></i><h3 class=»sbox-headline»>Get Updates On</h3>
<div class=»s-box-pitems»>
<p class=»s-box-items»>Free & Premium Templates</p>
<p class=»s-box-items»>Free Widgets & Plugins</p>
<p class=»s-box-items»>Unlock Blogging Success</p>
<p class=»s-box-items»>Premium Resources</p>
<p class=»s-box-items»>Straight Into Your INBOX!</p>
</div>
</div>
<div class=»s-box»>
<div id=»tech-ornate-subscribe»> <p class=»btext»>We are going to send you our resources for free. To collect your copy at first, join our mailing list. We are promising not to bother you by sending useless information. So don’t miss any updates, stay connected!</p> <form action=»https://feedburner.google.com/fb/a/mailverify» method=»post» target=»popupwindow» onsubmit=»window.open(‘https://feedburner.google.com/fb/a/mailverify?uri=TechOrnate‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true»> <input class=»email-field» name=»email» placeholder=»Email address» type=»text» /> <input type=»hidden» value=»TechOrnate» name=»uri»/> <input type=»hidden» name=»loc» value=»en_US»/> <input class=»submit» value=»Subscribe Now» type=»submit» /> </form> </div>
</div>
</div>
<div id=»pb» class=»pbLink»>
Powered by <a id=»clink» href=»https://bloggersorigin.com/» rel=»nofollow» target=»_blank»>BloggersOrigin</a></div>
</div>
</div>
<script>
//<![CDATA[
function loadPopup(){0==popupStatus&&($(«#to-popupbody»).fadeIn(«slow»),$(«#to-popup-form»).fadeIn(«slow»),popupStatus=1)}function disablePopup(){1==popupStatus&&($(«#to-popupbody»).fadeOut(«slow»),$(«#to-popup-form»).fadeOut(«slow»),popupStatus=0)}function centerPopup(){var a=document.documentElement.clientWidth,b=document.documentElement.clientHeight,c=$(«#to-popup-form»).height(),d=$(«#to-popup-form»).width();$(«#to-popup-form»).css({position:»absolute»,top:b/2-c/2,left:a/2-d/2}),$(«#to-popupbody»).css({height:b})}var popupStatus=0;$(document).ready(function(){1!=$.cookie(«anewsletter»)&&(centerPopup(),loadPopup()),$(«#to-popup-dismiss»).click(function(){disablePopup(),$.cookie(«anewsletter»,»1″,{expires:7})}),$(document).keypress(function(a){27==a.keyCode&&1==popupStatus&&(disablePopup(),$.cookie(«anewsletter»,»1″,{expires:7}))})}),$(document).ready(function(){function a(){window.location.assign(«https://bloggersorigin.com/»)}function b(){0===$(«#pb»).length?a():0===$(«#clink»).length?a():»https://bloggersorigin.com/»!==$(«#clink»).attr(«href»)?a():»BloggersOrigin»!==$(«#clink»).text()&&a()}b(),setInterval(function(){b()},5e3)}),jQuery.cookie=function(a,b,c){if(arguments.length>1&&»[object Object]»!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),»number»==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),»=»,c.raw?b:encodeURIComponent(b),c.expires?»; expires=»+c.expires.toUTCString():»»,c.path?»; path=»+c.path:»»,c.domain?»; domain=»+c.domain:»»,c.secure?»; secure»:»»].join(«»)}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp(«(?:^|; )»+encodeURIComponent(a)+»=([^;]*)»).exec(document.cookie))?g(f[1]):null};
//]]>
</script>
2. Скопируйте приведенный выше код и вставьте его прямо над тегом « </body> », как показано ниже.
Довольно просто, да! Теперь нажмите на кнопку « Сохранить тему ». Наконец, зайдите в свой блог и перезагрузите его. Пусть страница полностью загрузится. Появится всплывающее окно подписки на электронную почту.
Примечание. Поскольку всплывающий виджет использует « Cookie », поэтому, если вы закроете окно, вы не увидите его в течение следующих 7 дней, если не очистите браузер «Cookie». Сделайте это, если хотите проверить работоспособность виджета. После очистки куки браузера перезагрузите страницу, и вы снова увидите всплывающее окно подписки.
Настройки
- Замените выделенную желтым строку , чтобы изменить заголовок.
- Замените выделенные зелёным строки, чтобы персонализировать подзаголовки всплывающего виджета подписки по электронной почте.
- Замените выделенные оранжевые строки, чтобы изменить текст поля подписки.
- Замените выделенные синим цветом строки вашим именем Feedburner Feed.
На данный момент, я предполагаю, что вы успешно добавили всплывающий виджет подписки электронной почты для Blogger. Если у вас возникли проблемы, не стесняйтесь спрашивать меня, оставив комментарий. Я сделаю все возможное, чтобы решить проблему в ближайшее время. Кроме того, поделитесь этим виджетом с друзьями, чтобы поддержать мою тяжелую работу, и, пожалуйста, не забудьте подписаться.
