Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)
Сегодня я расскажу, как установить самый лучший слайдер (ротатор контента) на Блогспот, Blogger. Почему самый лучший? Да потому, что я перерыл массу источников и остановился на этом варианте. © blogodel.com
Какими же преимуществами обладает этот слайдер перед другими?
Самое главное преимущество, он показывает все статьи вашего блога (а не только максимально 10 одних и тех же, как Вордпресс). Посты появляются рандомно, то есть с открытием каждой новой страницы читатель видит уже другой пост, с которого начинается перелистывание.
© blogodel.com
За основу я взял easySlider, где добавил "размеры" картинки и установил регулировку паузы. По моей просьбе aldous, автор замечательного блога Blogger не для чайников оформил заголовки страниц в слайдере ссылками и таким образом появился ротатор контента, который вы видите на моем блоге. © blogodel.com
Какими же преимуществами обладает этот слайдер перед другими?
Самое главное преимущество, он показывает все статьи вашего блога (а не только максимально 10 одних и тех же, как Вордпресс). Посты появляются рандомно, то есть с открытием каждой новой страницы читатель видит уже другой пост, с которого начинается перелистывание.
© blogodel.com
За основу я взял easySlider, где добавил "размеры" картинки и установил регулировку паузы. По моей просьбе aldous, автор замечательного блога Blogger не для чайников оформил заголовки страниц в слайдере ссылками и таким образом появился ротатор контента, который вы видите на моем блоге. © blogodel.com
Это уже третья редакция поста. Я три раза переделывал код! Изначальная идея опубликовать коды слайдера с этого блога, не увенчалась успехом!
Размеры у всех разные и поэтому от стрелочек пришлось отказаться! Вместо стрелочек управление в ввиде слов: "предыдущее", "следующее", которые на размеры не влияют.
Зато, вся процедура существенно упростилась и вместо трех скриптов теперь один, а так же отпала необходимость "лезть" в шаблон!
Демо можно посмотреть здесь:
Размеры у всех разные и поэтому от стрелочек пришлось отказаться! Вместо стрелочек управление в ввиде слов: "предыдущее", "следующее", которые на размеры не влияют.
Зато, вся процедура существенно упростилась и вместо трех скриптов теперь один, а так же отпала необходимость "лезть" в шаблон!
Демо можно посмотреть здесь:
http://blogodel-test.blogspot.com/
Сразу публикую параметры кода: там где маркировано красным, будет адрес вашего блога.
<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: ' Следующее ►', prevText: '◄ Предыдущее ',
auto: true,
continuous: true
});
});
//]]>
</script>
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: ' Следующее ►', prevText: '◄ Предыдущее ',
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: ' Следующее ►', prevText: '◄ Предыдущее ',
auto: true,
continuous: true
});
});
//]]>
</script>
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: ' Следующее ►', prevText: '◄ Предыдущее ',
auto: true,
continuous: true
});
});
//]]>
</script>
Дополнение: маркировка, это длинна анонса, маркировка - скорость смены анонса. Маркировка и так же такой фон - ширина элементов слайдера и картинок.
Внимание! Если у вас уже установлены динамические виджеты с jquery, со скриптом вида (указан в коде ЖЕЛТЫМ фоном):
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
то слайдер может не пойти. Обратитесь в комментариях, нужно будет в одном из виджетов этот скрипт убрать, так как он может быть применен только один раз на сайте!
