Перечень всех записей по одному ярлыку на отдельной странице

12.01.2013

В предыдущей статье я писала о том, как можно сделать оглавление блога с графикой. При этом будут выводиться все записи блога на странице с маленькими превью картинок статей и названием статей. Выглядит все это красиво, но нет разделения по темам, ярлыкам, как, например, в текстовом варианте карты сайта. Зато благодаря коду есть еще замечательная возможность вывести на одной странице все записи блога, но по ОДНОМУ ярлыку.


Для реализации этого:

1) создаем новую страницу в блоге на Blogger.

2) Переходим в режим редактирования не текстовый, а HTML.

3) Далее скопируйте вот этот код:

<style>
  #resultados { /* общий блок */ }
  #loadingscript { /* текст "Загрузка" */ }

  .paginaposts { /* каждого прямоугольника */
    border: 1px solid #FF00CC;
    float: left;
    height: 50px;
    margin: 1px;
    padding: 5px;
    width: 230px;
    background: #faebee;
  }

  .paginaposts a { /* ссылки */
    color: #000000;
    display: block;
    font-size: 11px;
    text-decoration: none;
    text-indent: 0px;
  }

  .paginaposts img { /* изображения */
    float: left;
    height: 40px;
    width: 40px;
    padding: 2px;
    margin: 2px 5px 2px 2px;
  }

  .paginaposts h6 { /* заголовки */
    height: 45px;
    margin: 0;
    font-weight: normal;
  }

  .paginaposts:hover { /* эффект при наведении мышки */
    background-image: -moz-linear-gradient(100% 100% 90deg, #fbcbf0, #fbcbf0);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#fbcbf0), to(#fbcbf0));
    filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#fbcbf0', EndColorStr='#fbcbf0');
    border: 1px solid #CC00CC;
  }

  #paginacion { /* нижний контейнер с количеством записей */
    color: #bbb;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    height: 35px;
    line-height: 28px;
    padding: 20px 0;
    text-align: center;
  }

  #paginacion span, #paginacion a { /* постраничная навигация */
    border: 1px solid #ddcca3;
    color: #d6a87a;
    display: inline-block;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    margin: 0 2px;
    padding: 0 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-indent: 0px;
  }

  #paginacion span.actual { /* текущая страница */
    color: #000080;
    padding: 0 5px;
    -moz-box-shadow: 0 0 30px #fff inset;
    -webkit-box-shadow: 0 0 30px #fff inset;
    box-shadow: 0 0 30px #fff inset;
  }

  #paginacion a:hover { /* наведение на эти ссылки */
    color: #fff;
    -moz-box-shadow: 0 0 20px #666 inset;
    -webkit-box-shadow: 0 0 20px #666 inset;
    box-shadow: 0 0 20px #666 inset;
    text-decoration: none;
  }

  #paginacion .antesdespues { border: none; }
  #paginacion .antesdespues:hover {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  #paginacion span.deshabilitado { /* следующие */
    border: none;
    color: #1621c4;
  }

  #totales {text-align:center;}

</style><script type="text/javascript">
//<![CDATA[
var postporpagina = 60; // число записей на странице
var urlsitio = "http://samasajt.blogspot.com"; // адрес блога
var minpaginas = 5; // минимальное количество страниц
var maxpaginas = 10; // максимальное количество страниц
var imgxdefecto = "http://3.bp.blogspot.com/_hljKDuw-cxQ/SsmfbhHhGrI/AAAAAAAAOU0/vCmT5Y4wzEo/s1600/vagaPlantilla_resumenpostsnoimage.gif"; // адрес изображения, который будет показан при отсутствии картинки в сообщении

var firsttime = 0;
var paginaactual = 1;
var cantidadpaginas = 0;
var cantidadposts = 0;

function showpageposts(json) {
  var entry, posttitle, posturl, postimg;
  var salida = "";

  if(cantidadpaginas==0) {
    cantidadposts = parseInt(json.feed.openSearch$totalResults.$t);
    cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1;
  }

  for (var i = 0; i < postporpagina; i++) {
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i];

    posttitle = entry.title.$t;

    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = imgxdefecto;
    }

    salida += "<div class='paginaposts'>";
    salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
    salida += "</div>";
  }

  document.getElementById("resultados").innerHTML = salida;

  paginacion();
}

