Как вывести статьи определённого ярлыка на отдельную статичную страницу BLOGGER

Привет, друзья. Хочу поделиться с вами, как вывести статьи определённого ярлыка с картинкой - превью и кратким анонсом на отдельную статичную страницу. Давненько у меня ничего не было про ярлыки в блоге. Но поскольку они являются неотъемлемой частью любого сайта, стоит отдать им должное внимание.

Многие сначала по незнанию создают просто огромное количество этих ярлыков (категорий, рубрик), что и сами не разберутся потом в этом списке, и читателя запутают. К тому же сам внешний вид гаджета превращается в длиннющее полотно ссылок, от которого у пользователя глаза разбегаются. Не стоит этого делать. Обратите внимание на количество и качество ваших ярлыков. Попробуйте их упорядочить, убрать лишние, как -то сгруппировать. В помощь вам будет эта статья.

Можно сделать список рубрик с полосой прокрутки для более компактного вида. Или обойтись просто страницей, на которую осуществляется переход при клике на определённый ярлык. По умолчанию настроено отображение только 20 постов на одной странице. Но легко увеличить их количество. Об этом почитайте здесь.

И по сегодняшней теме - попробуем красиво показать все статьи определённого ярлыка во вкладке меню на отдельной странице. В результате будут отображены посты именно этой категории с картинками и анонсом к ним. Почему бы и нет. Хорошая навигация по сайту ещё никогда не мешала.

Посмотрите сразу как это будет выглядеть на тестовом блоге. В качестве примера я взяла сообщения под ярлыком <<Картинки>>. Пусть вас не смущает отображаемое количество. Это всего лишь тестовый блог.

Демонстрация

Установить такой вариант совсем просто. Скопируйте для удобства следующий код в блокнот, а настройки разберём ниже

<style>
  #resultados {  }
  #loadingscript {  }

  /* стили для отдельного блока*/
.paginaposts {
    border: 2px solid #528B8B;
    float: left;
    height: 80px;
    margin: 1px;
    padding: 5px;
    width: 230px;
    background: #FFFAFA;
  }

/* стили для ссылок */
  .paginaposts a {
    color: #00688B;
    display: block;
    font-size: 12px;
    text-decoration: none;
    text-indent: 0px;
  }

  /*для картинок */
.paginaposts img {
    float: left;
    height: 60px;
    width: 60px;
    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, #D3D3D3, #D3D3D3);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#D3D3D3), to(#D3D3D3));
    filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D3D3D3', EndColorStr='#D3D3D3');
    border: 2px solid #CC00CC;
  }

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

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

  #paginacion span.actual {
    color: #778899;
    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: #778899;
  }

  #totales {text-align:center;}

</style><script type="text/javascript">
//<![CDATA[
var postporpagina = 50; // число записей на странице
var urlsitio = "http://www.shpargalochki.ru"; // адрес блога
var minpaginas = 5; // минимальное количество страниц
var maxpaginas = 10; // максимальное количество страниц
var imgxdefecto = "https://upload.wikimedia.org/wikipedia/ru/thumb/a/ac/No_image_available.svg/600px-No_image_available.svg.png"; // адрес изображения если картинки нет
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>

Что нужно поменять - 

http://www.shpargalochki.ru  - вставьте адрес вашего блога без слеша (/).

картинки - название вашего ярлыка. Будьте внимательны ко всем символам в коде.

https://upload.wikimedia.org/wikipedia/ru/thumb/a/ac/No_image_available.svg/600px-No_image_available.svg.png - адрес картинки если по каким - то причинам картинка не отображается (по необходимости).

Все другие настройки внешнего вида отметила комментариями в самом коде. Можно копировать и устанавливать вместе с ними. 

Сейчас создаём новую страницу. Админпанель - страницы - создать. Обзываем её как хотим. Переходим в редакторе в режим HTML. Чтобы не запутаться убираем всё, чтобы страница была пустая. 

Вставляем готовый код и нажимаем публикация. Бежим и смотрим что у нас получилось. Вуаля... мы это сделали.

Всем удачи и до новых встреч. 

Получайте новые сообщения с блога прямо на почту

Введите Ваш email