Самый лучший слайдер (ротатор контента) для Blogger, Блогспот


Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)

Сегодня я расскажу, как установить самый лучший слайдер (ротатор контента) на Блогспот, Blogger. Почему самый лучший? Да потому, что я перерыл массу источников и остановился на этом варианте.  © blogodel.com 

Какими же преимуществами обладает этот слайдер перед другими?
Самое главное преимущество, он показывает все статьи вашего блога (а не только максимально 10 одних и тех же, как Вордпресс). Посты появляются рандомно, то есть с открытием каждой новой страницы читатель видит уже другой пост, с которого начинается перелистывание.
 © blogodel.com 

За основу я взял easySlider, где добавил "размеры" картинки и установил регулировку паузы. По моей просьбе aldous, автор замечательного блога  Blogger не для чайников оформил заголовки страниц в слайдере ссылками и таким образом появился ротатор контента, который вы видите на моем блоге.  © blogodel.com 


Это уже третья редакция поста. Я три раза переделывал код! Изначальная идея опубликовать коды слайдера с этого блога, не увенчалась успехом!
Размеры у всех разные и поэтому от стрелочек пришлось отказаться! Вместо стрелочек управление в ввиде слов: "предыдущее", "следующее", которые на размеры не влияют.
Зато, вся процедура существенно упростилась и вместо трех скриптов теперь один, а так же отпала необходимость "лезть" в шаблон!

                   Демо можно посмотреть здесь: 
                     http://blogodel-test.blogspot.com/
  © blogodel.com 
Итак начнем! Заходим в Дизайн и вставляем скрипт в "Добавить гаджет - HTML/JavaScript".
Сразу публикую параметры кода: там где маркировано красным, будет адрес вашего блога. 

<style>#slide-container {
height:165px;
position:relative;
width:530px;
}
#slider {
height:165px;
left:24px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:530px;
}
.slide-desc {


padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:290px;
z-index:1;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}

}
</style><div id="slider">


<script style="text/javascript">

   var showpostthumbnails_gal  = true;
    var showpostsummary_gal   = true;
 var random_posts         = true;
 var numchars_gal   = 210;
 var numposts_gal   = 34;
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 = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.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="220px" height="165"/></a></div>');
        document.write('</li>');
    }
 document.write('</ul>');

}
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://blogodel.com/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: 4000,
 nextId: 'next',
prevId: 'prev', nextText: ' Следующее &#9658;', prevText: '&#9668; Предыдущее ',                        
 auto: true,
 continuous: true
 });
});
//]]>
</script>


Код без скрипта jquery (для тех у кого не "идет" предыдущий код)
<style>#slide-container {
height:165px;
position:relative;
width:530px;
}
#slider {
height:165px;
left:24px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:530px;
}
.slide-desc {


padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:290px;
z-index:1;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}

}
</style><div id="slider">


<script style="text/javascript">

   var showpostthumbnails_gal  = true;
    var showpostsummary_gal   = true;
 var random_posts         = true;
 var numchars_gal   = 210;
 var numposts_gal   = 34;
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 = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.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="220px" height="165"/></a></div>');
        document.write('</li>');
    }
 document.write('</ul>');

}
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://russkiyiliteratura.blogspot.ru/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></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: 4000,
 nextId: 'next',
prevId: 'prev', nextText: ' Следующее &#9658;', prevText: '&#9668; Предыдущее ',                        
 auto: true,
 continuous: true
 });
});
//]]>
</script>


Дополнение: маркировка, это длинна анонса, маркировка - скорость смены анонса. Маркировка и так же такой фон - ширина элементов слайдера и картинок.
Внимание! Если у вас уже установлены динамические виджеты с jquery, со скриптом вида (указан в коде ЖЕЛТЫМ фоном):
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
то слайдер может не пойти. Обратитесь в комментариях, нужно будет в одном из виджетов этот скрипт убрать, так как он может быть применен только один раз на сайте!


111 коммент.:

Boris
Павел
Justus
Boris
Justus
Boris
Justus
Boris
Boris
Justus
Boris
Justus
Люси
Justus
Светлана Шестопалова
Justus
Сергей
Justus
Сергей
Justus
Сергей
Necro Cannibal
Justus
Necro Cannibal
Justus
Andrey a
Justus
Andrey a
Justus
Andrey a
Justus
Andrey a
Justus
Arkan Artem
Arkan Artem
Калугин Андрей
Justus
Justus
Arkan Artem
Andrey a
Калугин Андрей
Justus
Andrey a
Justus
Валерий Свентковский
Justus
Валерий Свентковский
Justus
Валерий Свентковский
Justus
Arkan Artem
Justus
Arkan Artem
Justus
Arkan Artem
Justus
Arkan Artem
Justus
Arkan Artem
Justus
Arkan Artem
Brem
Justus
Arkan Artem
Justus
Arkan Artem
Justus
Arkan Artem
Arkan Artem
Justus
Arkan Artem
Evgenia Sapaeva
Justus
Лиса Юлія (Lysulka)
Justus
Лиса Юлія (Lysulka)
Justus
Даниил Малкович
Justus
Даниил Малкович
Ольга Строганова
Justus
bibliograf
Justus
bibliograf
bibliograf
Justus
bibliograf
Justus
Даниил Малкович
Gennadiy Balmatov
Justus
Gennadiy Balmatov
Justus
Dark Blogger
Justus
Dark Blogger
Рогозин Роман
Рогозин Роман
Ketrin Fox
Юлия Нечкина
Ketrin Fox
Justus
Oxa
Justus
Oxa
Макарова Галина
Oxa
Аксинья Алексеева
Нина Зоркина
Light Warrior

Отправить комментарий

Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

Доска почета

Плюсани блог!