Създаване и водене на безплатен блог на платформата Blogger. Препоръки и съвети.

Търсене

Breaking

2018-12-13

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

Фиксиран блок за известяване в Blogger
Блокът е ефективна и персонализираща се лента за известяване. Един доказан начин да ангажирате и насочите посетителите си. Независимо дали искате да увеличите реалните посещения, да предупредите посетителите си за специални събития или да ги уведомите за нова важна информация, блокът за известяване ви дава красиво и ефективно решение за минути.



    За фиксирания блок за известяване

    Добавяте в него практически всичко, което можете да си представите. От текстове, изображения и видео до действия за извършване на плащания и дори за вграждане на други приставки, като формуляри и таймери за обратно отброяване.
    Лентата за известяване ви дава най-широк набор от възможности:

    ➤Имате творчески контрол върху персонализирането на всички цветове и шрифтове, за да накарате лентата за известяване да се вписва безпроблемно във вашия блог;

    ➤Една лента за известяване е най-добрият начин да привлечете вниманието на вашия посетител незабавно;

    ➤Правилно създаден фиксиран панел с точния дизайн, послание и връзки води до генериране на потенциални посетители и увеличаване ангажираността на сайта;

    ➤Лентата за уведомяване може да се използва за много различни цели, като например рекламно място, лента за обяви, имейл адрес и много други;

    ➤Добавянето на блок за уведомяване в блога си в Blogger под формата на притурка не създава главоболия и не изисква промяна в кода на темата;


    Важно уточнение:

    Много блогове използват изскачащи прозорци, за да привлекат вниманието на посетителите. Блог за блогове ви предоставя и информация за тях.


    Лентата за уведомяване е по-добро решение, изхождайки  от опита на потребителите, както и от гледна точка на SEO, защото не е тайна, че Google не харесва изскачащите прозорци.

    Ако вече сте съгласни с ефективността на фиксирания блок за известяване ето и кодовете:

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

    Код


    <style>#bloggernotificationWrap{display:none;position:relative;z-index:999999;width:100%;height:41px;margin:0px 0px -41px 0px;padding:0}
    #bloggernotification{overflow:hidden; width:100%;height:28px;padding-top:7px;text-align:center; background:#242729;position:relative;box-shadow:1px 2px 9px #2A5200;z-index:9998;text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400;text-shadow:1px 1px 4px #000;border-bottom:1px solid #90f128;margin:0}
    #bloggernotification strong {font-size:14px;font-family:oswald; font-weight:normal;padding-right:7px;}
    #bloggernotification a{text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400; word-spacing:1px; text-shadow:1px 1px 1px #000;outline:none}
    #bloggernotification a:hover{text-decoration:underline}
    #bloggernotificationWrap #closebloggernotification{display:block;position:absolute;top:0;right:23px;height:40px;width:21px;background:url(//4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/s400/light.png) no-repeat 0 center;cursor:pointer}
    #bloggernotificationWrap #closebloggernotification:hover{background-position:-21px 50%}
    #bloggernotificationWrap.bottomPosition #closebloggernotification{background-position:right 50%}
    #bloggernotificationWrap.bottomPosition #closebloggernotification:hover{background-position:-42px 50%}
    #bloggernotificationWrap #openbloggernotification{display:block;position:absolute;top:-6px;right:15px;background:#2E2F2E;border-left:2px solid #90f128;border-right:2px solid #90f128;border-bottom:2px solid #90f128;cursor:pointer;z-index:1;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:1px 2px 9px #90f128;padding:0 7px}
    #bloggernotificationWrap #openbloggernotification span{display:block;width:21px;height:34px;background:url(//4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/s400/light.png) no-repeat right 50%}
    #send{background:#6f9ff1;color:#fff;cursor:pointer;border-radius:4px;box-shadow:5px 5px 5px #ccc;border:1px solid #79a7f1;padding:6px 10px!important}
    #send:hover{background:#79a7f1}
    #send a{color:#fff;text-shadow:1px 1px 2px #333}
    #send a:hover{text-decoration:none}</style>
    <div id='KNIGULPER-REDIRECTION'>
    <div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
    <div id='bloggernotification'>
    <div style='width: 997px;margin: 0px auto;'>
    <div style='-moz-background-inline-policy: continuous; background: none repeat scroll right top;font-size:14px;font-weight: normal;font-family: &apos;Oswald&apos;, sans-serif;'>
    <marquee behavior='alternate' onmouseout='this.start();' onmouseover='this.stop();' scrollamount='2'>
    <a href='https://www.blogzablogove.com/2018/09/multi-level-drop-down-menu.html'><font color='yellow' size='3'>ПРОЧЕТЕТЕ ИНТЕРЕСНА СТАТИЯ</font>&#160; &#160; &#160;

    ПАДАЩО МЕНЮ НА ЧИСТ CSS3</a> &#160; &#160; &#160; <a href='https://www.blogzablogove.com/p/karta.html'><font color='yellow' size='3'></font> ИЛИ ИЗБЕРЕТЕ ОТ ВСИЧКИ СТАТИИ В БЛОГА</a>
    </marquee>
    </div>
    &#160;  &#160;   &#160;
    </div>
    <span id='closebloggernotification'/>
    </span></div>
    <span id='openbloggernotification' style='top: -6px;'>
    <span/>
    </span>

    </span></div></div>


    В действителност, процентът на реализация на лентата за уведомяване е по-добър от който и да е друг традиционен начин, защото барът може незабавно да привлече вниманието на посетителя ви.

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

    Код


    <style>
    @font-face {
    font-family: 'AnagramRegular';
    src: url('Anagram-webfont.eot');
    src: url('Anagram-webfont.eot?#iefix') format('embedded-opentype'),
    url('Anagram-webfont.woff') format('woff'),
    url('Anagram-webfont.ttf') format('truetype'),
    url('Anagram-webfont.svg#AnagramRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    .notification-bar {
    position: absolute;
    width: 100%;
    top: 0;
    }
    .notification-text {
    background-color: #2980B9;
    padding: 15px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    position: absolute;
    width: 100%;

    -webkit-animation: initiate 350ms ease;
    -moz-animation: initiate 350ms ease;
    -o-animation: initiate 350ms ease;
    animation: initiate 350ms ease;
    }
    .notification-bar input {
    display: none;
    }
    .notification-bar label {
    cursor: pointer;
    color: #fff;
    position: absolute;
    z-index: 5;
    display: inline-block;

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    }
    .notification-bar label[for=hide] {

    right: 15px;
    top: 11px;

    width: 24px;
    height: 24px;
    background: url('http://blogs.discovermagazine.com/cosmicvariance/wp-content/themes/discoverblog/images/close_icon_small.png') no-repeat center center;

    -webkit-animation: initiate 350ms ease;
    -moz-animation: initiate 350ms ease;
    -o-animation: initiate 350ms ease;
    animation: initiate 350ms ease;
    }
    .notification-bar label[for=show] {
    width: 45px;
    height: 50px;
    border-radius: 0px 0px 3px 3px;
    right: 10px;
    background: url('http://library.owu.edu/images/icon-chevron-down-gray.png') no-repeat center center #2980B9;
    }

    /* Function */
    .notification-bar input[value=show]:checked ~ label[for=show],
    .notification-bar input[value=hide]:checked ~ label[for=hide],
    .notification-bar input[value=hide]:checked ~ .notification-text {
    -webkit-transition: ease 350ms;
    -moz-transition: ease 350ms;
    -o-transition: ease 350ms;
    transition: ease 350ms;

    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    }
    .notification-bar input[value=hide]:checked ~ label[for=show],
    .notification-bar input[value=show]:checked ~ label[for=hide],
    .notification-bar input[value=show]:checked ~ .notification-text {
    -webkit-transition: ease 350ms;
    -moz-transition: ease 350ms;
    -o-transition: ease 350ms;
    transition: ease 350ms;

    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
    }

    /* Inital Animation */
    @-webkit-keyframes initiate {
    0% {
    -webkit-transform:translateY(-100%);
    }
    50% {
    -webkit-transform:translateY(-50%);
    }
    100% {
    -webkit-transform:translateY(0%);
    }
    }
    @-moz-keyframes initiate {
    0% {
    -moz-transform:translateY(-100%);
    }
    50% {
    -moz-transform:translateY(-50%);
    }
    100% {
    -moz-transform:translateY(0%);
    }
    }
    @-o-keyframes initiate {
    0% {
    -o-transform:translateY(-100%);
    }
    50% {
    -o-transform:translateY(-50%);
    }
    100% {
    -o-transform:translateY(0%);
    }
    }
    @keyframes initiate {
    0% {
    transform:translateY(-100%);
    }
    50% {
    transform:translateY(-50%);
    }
    100% {
    transform:translateY(0%);
    }
    }
    </style>

    <center><p style="clear:both;"><a href='https://www.blogzablogove.com/2018/09/multi-level-drop-down-menu.html'><font color='red' size='3'>ПРОЧЕТЕТЕ ИНТЕРЕСНА СТАТИЯ</font>&#160; &#160; &#160;

    ПАДАЩО МЕНЮ НА ЧИСТ CSS3</a> &#160; &#160; &#160; <a href='https://www.blogzablogove.com/p/karta.html'><font color='yellow' size='3'></font> ИЛИ ИЗБЕРЕТЕ ОТ ВСИЧКИ СТАТИИ В БЛОГА</a></center>
    </p>
    <!-- demo content -->
    <div class="demo-wrapper">
    <div class="notification-bar">
    <input id="hide" type="radio" name="bar" value="hide">
    <input id="show" type="radio" name="bar" value="show" checked="checked">

    <label for="hide">hide</label>
    <label for="show">show</label>

    <div class="notification-text">ЗДРАВЕЙТЕ, АКО ИСКАТЕ ДА ПРОЧЕТЕТЕ НЕЩО НОВО, КЛИКНЕТЕ ВЪРХУ БУТОНА</div>
    </div>

    </div>

    За да проверите за какво става дума използвайте HTML редактор от главното меню


    Пример за това приспособление е фиксираният панел за използването на „бисквитки“, което  всички използваме. Приспособлението е напълно персонализирано, можете да променяте текста, бутоните, стила за дизайна и също така можете да програмирате външния вид на панела.
    Фиксираният панел за известяване е отличен инструмент за привличане на вниманието на потребителя, независимо от местоположението му на сайта. Такъв панел напълно се справя със задачата да обявява събития, продукти, бонуси и други приятни новини.

    Приятна и лека работа! Успех!

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

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

    BGtop



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

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