За фиксирания блок за известяване
Добавяте в него практически всичко, което можете да си представите. От текстове, изображения и видео до действия за извършване на плащания и дори за вграждане на други приставки, като формуляри и таймери за обратно отброяване.Лентата за известяване ви дава най-широк набор от възможности:
➤Имате творчески контрол върху персонализирането на всички цветове и шрифтове, за да накарате лентата за известяване да се вписва безпроблемно във вашия блог;
➤Една лента за известяване е най-добрият начин да привлечете вниманието на вашия посетител незабавно;
➤Правилно създаден фиксиран панел с точния дизайн, послание и връзки води до генериране на потенциални посетители и увеличаване ангажираността на сайта;
➤Лентата за уведомяване може да се използва за много различни цели, като например рекламно място, лента за обяви, имейл адрес и много други;
➤Добавянето на блок за уведомяване в блога си в 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiufsfCB1caFhaGKg5osE9qMQHZ3zn7ru1vK05vkAnFmI_TQlR37ETO_AeleMtE8lwL_TVldfEOg3wXQgkCsL4-w3nOLBc3bQ85DDEEO-d3c023qui54VM99ljf0dQFwkfYUW0AMetrdAjs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiufsfCB1caFhaGKg5osE9qMQHZ3zn7ru1vK05vkAnFmI_TQlR37ETO_AeleMtE8lwL_TVldfEOg3wXQgkCsL4-w3nOLBc3bQ85DDEEO-d3c023qui54VM99ljf0dQFwkfYUW0AMetrdAjs/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: 'Oswald', 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>     
ПАДАЩО МЕНЮ НА ЧИСТ CSS3</a>       <a href='https://www.blogzablogove.com/p/karta.html'><font color='yellow' size='3'></font> ИЛИ ИЗБЕРЕТЕ ОТ ВСИЧКИ СТАТИИ В БЛОГА</a>
</marquee>
</div>
     
</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>     
ПАДАЩО МЕНЮ НА ЧИСТ CSS3</a>       <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 редактор от главното меню
Пример за това приспособление е фиксираният панел за използването на „бисквитки“, което всички използваме. Приспособлението е напълно персонализирано, можете да променяте текста, бутоните, стила за дизайна и също така можете да програмирате външния вид на панела.
Фиксираният панел за известяване е отличен инструмент за привличане на вниманието на потребителя, независимо от местоположението му на сайта. Такъв панел напълно се справя със задачата да обявява събития, продукти, бонуси и други приятни новини.
Приятна и лека работа! Успех!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Няма коментари:
Публикуване на коментар