Притурки. Семпла и стилна лента за известия в Blogger
.jpg)
петък
Приятели, има много ленти за известяване, достъпни за blogspot, но днес в BlogZaBlogove ще споделя едно стилно и премиум изглеждащо приспособление с такава функция.
В наши дни стана тенденция да се прилага този тип плаващо приспособление за известия в блогове. И най-важното e, че изглежда чудесно. Много от популярните блогове използват този тип ленти, за да уведомят своите читатели или да покажат някои важни неща.
➤В нея можете да поставите известие за най-новата си или популярна публикация, така че посетителите на вашия блог да могат лесно да преминат към тази тема или публикация. ➤Лентата за известия може лесно да се затвори и отвори с един бутон, който е в дясната ѝ страна.
➤Приспособлението работи много гладко, защото се поддържа от jquery код и се оформя от css.
➤Персонализирането на това приспособление е много лесно. Можете да промените фона, цвета на рамката и цвета на текста.
Нека демонстрираме тази невероятно изглеждаща лента за известия. Можете да видите демонстрация на притурката в един от тестовите ми блогове.
DEMO
Позиционирайте притурката по-ниско в кода на темата.
Използвайте този инструмент, за да видите как изглежда притурката, след като извършите необходимата ви редакция. Можете да промените съответно текста и бутоните.
➤Намерете в кода на темата </head> и над него впишете частта от кода, определяща стиловете.
Редактирането на стиловете можете да направите по начина, касаещ първия вариант, посочен по-горе.
➤Намерете </body> и над него впишете
Вече имате семпла и стилна лента за известия, като тази в Blogzablogove, който четете в момента.
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Или подкрепете моя проект
Следвайте 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'/>
<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>
<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