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

Търсене

Breaking

Вградена форма за абонамент в страничната колона



Здравейте, приятели. Накратко пак за притурката, която всички познават. Тя е формулярът за абонамент по имейл. Когато читател посети вашия сайт, той вижда този формуляр и записва имейла си в него. След това всеки път, когато добавяте нови публикации в блога си, той ще получава известия за това на електронната си поща.


    Видове форми за абонамент в 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



    Е, това е. Дано търпението ви е достатъчно, за да се справите.

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


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

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


    BGtop


     
    Следвайте Blogzablogove

    Моля, подкрепете моя проект



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

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