Приложение 1: Оглавление Blogger

Ранее я уже писала на тему оформления "Содержания блога", но здесь мне на глаза попалась более интересная реализация.

Вариант 1

По-прежнему создаём отдельную страницу, куда на вкладке "Изменить HTML" вставляем код:

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

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

  .paginaposts a { /* ссылки */
    color: #61512c;
    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, #faf838, #fbfab3);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#faf838), to(#fbfab3));
    filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#fbfab3', EndColorStr='#faf838');
    border: 1px solid #faf838;
  }

  #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: #ff9202;
    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: #c46f16;
  }

  #totales {text-align:center;}

</style><script type="text/javascript">
//<![CDATA[
var postporpagina = 60; // число записей на странице
var urlsitio = "http://shpargalkablog.ru"; // адрес блога
var minpaginas = 5; // минимальное количество страниц 
var maxpaginas = 10; // максимальное количество страниц
var imgxdefecto = "http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX32zjrF3-0qRUB48RXbBIYic_CUTml4kP8t6GsexO2NwZg1PFQUw-7PaH8fi5MZNBQfpb10cl0qTXZnEjnZ3gdZSN1p-JakTdmsBI2bvWiNTjEUnJgYfl6dOq0aPeBzIwqYZ-THQlAc3d/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>

Наиболее интересные моменты выделены жирным шрифтом, а именно адрес блога, который нужно поменять на свой и часть кода "/feeds/posts/default?start-index=". В данном примере будут выводится все заголовки блога, но если мы хотим разнести статьи по разделам (в нашем случае по ярлыкам), то создаём отдельные страницы для каждого, а строку выше заменяем на "/feeds/posts/default/-/название_ярлыка?start-index=".

И последний шаг: уберём боковую панель с этой страницы.

образец.

Вариант 2

Скрипт аналогичен, изменим немного стили, опираясь на статью про колонки CSS.

<style>
  #resultados { /* общий блок */ 
    -moz-column-count: 3;
    -moz-column-gap: 0;
    -webkit-column-count: 3;
    -webkit-column-gap: 0;
    column-count: 3;
    column-gap: 0;
    text-indent: 0px;
  }

  #loadingscript { /* текст "Загрузка" */ }

  .paginaposts { /* каждого прямоугольника */
    position: relative;
    text-align: center;
  }

  .paginaposts:hover { /* эффект при наведении мышки */ }

  .paginaposts a { /* ссылки */
    text-decoration: none;
  }

  .paginaposts img { /* изображения */
    width: 90% !important;
    background-color: #000;
  }

  .paginaposts:hover img { /* изображения */
    opacity:0;filter:alpha(opacity=0);
  }

  .paginaposts b { /* заголовки */
    font-size: 18px;
    text-shadow: 1px 1px 1px #ccc;
    height: 100%; width: 100%;
    opacity:0;filter:alpha(opacity=0);
    position:absolute; 
    left: 0; top: 0; 
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;transition: all 1s;
    vertical-align:middle;
  }

  .paginaposts:hover b { /* заголовки */
    opacity:1;filter:alpha(opacity=1);
   }

  #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: #ff9202;
    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: #c46f16;
  }

  #totales {text-align:center;}

</style><script type="text/javascript">
//<![CDATA[
var postporpagina = 60; // число записей на странице
var urlsitio = "http://shpargalkablog.ru"; // адрес блога
var minpaginas = 5; // минимальное количество страниц 
var maxpaginas = 10; // максимальное количество страниц
var imgxdefecto = "http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX32zjrF3-0qRUB48RXbBIYic_CUTml4kP8t6GsexO2NwZg1PFQUw-7PaH8fi5MZNBQfpb10cl0qTXZnEjnZ3gdZSN1p-JakTdmsBI2bvWiNTjEUnJgYfl6dOq0aPeBzIwqYZ-THQlAc3d/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;
      postimg = postimg.replace('s72-c','s1600');
    } else {
      postimg = imgxdefecto;
    }

    salida += "<div class='paginaposts'><a href='" + posturl + "' target='_blank'>";
    salida += "<img src='" + postimg + "' />";
    salida += "<b>" + posttitle + "</b>";
    salida += "</a></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>

образец. Источник: 1,2