Будь в курсе событий!

07.10.2013

Агрегатор новостей,(Слайдер) для вашего сайта.

6 comments
Сегодняшний учебник хочу посвятить рассказу об установке, и настройке такой замечательной вещи как слайдер. Примечателен он тем то что это не простой слайдер, а слайдер  агрегатор ваших новостей. Это значит что данный гаджет будет аккумулировать новости вашего сайта , все ваши статьи что есть у вас на на вашем веб ресурсе будут показывается в нем, и это очень удобно для пользователей. По мимо того вы сами можете просматривать свои посты нажатием на кнопки,  ну и самое главное и необходимое то что данный слайдер делает пере направление при нажатии на какую либо новость что появилась в нем. Что бы долго о нем не рассказывать я вам его лучше покажу , внешний вид у него такой.Данный виджет, гаджет был  позаимоствован у товарища 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: ' Следующие посты &#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://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: ' Следующие посты &#9658;', prevText: '&#9668;Предыдущие посты',                      
 auto: true,
 continuous: true
 });
});
//]]>
</script>


Теперь  апр те параметры что я отметил в коде, и так:  что помечено оранжевым фоном и бледно-красным  - обозначают ширину слайдера, и ширину картинок отображеемых в нем.

Сиреневый цвет- это длина текста (постов) отображаемого в вашем слайдере.

 Ярко - зеленый -  тут надо заменить мой веб адрес на ваш.

Светло- желтый - это скорость смены  новостей в вашем слайдере.

Темно-серый - тут вы можете изменить название кнопок например на- ( вперед- назад ).


Если у вас что то не получится пишите уважаемые читатели, и так же подписывайтесь вас ждет еще много интересного).

6 комментариев :

  1. Доброго времени суток.

    Не могли бы помочь.

    как сделать дофоллов блог на платформе блоггера?и чтоб через определенное количество комментариев ссылка индексировалось.На вордпресс инфо валом а на блоггер вообще нет.


    Был бы благодарен,если знаете ответ на данную проблему


    ОтветитьУдалить
  2. Тимур здравствуйте, сейчас еще несколько способов попробую и скажу.

    ОтветитьУдалить
  3. Андрей Вы написали ответ мне ,но куда ссылаться не написано я про те два шаблона которые писали вы и что менять в коде не написано не могли бы заново ответить

    ОтветитьУдалить
  4. Найдите код в шаблоне <a expr:href='data:comment.authorUrl' rel='nofollow'>


    И замените его на <a expr:href='data:comment.authorUrl' rel='dofollow'>

    ОтветитьУдалить
  5. Делал не помогает.
    А возможно удалить свой родной блок комментариев и загрузить другой?

    ОтветитьУдалить
    Ответы
    1. Здравсттвуйте тимкр,заходите почаще на мою страничку карта сайта там все виджеты есть..Надпись выше,и второе у нас все возможно) вот вам статья ноомер раз http://www.zarnakoom.com/2013/08/blogger-facebookgoogle.html#axzz2zGUllbKe а вот и номер 2 http://www.zarnakoom.com/2013/08/blogger-facebookgoogle_24.html#axzz2zGUllbKe в них вы найдете ответ на ваш вопрос.


      Удалить

© 2012-2017 Cash's from program