Оглавление блога

Я не собиралась делать Оглавление. Блог молодой, постов мало, да еще установила симпатичный гаджет с Популярными сообщениями. 

А недавно столкнулась с тем, что знакомая не смогла найти мой ролик. Несведущим невдомек что сайт или блог - это не только одна страница в интернете. 

Возможно, кому-то это покажется смешным, а меня заставило задуматься. Но, как говорится, "на ловца и зверь бежит". Попалась статья как сделать оглавление на Blogger.  Понравилось.

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

«Глаза боятся, а руки делают». Приступаем.

Заходим в Панель инструментов --- Новое сообщение --- Изменить страницы --- Создать страницу --- Вводим название.    В окне "Изменить HTML" вводим код:

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

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

  .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, #cc9999, #cc9999);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#cc9999), to(#cc9999));
    filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#cc9999', EndColorStr='#cc9999');
    border: 1px solid #996666;
  }

  #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://veraborok.blogspot.com"; // адрес блога
var minpaginas = 5; // минимальное количество страниц
var maxpaginas = 10; // максимальное количество страниц
var imgxdefecto = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNIQ5afY2LRCtKhhf_ZEG0CNR8LTZAK4VoTTBn4GK-6W9wTkrM8bJlOoWJMMyT_m8EB7EvrZKK6NhtWml8EWufM4SJBFkEQtOnr5hVRgweHU20z4isIA7UNDROV3gr6vSjNc8XqoRWKYuD/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>

Вставлять лучше через блокнот, меньше неожиданностей.  Жирным шрифтом выделен адрес блога, который  нужно поменять на свой и количество записей на странице. Я оставила 60, возможно и у меня со временем будет много. 

Если в таком виде вставить и посмотреть в режиме просмотра, то увидите свое Оглавление блога, но цвета прямоугольников будут мои. Если гамма оказалась для вас подходящей, можно все оставить как есть. Но думаю, вы захотите их поменять под дизайн своего блога.

    background   -  фон основного прямоугольника

    border           -  окантовка

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

Одно НО. 

Сохранять код можно только один раз. А для того, чтобы подобрать удачные цвета, перед сохранением нажимайте кнопку "Просмотр". 

Не расстраивайтесь если опубликовали сообщение, а нужно еще что-то поменять. Стираете весь код и вставляете снова. И так - до бесконечности. У меня получилось со второго  раза. Только при корректировке кода не потеряйте кавычки, пробелы и прочую мелочь.

Код написан так, что если позволяет место, будет три колонки прямоугольников. Мало места - две колонки.

Все получится!!!

Код позаимствовала у Натальи .  Загляните к ней в гости, найдете много интересного.

Можно проще. 

Оглавление будет показываться в сайтбаре с прокруткой  и не занимать много места.

Дизайн (элементы страницы) - Добавить гаджет (HTML/JavaScript ) и вставляем  код:

<div style="overflow:auto; height:80px; width:500px; padding:8px; border:1px solid #ccc;"><script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js">

</script><script src="http://ВАШ БЛОГ/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc">

</script></div >

Сохраняем и любуемся.

Приглашаю Вас присоединиться ко мне в следующих сервисах:


Чтобы автоматически узнавать об обновлениях блога, подпишитесь на  RSS-канал

Понравилась статья? Поделитесь с друзьями.