Притурки. Фиксирана форма за абонамент в Blogger

Здравейте, приятели и гости! Днес, като съвети и помощ за Blogger, Blogzablogove ще сподели как да инсталирате форма за абонамент като притурка в блога си. Тя ще е позиционирана в дъното на страницата.
Както знаем Абонаментното поле или абонаментът по имейл е важна част в блога, тъй като ще увеличи броя на посетителите, защото всички абонирали се ще знаят от първа ръка за актуализациите, като получат имейл. И преди съм споделяла съвети, които имат повече или по-малко същите функции и предимства.

Добре, ето стъпките.
Как да инсталирате плаваща форма за абонамент в Blogger и то в три различни варианта?
Ето и кодовете:

Първи вариант

Притурка - Светла форма за абонамент в Blogger

Код:

<!-- Subscribe Box Light By Blogzablogove.com-->

<style type='text/css'>

.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.98);padding:14px 0;z-index:99;text-align:center;display:none}

.subscribebar form{display:inline-block;margin:0 0 0 10px}

.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}

.subscribebar input[type=&quot;email&quot;]{outline:none;color:#999;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:1px solid rgba(0,0,0,0.1);border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}

.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(0,0,0,0.01);color:#333}

.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}

.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}

.closeme{background:#fff;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:#ccc;border:2px solid;border-radius:99em;outline:none;transition:all .3s}

.subscribebar .closeme:hover{color:#aaa}

@media (max-width:767px){

.closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#34495e;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.3)}

.subscribebar .closeme:hover{background:#2c3e50;color:#fff}

.subscribebar{padding:24px 10px}

.subscribebar form{display:block;margin:15px auto 0 auto}}

</style>

<!-- Subscribe Box Light By Blogzablogove.com end-->

DEMO

Втори вариант

Притурка - Тъмна форма за абонамент в Blogger

Код:

<!-- Subscribe Box Night By Blogzablogove.com-->

<style type='text/css'>

.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(57,67,77,.98);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}

.subscribebar form{display:inline-block;margin:0 0 0 10px}

.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}

.subscribebar input[type=&quot;email&quot;]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}

.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(255,255,255,.3);color:#fff}

.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}

.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}

.subscribebar input[type=&quot;email&quot;]::placeholder{color:#fff;opacity:1}

.subscribebar input[type=&quot;email&quot;]:-ms-input-placeholder{color:#fff}

.subscribebar input[type=&quot;email&quot;]::-ms-input-placeholder{color:#fff}

.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.15);border:2px solid;border-radius:99em;outline:none;transition:all .3s}

.subscribebar .closeme:hover{color:rgba(255,255,255,.3)}

@media (max-width:767px){

.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}

.subscribebar .closeme:hover{background:#e74c3c;color:#fff}

.subscribebar{padding:24px 10px}

.subscribebar form{display:block;margin:15px auto 0 auto}}

</style>

<!-- Subscribe Box Night By Blogzablogove.com end-->

DEMO

Трети вариант

Притурка - Форма Градиент за абонамент в Blogger

Код:

<!-- Subscribe Box Gradient By Blogzablogove.com-->

<style type='text/css'>

.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:#FF5722;background-image:linear-gradient(50deg,#ff4169,#8b41f6);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}

.subscribebar form{display:inline-block;margin:0 0 0 10px}

.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}

.subscribebar input[type=&quot;email&quot;]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}

.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(255,255,255,.3);color:#fff}

.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#f9a93c;border:1px solid #f9a93c;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}

.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#e49b36;border:1px solid #e49b36;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}

.subscribebar input[type=&quot;email&quot;]::placeholder{color:#fff;opacity:1}

.subscribebar input[type=&quot;email&quot;]:-ms-input-placeholder{color:#fff}

.subscribebar input[type=&quot;email&quot;]::-ms-input-placeholder{color:#fff}

.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.25);border:2px solid;border-radius:99em;outline:none;transition:all .3s}

.subscribebar .closeme:hover{color:rgba(255,255,255,.4)}

@media (max-width:767px){

.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}

.subscribebar .closeme:hover{background:#e74c3c;color:#fff}

.subscribebar{padding:24px 10px}

.subscribebar form{display:block;margin:15px auto 0 auto}}

</style>

<!-- Subscribe Box Gradient By Blogzablogove.com end-->

DEMO

Инсталиране

➤Отворете страницата на Blogger;
➤Щракнете върху Оформление;
➤Изберете Добавяне на притурка HTML/JavaScript;
➤Впишете в тялото ѝ избрания от вас код;
➤Позиционирайте възможно по-ниско в темата;
➤Запаметете;

Това е всичко за днес.

За въпроси моля, в коментарите. А може и на тази страница.

Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:

Или подкрепете моя проект

Здраве за всички вас! Не забравяйте да правите добро на други хора!


Следвайте Blogzablogove