16 июня 2011 г.

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

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

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

Возможно, кому-то это покажется смешным, а меня заставило задуматься. Но, как говорится, "на ловца и зверь бежит". Попалась статья как сделать оглавление на 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 = "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>




Вставлять лучше через блокнот, меньше неожиданностей.  Жирным шрифтом выделен адрес блога, который  нужно поменять на свой и количество записей на странице. Я оставила 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-канал


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

8 коммент.:

Ирина Чубукова

Спасибо! Все действительно оказалось просто

Наталка Михайлівна Зуб

Скажите пожалуйста, а в оглавлении будут показаны только сообщения с главной страницы? С остальных страниц нет?

Вера Борок

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

"Новый город"

Cпасибо, Вера.

Любовь

Красивое решение. Тоже использую. А как Вы убрали на странице "Содержание" боковые виджеты? Подскажите пожалуйста,тоже хотелось убрать.

Вера Борок

Любовь, если посмотрите на оглавление, то найдете пост "Как убрать сайдбар со страницы в Blogger"

Любовь

Вера, благодарю. Все получилось.

Наталья Мозговая

Здравствуйте Вера! Мне очень понравился этот вариант Карты сайта.
Но он у меня на Блоге никак не хочет проявляться. Пустое место...
Уже несколько раз делала всё как написано, но пустота!!!
И не только у меня так, мои девочки тоже пробовали и ничего...
Может это зависит от шаблона?
Может ни к каждому стандартному шаблону этот вариант карты подходит?
А с Вами можно как-то связаться, чтобы Вы подсказали или помогли?
У меня ещё несколько вопросов. Хотела поставить Список похожих статей на Blogger
и тоже не проявляется.

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...