function paginacion() {
  contadorP = 0;
  salida = "";

  if(paginaactual>1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual-1) + ")'>следующие</a>";
  } else {
    salida += "<span class='deshabilitado'>следующие</span>";
  }

  if (cantidadpaginas<(maxpaginas+1)) {
    for (contadorP = 1; contadorP <= cantidadpaginas; contadorP++){
      if (contadorP==paginaactual) {
        salida += "<span class='actual'>" + contadorP + "</span>";
      } else {
        salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
      }
    }
  } else if(cantidadpaginas>(maxpaginas-1)) {
    if(paginaactual<minpaginas) {
      for (contadorP=1; contadorP<(maxpaginas-2); contadorP++){
       if (contadorP == paginaactual) {
         salida += "<span class='actual'>" + contadorP + "</span>";
       } else {
         salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
       }
     }
     salida += " ... ";
     salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
     salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else if(cantidadpaginas-(minpaginas-1)>paginaactual&&paginaactual>(minpaginas-1)) {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=paginaactual-2; contadorP<=paginaactual+2; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
      salida += " ... ";
      salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
      salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=cantidadpaginas-(minpaginas+1); contadorP<=cantidadpaginas; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
    }
  }

  if (paginaactual<contadorP-1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual+1) + ")'>предыдущие</a>";
  } else {
    salida += "<span class='deshabilitado'>предыдущие</span>";
  }

  document.getElementById("paginacion").innerHTML = salida;

  var iniciopagina = (paginaactual * postporpagina) - (postporpagina - 1);
  var finalpagina = paginaactual * postporpagina;
  var totales = "Всего опубликовано сообщений: " + cantidadposts + " - из них показано " + iniciopagina + "-" + finalpagina + " записей";
  document.getElementById("totales").innerHTML = totales;
}

function incluirscript(pagina) {

  if(firsttime==1) {removerscript();}

  document.getElementById("resultados").innerHTML = "<div id='loadingscript'>загрузка ...</div>";
  document.getElementById("paginacion").innerHTML = "";
  document.getElementById("totales").innerHTML = "";

  var iniciopagina = (pagina * postporpagina) - (postporpagina - 1);

  var archivo = urlsitio + "/feeds/posts/default/-/название_ярлыка?start-index=" + iniciopagina;
  archivo += "&max-results=" + postporpagina;
  archivo += "&orderby=published&alt=json-in-script&callback=showpageposts";

  var nuevo = document.createElement('script');
  nuevo.setAttribute('type', 'text/javascript');
  nuevo.setAttribute('src', archivo);
  nuevo.setAttribute('id', 'TEMPORAL');
  document.getElementsByTagName('head')[0].appendChild(nuevo);

  firsttime = 1;
  paginaactual = pagina;
}

function removerscript() {
  var el = document.getElementById("TEMPORAL");
  var padre = el.parentNode;
  padre.removeChild(el);
}

onload=function() { incluirscript(1); }
//]]>
</script>
<div id="resultados" ></div>
<div style="clear:both;"></div>
<div id="paginacion"></div>
<div id="totales"></div>

4) Вставляем этот код на созданную новую страницу.

5) В строке 
var urlsitio = "http://samasajt.blogspot.com"; // адрес блога
 заменяем ссылку на Ваш блог.

6) Находим строку: 
var archivo = urlsitio + "/feeds/posts/default/-/название_ярлыка?start-index=" + iniciopagina;
 Аккуратно стираем выделенные красным цветом слова "название ярлыка" и пишем названия ОДНОГО ярлыка из Вашего блога.

7) Нажимаем кнопку Просмотр, ждем, когда загрузится страница. Если все хорошо - сохраняем (кнопка Сохранить).

Первоначальный код я взяла на этом сайте, поработав с цветовым оформлением.

 Я решила на отдельную страницу вывести все статьи с ярлыком гаджет. Пример можно посмотреть на странице Все гаджеты для Blogger.

