Сегодняшний учебник хочу посвятить рассказу об установке, и настройке такой замечательной вещи как слайдер. Примечателен он тем то что это не простой слайдер, а слайдер агрегатор ваших новостей. Это значит что данный гаджет будет аккумулировать новости вашего сайта , все ваши статьи что есть у вас на на вашем веб ресурсе будут показывается в нем, и это очень удобно для пользователей. По мимо того вы сами можете просматривать свои посты нажатием на кнопки, ну и самое главное и необходимое то что данный слайдер делает пере направление при нажатии на какую либо новость что появилась в нем. Что бы долго о нем не рассказывать я вам его лучше покажу , внешний вид у него такой.Данный виджет, гаджет был позаимоствован у товарища Justus с веб ресурса blogodel.com .
А теперь собственно код установки, да и напомню самое главное что с этим гаджетом не надо не какой возни, потому как его просто надо вставить в гаджет - HTML/JavaScript .
В этом коде присутствуют компоненты 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://zarnakoom.blogspot.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://zarnakoom.blogspot.com/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>
Теперь апр те параметры что я отметил в коде, и так: что помечено оранжевым фоном и бледно-красным - обозначают ширину слайдера, и ширину картинок отображеемых в нем.
Сиреневый цвет- это длина текста (постов) отображаемого в вашем слайдере.
Ярко - зеленый - тут надо заменить мой веб адрес на ваш.
Светло- желтый - это скорость смены новостей в вашем слайдере.
Темно-серый - тут вы можете изменить название кнопок например на- ( вперед- назад ).
Если у вас что то не получится пишите уважаемые читатели, и так же подписывайтесь вас ждет еще много интересного).
А теперь собственно код установки, да и напомню самое главное что с этим гаджетом не надо не какой возни, потому как его просто надо вставить в гаджет - HTML/JavaScript .
В этом коде присутствуют компоненты 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://zarnakoom.blogspot.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://zarnakoom.blogspot.com/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>
Теперь апр те параметры что я отметил в коде, и так: что помечено оранжевым фоном и бледно-красным - обозначают ширину слайдера, и ширину картинок отображеемых в нем.
Сиреневый цвет- это длина текста (постов) отображаемого в вашем слайдере.
Ярко - зеленый - тут надо заменить мой веб адрес на ваш.
Светло- желтый - это скорость смены новостей в вашем слайдере.
Темно-серый - тут вы можете изменить название кнопок например на- ( вперед- назад ).
Если у вас что то не получится пишите уважаемые читатели, и так же подписывайтесь вас ждет еще много интересного).
Доброго времени суток.
ОтветитьУдалитьНе могли бы помочь.
как сделать дофоллов блог на платформе блоггера?и чтоб через определенное количество комментариев ссылка индексировалось.На вордпресс инфо валом а на блоггер вообще нет.
Был бы благодарен,если знаете ответ на данную проблему
Тимур здравствуйте, сейчас еще несколько способов попробую и скажу.
ОтветитьУдалитьАндрей Вы написали ответ мне ,но куда ссылаться не написано я про те два шаблона которые писали вы и что менять в коде не написано не могли бы заново ответить
ОтветитьУдалитьНайдите код в шаблоне <a expr:href='data:comment.authorUrl' rel='nofollow'>
ОтветитьУдалитьИ замените его на <a expr:href='data:comment.authorUrl' rel='dofollow'>
Делал не помогает.
ОтветитьУдалитьА возможно удалить свой родной блок комментариев и загрузить другой?
Здравсттвуйте тимкр,заходите почаще на мою страничку карта сайта там все виджеты есть..Надпись выше,и второе у нас все возможно) вот вам статья ноомер раз http://www.zarnakoom.com/2013/08/blogger-facebookgoogle.html#axzz2zGUllbKe а вот и номер 2 http://www.zarnakoom.com/2013/08/blogger-facebookgoogle_24.html#axzz2zGUllbKe в них вы найдете ответ на ваш вопрос.
Удалить