Здравейте, приятели. Накратко пак за притурката, която всички познават. Тя е формулярът за абонамент по имейл. Когато читател посети вашия сайт, той вижда този формуляр и записва имейла си в него. След това всеки път, когато добавяте нови публикации в блога си, той ще получава известия за това на електронната си поща.
Видове форми за абонамент в 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
Е, това е. Дано търпението ви е достатъчно, за да се справите.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
Няма коментари:
Публикуване на коментар