33 комментария:

  1. Большущее вам спасибо! Очень понятно и просто все объяснили! Огромная признательность за то, что помогаете тем, кто далек от CSS тоже украсить свой блог.

    ОтветитьУдалить
  2. Спасибо большое!
    Все очень понятно!
    Я всё сделала, но на странице, которую я добавила, пишется слово Загрузка... И так уже около часа:( Что делать?

    ОтветитьУдалить
  3. Уже даже опубликовала страницу, несколько раз обновила, посмотрела на другом компьютере, но ничего:(

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! Скрипт может заработать, но не сразу. Видимо, долго обрабатывается Google. Либо идет конфликт с шаблоном.

      Удалить
  4. Ответы
    1. А Вы не просмотр нажмите, а сразу"Обновить"

      Удалить
  5. Спасибо огромное! А не подскажете, что надо поменять, чтоб розовый фон поменять на голубой в прямоугольничках (а то не вписывается в дизайн))

    ОтветитьУдалить
  6. Спасибо, у кого не получилось может потому- что вам в коде надо поменять в этом месте " var minpaginas = 5; // минимальное количество страниц
    var maxpaginas = 10; // максимальное количество страниц " цифры на ваши я поменяла на 2 и 20 и все поучилось!

    ОтветитьУдалить
    Ответы
    1. Спасибо за подсказку, Марина ))

      Удалить
  7. Большое спасибо! Сделала, пара страниц уже работает, остальные пока грузятся. А как теперь цветовое решение поменять, а то у меня фон другой и гамма тоже. Спасибо!

    ОтветитьУдалить
  8. Спасибо большое за ваш блог! Для меня это настольная книга. Подскажите, пожалуйста, в чем может быть проблема: сделала, все как вы написали здесь, но на странице пропала левая колонка, а правая переместилась вниз http://myhobbi-rukodelie.blogspot.com/p/resultados-loadingscript.html

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Попробуйте в дизайнере шаблонов переместить боковую колонку.

      Удалить
    2. Посмотрела Главную страницу Вашего блога - там все нормально отображается. Видимо, с шаблоном код не хочет взаимодействовать(((

      Удалить
    3. Спасибо, у меня наконец-то получилось. Оказалось, все просто. Когда создавала страницу, у меня высветился код HTML, я вставляла ваш код после, а надо было между

      Удалить
  9. Этот комментарий был удален автором.

    ОтветитьУдалить
  10. Огромное спасибо за совет и Ваш энтузиазм! Получилось!

    ОтветитьУдалить
    Ответы
    1. Сначала обрадовалась, что получилось, а потом возникли вопросы:
      1. Все получилось, если нажимаешь просмотр только самой страницы. Причем на ней отображается только последнее сообщение, а предыдущих нет.
      2. Если нажать просмотр блога, то на нужной странице этих сообщений нет, а отображаются они только на главной.
      Что не так? Заранее огромное спасибо за ответ!

      Удалить
    2. Ссылку на Ваш блог напишите

      Удалить
    3. Мария, спасибо за участие! За это время я еще раз проверила, изменила мин.количество страниц на 2 - все равно не получается. Поэтому сделала очень примитивно - картинки с подписями в виде ссылок на сообщения. И даже в таком варианте при просмотре блога эта страница не всегда открывается. http://ecospil.blogspot.com/p/blog-page_17.html

      Удалить
    4. Проблема из-за того, что у Вас динамический шаблон блога. С такими шаблонами многие гаджеты и "фишки" не работают :(

      Удалить
    5. Мария! Огромное спасибо!!!!!!!! Изменила шаблон - заработали страницы и кнопки соц.сетей, которые устанавливала тоже по Вашей инструкции!!!

      Удалить
  11. Здравствуйте, Мария!
    Не подскажете ли, в чём причина проблемы? Страницы "повесила" наверх, а список моих сообщений по ярлыку не хотят на страницы "ложиться". Всё делала, как Вы описали. http://d-elye.blogspot.ru/

    ОтветитьУдалить
  12. Здравствуйте Мария!
    Скажите пожалуйста как поменять размер заголовка

    ОтветитьУдалить
  13. Гениально! Всё работает. Спасибо Вам, Мария!

    ОтветитьУдалить
  14. А нет возможности выводить эти сообщения прям в том же полноформатном виде, как они на главной странице?видела у некоторых девушек,но они не хотят раскрывать секрет.

    ОтветитьУдалить
  15. Этот комментарий был удален автором.

    ОтветитьУдалить
  16. Идея блестящая, автору спасибо, но скрипт очень капризный.
    Заставил работать при следующем
    1) Совет Марина Меденцева29.01.15, 20:23

    Спасибо, у кого не получилось может потому- что вам в коде надо поменять в этом месте " var minpaginas = 5; // минимальное количество страниц
    var maxpaginas = 10; // максимальное количество страниц " цифры на ваши я поменяла на 2 и 20 и все поучилось! (Спс за подсказку)
    2) Нельзя включать режим страница, а обновлять в реиме HTML
    3) Слетает про работе с гаджетом Страницы. Например добавил новую страницу и вывел ее показ в гаджет.
    После этого требует копировки и новой установки. Что там прописывается так и не понял. Но если все настроить и сделать его последним и ничего не трогать - дальше работает и хорошо)))

    ОтветитьУдалить
  17. Захотелось все то же самое но с сортировкой по алфавиту. Есть ли возможность?

    ОтветитьУдалить
    Ответы
    1. Можно попробовать обратиться к автору кода, которым я не являюсь...

      Удалить
  18. Этот комментарий был удален автором.

    ОтветитьУдалить

Загляните и на другие страницы ^