Притурки. Обикновен слайдер за новини в Blogger

Pepa Tabakova

събота

Здравейте, приятели, гости на моя блог, читатели. Здравейте, всички! Преди известно време ви представих няколко варианта на притурка за новини във вашия блог. Тези, които са пропуснали, могат да прочетат, ако желаят, за автоматизирана притурка Новини и бюлетин за новини в блог – два варианта.
Някои от вас вече споделиха, че при тях част от кодовете не работят. Ето защо днес искам да ви запозная с друг вариант на това, как да предложите на вашите посетители не само новините във вашия блог, но и да им покажете и важни съобщения или интересни цитати.

За тази цел един обикновен слайдер ще свърши много добра работа. Можете да го използвате за всякакви цели, за каквото ви дойде на ума. Смятах, че недостатък на този слайдер е невъзможността текстът в него да съдържа хипервръзки. Но като поработих малко върху кода, се оказа, че и този му недостатък е преодолим. Но нека започнем. В хода на публикацията ще се опитам да споделя с вас всичко.

Код на слайдера

Кодът на този обикновен слайдер се състои от три елемента:

➤Скрипт на слайдера;

➤HTML код за оформление на блока, където ще се намира вашият текст;

➤Код за задаване на стиловете на целия блок;

Скрипт на слайдера

◾Параметърът ScrollDelay в скрипта определя времето, за което една новина ще се показва в блока на слайдера;

◾Параметърът scrollSpeed отговаря за скоростта на смяна на новините в него;
Значенията им в скрипта съм маркирала в червено. Вие може да ги промените.

"slow" - бавно
"normal" - стандартно
"fast" – бързо

HTML код за оформление на блока, където ще се намира вашия текст

<div>
<div class="scrollBlock">
<div class="scrollItem">Ваш текст 1</div>
<div class="scrollItem">Ваш текст 2</div>
<div class="scrollItem">Ваш текст 3</div>
<div class="scrollItem">Ваш текст 4</div>
</div>
<div class="scrollNavi">
<div style="float:right;"><a href="javascript://" class="scrollNext" title="Следваща">Следваща</a></div>
<a href="javascript://" class="scrollPrev" title="Предишна">Предишна</a>
</div>
</div>

Ако е необходимо добавете още редове

<div class="scrollItem">Ваш текст 1</div>

Може да махнете от кода навигацията предишна-следваща. Отбелязана е в синьо. Или да замените текста с изображения.

Код за задаване на стиловете на целия блок

Остана да определим стиловете на целия блок.

