Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

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

Притурки форма за абонамент в 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;
    ➤Впишете в тялото ѝ избрания от вас код;
    ➤Позиционирайте възможно по-ниско в темата;
    ➤Запаметете;

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

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

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

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




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


    Следвайте Blogzablogove


    Няма коментари:

    Публикуване на коментар