Притурки. Бюлетин за новини в блог - два варианта • ОТ ВСЯКЪДЕ ПО МАЛКО, ЗА ВСЕКИГО ПО НЕЩО

Pepa Tabakova

четвъртък

Бюлетинът за новини в блог е поле, в което се появява текст с хипервръзка към наша публикация, с което искаме да привлечем вниманието и засилим интереса на читателя.
Какви са ползите от добавянето на бюлетина за новини в блог на 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>

<ul>

<li><a href="#">Заглавие...</a></li>

<li><a href="#"> Заглавие...</a></li>

</ul>

</div>

Настройки

➤За да промените цветовата гама на бюлетина за новини променете участъците в кода, които са оцветени в червено и синьо;

➤Наименованието на бюлетина в кода е „НОВО!“, което също можете да смените;

➤В края на кода е мястото за URL и заглавията на публикациите в него. Броят им може да се увеличава или намалява;

➤Заменете всяка решетка с ваш URL, и текстовете, също;

➤Проверете какво сте направили, като използвате този HTML редактор от главното меню;

Втори вариант

Бюлетинът е с жълт фон, по цялата ширина на страницата и показва заглавията на новините и снипет към тях. След редактиране на кода го вписвате в притурка HTML / JavaScript, позиционирайте над или под публикациите и запаметете.

Код:

<style>

<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>

</style>

<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>

</ul>

Настройки

➤Оставям ви сами да се ориентирате в този код. Не съм оцветила нищо в него съвсем съзнателно. Смятам, че вече имате достатъчно познания за това.

➤Използвайте този инструмент за проверка на всяка ваша промяна в кода.

➤Бъдете внимателни, спокойни и уверени в това, което вече сте научили от Blogzablogove.com и всичко ще се получи, както го искате.

Важно!

Преди да добавите кода на бюлетина за новини в кода на темата си, уверете се, че сте избрали правилния цвят за вашия блог. Ако сте нов блогър, можете да се свържете с мен чрез страницата за контакти. Аз със сигурност ще ви помогна. И да, задачата не е досадна. Не се притеснявайте, дори ако не сте наясно какво кое е в кода. Все пак, ако спазите посочените стъпки, ще можете да получите бюлетин за новини в блога си.

Успех!

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

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

5 Komentar

peSho 3 май 2018 г. в 12:09

Много приятен бюлетин и ако имам възможност да пооправя превъртането на текста спрямо моите нужди скоро ще го сложа в блога ми. Благодарности към автора!
- Пепа 3 май 2018 г. в 18:15 ?
  
  Моля, ако мога да помогна, с удоволствие.
- peSho 4 май 2018 г. в 10:31 ?
  
  Имам проблем с оразмеряването на първия код. Искам да намаля ширината му поне на половина за да представлява по-тънка и компактна лента. Но не мога да улуча центровката явно и така като се превърта за да покаже следващата статия или я прескача или стои на половина видима. Пробвах уж да променям стойности и накрая го нагласих според HTML редактор, но като го сложих в блога пак имаше разминаване.
- Пепа 4 май 2018 г. в 20:39 ?
  
  Всъщност, какъв размер ви трябва? Това което ви пратих е width: 400px;
  height: 40px;
  Ако се намали ширината още ще трябва да се съкрати и заглавието. Пишете ми, ще пробвам.
- peSho 8 май 2018 г. в 9:50 ?
  
  Извинявам се за забавянето, но нямах достъп за проба. Оказа се, че вашата редакция отговаря на моята проба, която бях постигнал без да ми се разминава текста. Така ми идва много обемен за да го вмъкна в блога. Като намаля височината и съответно шрифта при мен стават едни разминавания, когато се появява ефект с превъртане на текста.
Reply ?

Cancel

Притурки. Бюлетин за новини в блог - два варианта

Първи вариант

Настройки

Втори вариант

Код:

Настройки

5 Komentar

PEPA TABAKOVA