- */
.scrollBlock .scrollItem{display:none;}
.scrollNavi{text-align:left;}
.scrollItem{text-align:center;font-size:13px;color:#A52A2A;} /* - размер и цвят на текста - */
</style>

Алгоритъм на работа

Искам да припомня:

1. Пригответе трите елемента на кода с промените, които желаете да направите в отделен текстови файл;

2. За да видите какво сте променили, използвайте този инструмент;

3. Впишете трите кода един след друг, в посочената последователност, в притурка HTML/JavaScript и разположете на желано от вас място в блога си;

А ето и целия код:

<div>
<div class="scrollBlock">
<div class="scrollItem">Прочетете „Още за етикетите в блога“</div>
<div class="scrollItem">Ваш текст 2</div>
<div class="scrollItem">Ваш текст 3</div>
<div class="scrollItem">Ваш текст 4</div>
</div>
<div class="scrollNavi">
<div style="float:right;"><a href="javascript://" class="scrollNext" title="Следваща">Следваща</a></div>
<a href="javascript://" class="scrollPrev" title="Предишна">Предишна</a>
</div>
</div>

- */
.scrollBlock .scrollItem{display:none;}
.scrollNavi{text-align:left;}
.scrollItem{text-align:center;font-size:13px;color:#A52A2A;} /* - размер и цвят на текста - */
</style>

А ето и примерен код с хипервръзки в текста:

var scrollSpeed='slow';

var ScrollDelay= 8000; //ms

doScrollNext=function(obj){

if($(obj).parent('.scrollNavi').html()!=null){

obj=$(obj).parent('.scrollNavi').parent('div');

}else{

obj=$(obj).parent().parent('.scrollNavi').parent('div');

}

if($(obj).find('.scrollBlock .scrollItem:visible').length!=1){

$(obj).find('.scrollBlock .scrollItem').hide();

$(obj).find('.scrollBlock .scrollItem:first').show();

}

$(obj).find('.scrollBlock .scrollItem:visible').animate({opacity:"hide"},scrollSpeed,function(){

if($(this).html()==$(this).parent().find('.scrollItem:last').html()){

$(this).parent().find('.scrollItem:first').animate({opacity:"show"},scrollSpeed);

}else{

$(this).next('.scrollItem').animate({opacity:"show"},scrollSpeed);

}

});

}

doScrollPrev=function(obj){

if($(obj).parent('.scrollNavi').html()!=null){

obj=$(obj).parent('.scrollNavi').parent('div');

}else{

obj=$(obj).parent().parent('.scrollNavi').parent('div');

}

if($(obj).find('.scrollBlock .scrollItem:visible').length!=1){

$(obj).find('.scrollBlock .scrollItem').hide();

$(obj).find('.scrollBlock .scrollItem:first').show();

}

$(obj).find('.scrollBlock .scrollItem:visible').animate({opacity:"hide"},scrollSpeed,function(){

if($(this).html()==$(this).parent().find('.scrollItem:first').html()){

$(this).parent().find('.scrollItem:last').animate({opacity:"show"},scrollSpeed);

}else{

$(this).prev('.scrollItem').animate({opacity:"show"},scrollSpeed);

}

});

}

doScroll=function(obj){

doScrollNext(obj);

setTimeout(function(){doScroll(obj);},ScrollDelay);

}

$(document).ready(function(){

$('.scrollNext').click(function(){doScrollNext(this);});

$('.scrollPrev').click(function(){doScrollPrev(this);});

$('.scrollBlock .scrollItem').hide();

$('.scrollBlock').each(function(){

$(this).find('.scrollItem:first').show();

var obj=$(this).parent('div').find('.scrollNext');

setTimeout(function(){doScroll(obj);},ScrollDelay);

});

</script>

<div>

<div class="scrollItem">ПРЕДЛАГАМ ДА ПРОЧЕТЕТЕ</div>

<div class="scrollItem"><a href="https://www.blogzablogove.com/2018/06/oshche-za-etiketite-v-bloga.html">ОЩЕ ЗА ЕТИКЕТИТЕ В БЛОГА</a></div>

<div class="scrollItem"><a href="https://www.blogzablogove.com/2016/12/edin-nachin-za-oformyane-na-glavnata-stranica-na-blog.html">ЕДИН НАЧИН ЗА ОФОРМЯНЕ НА ГЛАВНАТА СТРАНИЦА НА БЛОГ</a></div>

<div class="scrollItem"><a href="https://www.blogzablogove.com/2018/06/optimizaciya-breadcrumbs-navigaciya-galeta-za-blog.html">ОПТИМИЗАЦИЯ. BREADCRUMBS - НАВИГАЦИЯ ГАЛЕТА ЗА БЛОГ</a></div>

</div>

<div style="float:right;"><a href="javascript://" class="scrollNext" title="Напред">Напред</a></div>

<a href="javascript://" class="scrollPrev" title="Назад">Назад</a>

</div>

.scrollNavi,.scrollBlock{width:200px;} /* - ширина на блока - */

.scrollBlock{height:50px;border:5px solid #2288bb;} /* - цвят и размер на рамката - */

.scrollBlock .scrollItem{display:none;}

.scrollNavi{text-align:left;}

.scrollItem{text-align:center;font-size:12px;color:#FF0000;} /* - размер и цвят на текста - */

</style>

Вярвам, че ще се справите. Успех и доскоро!

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

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

Cancel

Код на слайдера

Скрипт на слайдера

HTML код за оформление на блока, където ще се намира вашия текст

Код за задаване на стиловете на целия блок

Алгоритъм на работа

PEPA TABAKOVA