Вградена форма за абонамент в страничната колона
.jpg)
Здравейте, приятели. Накратко пак за притурката, която всички познават. Тя е формулярът за абонамент по имейл. Когато читател посети вашия сайт, той вижда този формуляр и записва имейла си в него. След това всеки път, когато добавяте нови публикации в блога си, той ще получава известия за това на електронната си поща.
Видове форми за абонамент в Blogger
Формата за абонамент може да бъде различни видове.
➤Вградена;
➤Фиксирана;
➤Изплаваща;
Давам предимство на вградената форма за абонамент, защото фиксираната, макар, че е винаги пред очите на читателя, е малко дразнеща. А изплаващата се появява за кратко изневиделица, стои известно време и се скрива.
Вградената форма за абонамент често се разполага в долния колонтитул на блога, за да се появява на всяка страница – на публикациите или статични. Ако един ваш читател е превъртял страницата до най-долната ѝ част, това означава, че той се интересува от това, което сте написали. Тогава е много вероятно да впише пощата си, за да получава известия за нови ваши публикации. Предложения за няколко варианта на вградена в долния колонтитул форма за абонамент можете да видите в тази по-стара моя публикация.
Други добри места за вградена форма за абонамент
➤до съдържанието в главното меню;
➤в страничната колона - като притурка;
➤в края на публикация - във формата можете да правите тематични предложения в зависимост от съдържанието на публикацията;
Днес ви предлагам вградена форма за абонамент с приятен дизайн, която се разполага в страничната колона на блога. Тя има две опции. Първата е с икони на социални мрежи, а втората е по-лесна за инсталиране - без икони. Предлагам ви втората опция – без икони за социални мрежи.
Особеност на формата за абонамент
Вградена форма за абонамент без икони за социалните мрежи обаче има една важна особеност. Дано това не ви затрудни и не ви откаже да я ползвате. Особеността е, че трябва да създадете акаунт в https://feedburner.google.com, да следвате инструкциите и накрая да вземете фиид адреса (feed addrees).
Той се вписва на три места в началото на кода на притурката.
Вижте притурката в един от тестовите ми блогове, в лавата му странична колона. Тя изглежда така:
DEMO
Код
<div id="ignielSubscribe">
<div class="email__">
<div class="email">
Получавайте нови статии всяка седмица
<form action="https://feedburner.google.com/fb/a/mailverify?uri=feedaddress" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri= feedaddress', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" class="email" placeholder="Въведете вашия имейл адрес"/>
<input name="uri" type="hidden" value="feedaddress" /> <input name="loc" type="hidden" value="en_US" />
<button type="submit"></button>
</form>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Rubik:300" rel="stylesheet">
<style>
#ignielSubscribe {width:300px; height:auto; background-color:#eee; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px}
#ignielSubscribe .email__ {padding:15px 15px 5px;}
#ignielSubscribe .email {margin:auto; color:#000; text-align:center;}
#ignielSubscribe .email:before {content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:ignielRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:ignielRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:ignielRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%2326c6da'/%3E%3C/svg%3E") center center / 50px no-repeat;}
#ignielSubscribe .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;}
#ignielSubscribe form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px; position:relative;}
#ignielSubscribe form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/%3E%3C/svg%3E") no-repeat; content:'';}
#ignielSubscribe input {width: calc(100% - 35px); background-color:#fff; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}
#ignielSubscribe button {background-color: #26c6da; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}
#ignielSubscribe button:hover, #ignielSubscribe button:focus {background-color:#1d2129;}
#ignielSubscribe button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;}
@-webkit-keyframes ignielRing{
0% { -webkit-transform: rotateZ(0); }
1% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
9% { -webkit-transform: rotateZ(30deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes ignielRing{
0% { -moz-transform: rotate(0); }
1% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
9% { -moz-transform: rotate(30deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% { -moz-transform: rotate(-20deg); }
21% { -moz-transform: rotate(18deg); }
23% { -moz-transform: rotate(-16deg); }
25% { -moz-transform: rotate(14deg); }
27% { -moz-transform: rotate(-12deg); }
29% { -moz-transform: rotate(10deg); }
31% { -moz-transform: rotate(-8deg); }
33% { -moz-transform: rotate(6deg); }
35% { -moz-transform: rotate(-4deg); }
37% { -moz-transform: rotate(2deg); }
39% { -moz-transform: rotate(-1deg); }
41% { -moz-transform: rotate(1deg); }
43% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}
@keyframes ignielRing{
0% { transform: rotate(0); }
1% { transform: rotate(30deg); }
3% { transform: rotate(-28deg); }
5% { transform: rotate(34deg); }
7% { transform: rotate(-32deg); }
9% { transform: rotate(30deg); }
11% { transform: rotate(-28deg); }
13% { transform: rotate(26deg); }
15% { transform: rotate(-24deg); }
17% { transform: rotate(22deg); }
19% { transform: rotate(-20deg); }
21% { transform: rotate(18deg); }
23% { transform: rotate(-16deg); }
25% { transform: rotate(14deg); }
27% { transform: rotate(-12deg); }
29% { transform: rotate(10deg); }
31% { transform: rotate(-8deg); }
33% { transform: rotate(6deg); }
35% { transform: rotate(-4deg); }
37% { transform: rotate(2deg); }
39% { transform: rotate(-1deg); }
41% { transform: rotate(1deg); }
43% { transform: rotate(0); }
100% { transform: rotate(0); }
}
BODY {max-width:800px; padding:50px; margin:auto; font-family: 'Rubik', sans-serif; font-size:14px; font-weight:300;}\
Инсталиране
➤От редактора на блога си изберете: Оформление ➜ Добавяне на притурка ➜ Изберете HTML/JavaScript ➜ впишете кода в тялото ѝ ➜Запаметете.
Пояснения
➤Позиционирайте притурката в страничната колона на блога си.
➤При желание направете своите промени в стиловете на притурката. В кода са оцветени:
➤В синьо – текстът във формата за абонамент;
➤В червено - синия цвят на бутона и камбанката;
➤В черно – feedaddressот регистрацията в блога ви на https://feedburner.google.com
Е, това е. Дано търпението ви е достатъчно, за да се справите.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
