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

Търсене

Breaking

Притурки. Семпла и стилна лента за известия в Blogger

Приятели, има много ленти за известяване, достъпни за blogspot, но днес в BlogZaBlogove ще споделя едно стилно и премиум изглеждащо приспособление с такава функция.

Притурки. Семпла и стилна лента за известия в Blogger

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

    Описание

    ➤Това приспособление под формата на притурка изглежда добре и стилно в горната част на вашия блог.
    ➤В нея можете да поставите известие за най-новата си или популярна публикация, така че посетителите на вашия блог да могат лесно да преминат към тази тема или публикация. ➤Лентата за известия може лесно да се затвори и отвори с един бутон, който е в дясната ѝ страна.
    ➤Приспособлението работи много гладко, защото се поддържа от jquery код и се оформя от css.
    ➤Персонализирането на това приспособление е много лесно. Можете да промените фона, цвета на рамката и цвета на текста.

    Нека демонстрираме тази невероятно изглеждаща лента за известия. Можете да видите демонстрация на притурката в един от тестовите ми блогове.

    DEMO

    Как да инсталирате това приспособление. Варианти

    Тези стъпки са толкова прости и лесни, че всеки нов блогър няма да се сблъска с какъвто и да е проблем, за да го инсталира в своя блог.

    Първи вариант - за стандартни теми на Blogger

    Отидете на Blogger.com ➔ Вашият блог ➔ Оформление ➔ Изберете HTML/JavaScript притурка ➔ и в празното пространство впишете нейния код.

    Код


    <!--Notification Bar By Blogzablogove.com-->
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
    <style>
    .tybar{width: 100%;
    margin: 0;
    height: 50px;
    display: table;
    font-size: 17px;
    line-height: 50px;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    color: rgb(255, 255, 255);
    font-family: Ruda;
    border-color: rgb(255, 255, 255);
    background-color: #0e1032;
    box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
    text-align: center;}
    .tybar .bar-but{font-size: 17px;
    font-weight: bold;
    margin-left: 25px;
    background: #fff;
    padding: 5px;
    color: #fff;
    background-color: #f2132d;
    line-height: 1.05;
    padding: 4px 15px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 3px;}
    .tybar .bar-but a{color:#fff;    text-decoration: none;}
    .tybar i {
    float: right;
    padding-right: 40px;
    cursor: pointer;
    line-height: 50px;
    }
    body{margin-top:-49.33px;}
    body{margin-top:49.33px ;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;}
    .toggleclose{top:-75px!important;}
    .togglebody{margin-top:0!important;}
    .fa-arrow-down {
    position: fixed;
    right: 30px;
    top: -2px;
    background:#00BE98;
    color: #FFFFFF;
    width: 40px;
    height: 30px;
    border-radius: 3px;
    line-height: 26px!important;
    padding-top: 10px;
    padding-right: 0!important;
    }
    .tybar{z-index:99999;top:0;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;position:fixed}
    .blink_me {
    color:#f2132d;
    margin-right:10px;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    }
    @-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
    }
    @-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
    }
    @keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
    }
    @media screen and (max-width:800px) {
    .tybar{display:none;}
    body {
    margin-top: 0;
    }
    }
    </style>
    <script>
    //<![CDATA[
    jQuery(document).ready(function(){
    jQuery( '.tybar i' ).click(function() {
    jQuery( '.tybar' ).toggleClass( 'toggleclose' );
    jQuery( 'body' ).toggleClass( 'togglebody' );
    jQuery( '.tybar i' ).toggleClass( 'fa-times' );
    jQuery( '.tybar i' ).toggleClass( 'fa-arrow-down' );
    });
    });
    //]]>
    </script>
    <div class='tybar'>
    <span class='blink_me'>ВАЖНО!</span>Progress Scrollbar за Blogger<span class='bar-but'><a href='https://myprilogenie1.blogspot.com/2019/07/progress-scrollbar-di-blogger.html'>ИЗБЕРИ!</a></span><i class='fa fa-times'/>
    </div>

    <!--Notification Bar By Blogzablogove.com end-->


    Позиционирайте притурката по-ниско в кода на темата.

    Използвайте този инструмент, за да видите как изглежда притурката, след като извършите необходимата ви редакция. Можете да промените съответно текста и бутоните.

    Втори вариант - за теми от трети страни

    Инсталирането в тези теми става в три стъпки:
    ➤Отворете Тема Редактиране на HTML кода Намерете в него <head> и под него впишете


    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

    ➤Намерете в кода на темата </head> и над него впишете частта от кода, определяща стиловете.

    <style>
    .tybar{width: 100%;
    margin: 0;
    height: 50px;
    display: table;
    font-size: 17px;
    line-height: 50px;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    color: rgb(255, 255, 255);
    font-family: Ruda;
    border-color: rgb(255, 255, 255);
    background-color: #0e1032;
    box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
    text-align: center;}
    .tybar .bar-but{font-size: 17px;
    font-weight: bold;
    margin-left: 25px;
    background: #fff;
    padding: 5px;
    color: #fff;
    background-color: #f2132d;
    line-height: 1.05;
    padding: 4px 15px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 3px;}
    .tybar .bar-but a{color:#fff;    text-decoration: none;}
    .tybar i {
    float: right;
    padding-right: 40px;
    cursor: pointer;
    line-height: 50px;
    }
    body{margin-top:-49.33px;}
    body{margin-top:49.33px ;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;}
    .toggleclose{top:-75px!important;}
    .togglebody{margin-top:0!important;}
    .fa-arrow-down {
    position: fixed;
    right: 30px;
    top: -2px;
    background:#00BE98;
    color: #FFFFFF;
    width: 40px;
    height: 30px;
    border-radius: 3px;
    line-height: 26px!important;
    padding-top: 10px;
    padding-right: 0!important;
    }
    .tybar{z-index:99999;top:0;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;position:fixed}
    .blink_me {
    color:#f2132d;
    margin-right:10px;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    }
    @-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
    }
    @-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
    }
    @keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
    }
    @media screen and (max-width:800px) {
    .tybar{display:none;}
    body {
    margin-top: 0;
    }
    }

    </style>

    Редактирането на стиловете можете да направите по начина, касаещ първия вариант, посочен по-горе.

    ➤Намерете </body> и над него впишете

    <div class='tybar'>
    <span class='blink_me'>Red Text</span>Normal White Text<span class='bar-but'><a href='#'>Button Text</a></span><i class='fa fa-times'/>
    </div>

    Вече имате семпла и стилна лента за известия, като тази в Blogzablogove, който четете в момента.

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

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

    BGtop

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




    Следвайте Blogzablogove


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

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

    ИНТЕРЕСНО!Да направим уникална темата на нашия блогИЗБЕРИ!