Всплывающий виджет подписки по электронной почте для Blogger
Это действительно профессионально выглядящий виджет подписки на электронную почту для повышения активности пользователей.
Получите красивый виджет всплывающие оконо для подписки по электронной почте без каких-либо затрат. Это действительно профессионально выглядящий виджет подписки на электронную почту для повышения активности пользователей. У вас может быть много всплывающих виджетов, но этот наверняка поразит вас. Я доработал этот высокопрофессионально выглядящий всплывающий виджет подписки на электронную почту для блогеров с чистым HTML, CSS и JavaScript (jquery). По этой причине вы найдете этот виджет более гибким и удобным для посетителя.
Кроме того, этот всплывающий виджет подписки по электронной почте имеет чистый и привлекательный вид, чтобы привлечь больше посетителей. В результате, он привращает больше читателей / посетителей в подписчиков. На самом деле, если у вас есть базовые знания в области кодирования, вы можете редактировать этот виджет для продвижения любого другого продукта. Но если вы этого не хотите делать, то можете использовать его совершенно бесплатно для значительного увеличения подписчика вашего блога. По сути, я доработал этот всплывающий виджет подписки на электронную почту для Blogger для работы с Feedburner.
Я предоставлю полную инструкцию по настройке здесь. Таким образом, вы сможете добавить это в свой блог в течение нескольких кликов. Наконец, я рекомендую вам настроить службу управления лентами Feedburner для достижения оптимального результата, потому что виджет оптимизирован для него и позволяет вашим подписчикам использовать все его возможности. Теперь давайте посмотрим, как добавить этот всплывающий виджет подписки на электронную почту, но перед этим мы должны знать, зачем его использовать.
Зачем использовать всплывающий виджет подписки электронной почты для блогера?
- Это может быть идеальным решением для увеличения читателей блога и подписчиков.
- Он будет уведомлять каждого подписчика автоматически после публикации нового сообщения.
- Это увеличит общее количество возвращающихся посетителей и снизит показатель отказов.
- Это может увеличить на 700% больше подписчиков электронной почты блога.
- Простой почтовый маркетинг и решение для создания списков бесплатно.
Особенности этого всплывающего виджета электронной подписки
Нет сомнений в важности наличия всплывающего виджета подписки на электронную почту. Теперь давайте посмотрим на некоторые привлекательные особенности этого.1. Для улучшения работы с читателями мы не должны беспокоить их, показывая всплывающие окна снова и снова (при каждом нажатии или перезагрузке страницы). Вот почему этот виджет будет использовать технику jQuery cookie для показа всплывающего окна один раз в 7 дней, если он нажмет кнопку закрытия.
2. Он имеет привлекательный и очень профессиональный вид, чтобы привлечь больше посетителей, чтобы стать подписчиком.
3. Красивый эффект JQuery Fade in и Fade out обеспечит плавность использования всплывающего виджета.
4. Всплывающее окно появится в центре экрана, и вы можете легко увеличить или уменьшить размер всплывающего окна.
Подготовьте шаблон для всплывающего виджета подписки по электронной почте
Всплывающий виджет подписки на электронную почту предназначен для работы с Feedburner. Так что у вас не возникнет никаких проблем, если вы правильно настроите свой шаблон и Feedburner. Внимательно следуйте инструкциям, чтобы ваш шаблон правильно подготовлен для использования этого всплывающего виджета подписки на электронную почту. В основном нам нужно проверить три вещи:2. Импорт значков « Font Awesome »
3. Импорт бесплатного шрифта Google « Oswald ».
Войдите в свою учетную запись блогера> Перейдите в раздел « Тема »> Нажмите « Изменить 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"/>
Добавить всплывающий виджет подписки по электронной почте для Blogger
<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>
Примечание. Поскольку всплывающий виджет использует « Cookie », поэтому, если вы закроете окно, вы не увидите его в течение следующих 7 дней, если не очистите браузер «Cookie». Сделайте это, если хотите проверить работоспособность виджета. После очистки куки браузера перезагрузите страницу, и вы снова увидите всплывающее окно подписки.
Настройки
- Замените выделенную желтым строку , чтобы изменить заголовок.
- Замените выделенные зелёным строки, чтобы персонализировать подзаголовки всплывающего виджета подписки по электронной почте.
- Замените выделенные оранжевые строки, чтобы изменить текст поля подписки.
- Замените выделенные синим цветом строки вашим именем Feedburner Feed.