Самый лучший слайдер (ротатор контента) для 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
stromanta
Justus
Сергей
Justus
Сергей
Justus
Сергей
Unknown
Justus
Unknown
Justus
andrey
Justus
andrey
Justus
andrey
Justus
andrey
Justus
Artem
Artem
Калугин
Justus
Justus
Artem
andrey
Калугин
Justus
andrey
Justus
Валерий
Justus
Валерий
Justus
Валерий
Justus
Artem
Justus
Artem
Justus
Artem
Justus
Artem
Justus
Artem
Justus
Artem
Konstantin Brem
Justus
Artem
Justus
Artem
Justus
Artem
Artem
Justus
Artem
Евгения Сапаева - гид в Израиле
Justus
Лиса Юлія (Lysulka)
Justus
Лиса Юлія (Lysulka)
Justus
Unknown
Justus
Unknown
Unknown
Justus
Unknown
Justus
Unknown
Unknown
Justus
Unknown
Justus
Unknown
Gennadiy Balmatov
Justus
Gennadiy Balmatov
Justus
Dark Blogger
Justus
Dark Blogger
Роман
Роман
Unknown
Юлия Нечкина
Unknown
Justus
Ocean
Justus
Ocean
Галина
Ocean
Unknown
ninokzor@yandex.ru
Light Knight

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

Дорогие Друзья! К сожалению, по причине здоровья, моя активность по этому блогу будет осуществляться по мере ВОЗМОЖНОСТИ!

Доска почета

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