Какви са ползите от добавянето на бюлетина за новини в блог на Blogger.
Можете да споделите и подчертаете добрите си публикации, които смятате, че предизвикват най-голям интерес у читателите ви.
Или тези, които са четени най-много, или най-малко….
Бюлетинът за новини спомага за прецизното фокусиране на ангажираността на потребителите върху определено съдържание от блога ви. Така вашите читатели никога няма да пропуснат най-доброто от вашия блог. Въпросът е вие да прецените кое е то.
Кодовете за създаване и добавяне на бюлетин за новини в Blogger са:
Първи вариант
Показвам ви няколко варианта в различна цветова гама под формата на скриншот.
А сега кодът:
<style>
@keyframes ticker {
0% {margin-top: -50px}
11% {margin-top: -100px}
22% {margin-top: -150px}
33% {margin-top: -200px}
44% {margin-top: -250px}
55% {margin-top: -300px}
66% {margin-top: -350px}
77% {margin-top: -400px}
88% {margin-top: -450px}
100% {margin-top: -50px}
}
body {
background: #A9EDDA;
height: 100%;
}
.news {
background: #c8102e;
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
width: 570px;
height: 40px;
margin: 50px auto;
overflow: hidden;
border-radius: 4px;
padding: 3px;
-webkit-user-select: none;
}
.news span {
float: left;
color: #fff;
padding: 4px;
position: relative;
top: 1%;
border-radius: 4px;
background: #333;
font: 28px Raleway, Arial, sans-serif;
vertical-align: -webkit-baseline-middle;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
cursor: pointer;
}
.news ul {
float: left;
padding-left: 10px;
animation: ticker 25s cubic-bezier(1, 0, .5, 0) infinite;
-webkit-user-select: none;
}
.news ul li { line-height: 50px; list-style: none }
.news ul li a {
margin-left:160px;
color: #fff;
text-decoration: none;
font: 22px Raleway, Arial, sans-serif;
vertical-align: -webkit-baseline-middle;
vertical-align: -moz-middle-with-baseline;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none
}
.news ul:hover { animation-play-state: paused }
.news span:hover+ul { animation-play-state: paused }
</style>
<div class="news">
<span>НОВО!</span>
<ul>
<li><a href="#">Заглавие...</a></li>
<li><a href="#"> Заглавие...</a></li>
<li><a href="#"> Заглавие...</a></li>
<li><a href="#"> Заглавие...</a></li>
</ul>
</div>
Настройки
➤За да промените цветовата гама на бюлетина за новини променете участъците в кода, които са оцветени в червено и синьо;
➤Наименованието на бюлетина в кода е „НОВО!“, което също можете да смените;
➤В края на кода е мястото за URL и заглавията на публикациите в него. Броят им може да се увеличава или намалява;
➤Заменете всяка решетка с ваш URL, и текстовете, също;
➤Проверете какво сте направили, като използвате този HTML редактор от главното меню;
Втори вариант
Бюлетинът е с жълт фон, по цялата ширина на страницата и показва заглавията на новините и снипет към тях. След редактиране на кода го вписвате в притурка HTML / JavaScript, позиционирайте над или под публикациите и запаметете.Код:
<style>
<!-- ashraf code for news sticker -->
<style>
#news_ticker .video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
#news_ticker .section {
display: block
}
#news_ticker ul {
list-style: none
}
#news_ticker blockquote,
#news_ticker q {
#news_ticker quotes: none
}
.blockquote:before,
.blockquote:after,
.q:before,
.q:after {
content: '';
content: none
}
#news_ticker table {
border-collapse: collapse;
border-spacing: 0
}
#news_ticker {
background: #fff999;
width: 100%;
height: 26px;
margin: 40px auto 0;
overflow: hidden;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 3px;
position: relative;
-webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
#news_ticker span {
float: left;
/*color: #020b82;
/* background: #fff999;*/
padding: 6px;
position: relative;
border-radius: 6px;
font-size: 20px;
-webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.2), 0px 1px 1px rgba
(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.2), 0px 1px 1px rgba
(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.2), 0px 1px 1px rgba
(0, 0, 0, 0.5);
background: rgb(255, 249, 153);
background: -moz-linear-gradient(top, rgb(255, 249, 153) 0%, rgb(255, 249, 153) 100%);
background: -webkit-linear-gradient(top, rgb(255, 244, 212) 0%, rgba(0, 53, 72, 1) 100%);
background: -o-linear-gradient(top, rgba(0, 75, 103, 1) 0%, rgbargb(255, 244, 212) 100%);
background: -ms-linear-gradient(top, rgba(0, 75, 103, 1) 0%, rgba(0, 53, 72, 1) 100%);
background: linear-gradient(top, rgba(0, 75, 103, 1) 0%, rgba(0, 53, 72, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fff999', endColorstr='#fff01a', GradientType=0);
}
#news_ticker ul {
float: left;
padding-left: 20px;
-webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
}
#news_ticker ul:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
}
#news_ticker li {
line-height: 26px;
}
#news_ticker a {
color: #ff0000;
text-decoration: none;
font-size: 22px;
}
@-webkit-keyframes ticker {
0% {
margin-top: 0;
}
25% {
margin-top: -26px;
}
50% {
margin-top: -52px;
}
75% {
margin-top: -78px;
}
100% {
margin-top: 0;
}
}
@-moz-keyframes ticker {
0% {
margin-top: 0;
}
25% {
margin-top: -26px;
}
50% {
margin-top: -52px;
}
75% {
margin-top: -78px;
}
100% {
margin-top: 0;
}
}
@-ms-keyframes ticker {
0% {
margin-top: 0;
}
25% {
margin-top: -26px;
}
50% {
margin-top: -52px;
}
75% {
margin-top: -78px;
}
100% {
margin-top: 0;
}
}
@keyframes ticker {
0% {
margin-top: 0;
}
25% {
margin-top: -26px;
}
50% {
margin-top: -52px;
}
75% {
margin-top: -78px;
}
100% {
margin-top: 0;
}
}
</style>
<!-- ashraf code for news sticker -->
</style>
<div id="news_ticker">
<span>НОВО!</span>
<ul>
<li><a href="####">ЗАГЛАВИЕ Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</a></li>
<li><a href="####">ЗАГЛАВИЕ Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</a></li>
<li><a href="####">ЗАГЛАВИЕ Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</a></li>
<li><a href="####">ЗАГЛАВИЕ Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</a></li>
<li><a href="####">ЗАГЛАВИЕ Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</a></li>
</ul>
Настройки
➤Оставям ви сами да се ориентирате в този код. Не съм оцветила нищо в него съвсем съзнателно. Смятам, че вече имате достатъчно познания за това.➤Използвайте този инструмент за проверка на всяка ваша промяна в кода.
➤Бъдете внимателни, спокойни и уверени в това, което вече сте научили от Blogzablogove.com и всичко ще се получи, както го искате.
Важно!
Преди да добавите кода на бюлетина за новини в кода на темата си, уверете се, че сте избрали правилния цвят за вашия блог. Ако сте нов блогър, можете да се свържете с мен чрез страницата за контакти. Аз със сигурност ще ви помогна. И да, задачата не е досадна. Не се притеснявайте, дори ако не сте наясно какво кое е в кода. Все пак, ако спазите посочените стъпки, ще можете да получите бюлетин за новини в блога си.
Успех!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Много приятен бюлетин и ако имам възможност да пооправя превъртането на текста спрямо моите нужди скоро ще го сложа в блога ми. Благодарности към автора!
ОтговорИзтриванеМоля, ако мога да помогна, с удоволствие.
ИзтриванеИмам проблем с оразмеряването на първия код. Искам да намаля ширината му поне на половина за да представлява по-тънка и компактна лента. Но не мога да улуча центровката явно и така като се превърта за да покаже следващата статия или я прескача или стои на половина видима. Пробвах уж да променям стойности и накрая го нагласих според HTML редактор, но като го сложих в блога пак имаше разминаване.
ИзтриванеПогледнете и пробвайте този код
Изтриване<style>
@keyframes ticker {
0% {margin-top: -50px}
11% {margin-top: -100px}
22% {margin-top: -150px}
33% {margin-top: -200px}
44% {margin-top: -250px}
55% {margin-top: -300px}
66% {margin-top: -350px}
77% {margin-top: -400px}
88% {margin-top: -450px}
100% {margin-top: -50px}
}
body {
background: #A9EDDA;
height: 100%;
}
.news {
background: #c8102e;
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
width: 400px;
height: 40px;
margin: 50px auto;
overflow: hidden;
border-radius: 4px;
padding: 3px;
-webkit-user-select: none;
}
.news span {
float: left;
color: #fff;
padding: 4px;
position: relative;
top: 1%;
border-radius: 4px;
background: #333;
font: 28px Raleway, Arial, sans-serif;
vertical-align: -webkit-baseline-middle;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
cursor: pointer;
}
.news ul {
float: left;
padding-left: 10px;
animation: ticker 25s cubic-bezier(1, 0, .5, 0) infinite;
-webkit-user-select: none;
}
.news ul li { line-height: 50px; list-style: none }
.news ul li a {
margin-left:160px;
color: #fff;
text-decoration: none;
font: 22px Raleway, Arial, sans-serif;
vertical-align: -webkit-baseline-middle;
vertical-align: -moz-middle-with-baseline;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none
}
.news ul:hover { animation-play-state: paused }
.news span:hover+ul { animation-play-state: paused }
</style>
<div class="news">
<span>НОВО!</span>
<ul>
<li><a href="https://peshkostadinov.blogspot.bg/2018/05/den-na-truda.html">Честит ден на труда!</a></li>
<li><a href="http://peshkostadinov.blogspot.bg/2018/04/pazaruvajte-razumno.html">Пазарувай разумно</a></li>
<li><a href="http://peshkostadinov.blogspot.bg/2018/04/narkotici.html">Модерна зависимост</a></li>
<li><a href="#"> Заглавие...</a></li>
</ul>
</div>
Всъщност, какъв размер ви трябва? Това което ви пратих е width: 400px;
Изтриванеheight: 40px;
Ако се намали ширината още ще трябва да се съкрати и заглавието. Пишете ми, ще пробвам.
Извинявам се за забавянето, но нямах достъп за проба. Оказа се, че вашата редакция отговаря на моята проба, която бях постигнал без да ми се разминава текста. Така ми идва много обемен за да го вмъкна в блога. Като намаля височината и съответно шрифта при мен стават едни разминавания, когато се появява ефект с превъртане на текста.
Изтриване