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

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

В наши дни стана тенденция да се прилага този тип плаващо приспособление за известия в блогове. И най-важното 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, който четете в момента.

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

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


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

Следвайте Blogzablogove