Креативный слайдер-ротатор случайных постов.

Креативный горизонтальный слайдер-ротатор рандомных или случайных сообщений для блога с миниатюрами и анонсом поста. Установка гаджета вывода показа случайных анонсов постов,настройка,код скрипта с подробным описанием и визуальными примерами.Ротация анонсов происходит в режиме нон-стоп,но также есть функция принудительного перехода.

Установка слайдера-ротатора.

Скрипт показа случайных сообщений работает на  jQuery и прежде чем установить данный код ротатора проверьте присутствии в шаблоне вашего блога данного вида подключения.  Если же на вашем блоге отсутствует в шаблоне такая строка

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' type='text/javascript'></script>

,то её следует установить перед закрывающимся тегом </head>. При наличии подключения любой библиотеки ajax, удалите с приведённого ниже скрипта указанyю выше строку в приведённом  объёме продолжайте установку согласно приведённым здесь инструкциям.

Сам слайдер-ротатор случайных сообщений расположен внизу страницы и соответственно у Вас уже сложилось представление о том,куда вы его планируете разместить. Оговорюсь сразу,данный скрипт работает только на Блоггер (или Блогспот), что соответственно подразумевает его установку в любом гаджете НТМЛ согласно дизайну страницы.И самый простой способ проверить работу ротатора это скопировать данный код целиком и установить его в подходящий гаджет заменив имя блога на своё.

Код CSS

<style>#slide-container {
height:125px; /* высота контейнера */
position:relative;
width:530px; /* ширина контейнера */
}
#slider {
height:125px; /* высота контейнера */
left:24px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:530px; border: 1px solid #ddd;/*ширина контейнера,толщина и цвет рамки */
}hr{ border: 1px solid #ddd;}
.slide-desc {
padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:350px; /*ширина блока для текста */
z-index:1;
}
.slide-desc h2{display:block;font-size: 14px;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
</style>

Код HTML и ЯВА-скрипт

<div id="slider">

<script style="text/javascript">

var showpostthumbnails_gal = true;

var showpostsummary_gal = true;

var random_posts = true;

var numchars_gal = 150;

var numposts_gal = 200;

function showgalleryposts(json) {

var numPosts = json.feed.openSearch$totalResults.$t;

var indexPosts = new Array();

document.write('<ul>');

for (var i = 0; i < numPosts; ++i) {

indexPosts[i] = i;

}

if (random_posts == true){

indexPosts.sort(function() {return 0.5 - Math.random()});

}

if (numposts_gal > numPosts) {

numposts_gal = numPosts;

}

for (i = 0; i < numposts_gal; ++i) {

var entry_gal = json.feed.entry[indexPosts[i]];

var posttitle_gal = entry_gal.title.$t;

for (var k = 0; k < entry_gal.link.length; k++) {

if ( entry_gal.link[k].rel == 'alternate') {

posturl_gal = entry_gal.link[k].href;

break;

}

}

if ("content" in entry_gal) {

var postcontent_gal = entry_gal.content.$t

}

s = postcontent_gal;

a = s.indexOf("<img");

b = s.indexOf("src=\"", a);

c = s.indexOf("\"", b + 5);

d = s.substr(b + 5, c - b - 5);

if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {

var thumburl_gal = d

} else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuYjGKavyrX6tjV-NtkswPDrbF-J7XEDbXi5H60w-qzOG4RDK3j-5y1-Mlh78SSM3uOH1LFugF7FgcoT0Lgvmw5DDrm9wECx34jGAz9OlRb71S3z0eG4W48-8Ffxm8JrusVSYypxjOOaR1/s320/v-gol.ru.gif';

document.write('<li><div id="slide-container"><span class="slide-desc"><h2><a href="' + posturl_gal + '">');

document.write(posttitle_gal + '</a></h2>');

var re = /<\S[^>]*>/g;

postcontent_gal = postcontent_gal.replace(re, "");

if (showpostsummary_gal == true) {

if (postcontent_gal.length < numchars_gal) {

document.write(postcontent_gal);

document.write('</span>')

} else {

postcontent_gal = postcontent_gal.substring(0, numchars_gal);

var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");

postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);

document.write(postcontent_gal + '...');

document.write('</span>')

}

}

document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="120px" height="120"/></a></div>');

document.write('</li>');

}

document.write('</ul>');




}

</script>

<!-- поменять адрес на свой (УРЛ БЛОГА) -->

<script src="http://УРЛ БЛОГА/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>

<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

$("#slider").easySlider({pause: 5000,

nextId: 'next',

prevId: 'prev', nextText: ' Следующее &#9658;', prevText: '&#9668; Предыдущее ',

auto: true,

continuous: true

});

});

//]]>

</script></div>

Для более продвинутых и искушённых пользователей бесплатной платформы по созданию блогов Blogger, если вам понравился данный вид слайдера-ротатора,предлагаю более профессиональный подход к внедрению кода скрипта в шаблон блога. Во первых код CSS копируем и устанавливаем раздел для стилей, второе находим в шаблоне такую строку

 <div class='post-footer-line post-footer-line-1'>

и после неё устанавливаем весь код скрипта целиком,предварительно заключив весь код в контейнер такого вида

<b:if cond='data:blog.pageType == &quot;item&quot;'>ваш код</b:if>.

Данный контейнер будет запрещать показ слайдера на главной и на статичных страницах и разрешать только на страницах постов.

Но и это ещё не всё.Конфигурация шаблона Блогспот не предусматривает кардинальных изменений и добавлений различных вариантов скриптов в шаблон блога без предварительной конвертации.Для этого следует скопировать код НТМЛ и Ява скрипт и загрузить в конвертер для кода.В результате форматирования на выходе получиться код пригодный к установке в шаблон блога. Не смотрите на непрезентабельный вид кода,именно так его видит Блоггер.

Настройки слайдера-ротатора показа случайных постов.

Основные настройки CSS внесены непосредственно в код и подписаны,так что разобраться не составит труда. Настройки в коде скрипта,которые можно изменить это:

pause: 5000 -время показа анонса на странице
width="125px" height="125" -размер миниатюры фото
var numchars_gal   = 150;-количество символов в анонсе
Ну в принципе и всё,кому что неясно пишите в комментариях.

Оформление блоков для текста,цитат,кода.
Всплывающий баннер поверх страницы.
Pop-up или модальное окно 18+
Контекстная реклама для всех.Цена клика от пяти рублей.
Как добавить форум на блог Blogspot
Креативные эффекты для фото.
Самая прибыльная партнёрка

Конвертер кода для Блоггер