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 = "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-канал


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

19 коммент.:

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

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

Unknown

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

Вера Борок

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

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

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

Любовь

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

Вера Борок

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

Любовь

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

Flash Magic

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

CryptoWizard101

Malatya
Kırıkkale
Aksaray
Bitlis
Manisa
M5EVİ

NeonMatrix777

Afyon
Antalya
Erzurum
Mersin
izmir
İ3KOSV

BinaryBardess

çankırı evden eve nakliyat
kırşehir evden eve nakliyat
kütahya evden eve nakliyat
hakkari evden eve nakliyat
antalya evden eve nakliyat
YZG

A412CJaylene3D887

3C5E1
Muş Evden Eve Nakliyat
Hakkari Lojistik
Van Şehirler Arası Nakliyat
Edirne Evden Eve Nakliyat
Elazığ Evden Eve Nakliyat
Kırıkkale Evden Eve Nakliyat
Kayseri Evden Eve Nakliyat
Çerkezköy Organizasyon
Trabzon Şehirler Arası Nakliyat

1BD07Sariah77593

73764
Iğdır Şehir İçi Nakliyat
Karaman Parça Eşya Taşıma
Aydın Şehir İçi Nakliyat
İzmir Evden Eve Nakliyat
Manisa Evden Eve Nakliyat
Mardin Şehir İçi Nakliyat
Şırnak Lojistik
Kastamonu Parça Eşya Taşıma
Pursaklar Fayans Ustası

B0E97Sergio57981

49033
Artvin Lojistik
Çerkezköy Yol Yardım
Silivri Cam Balkon
Erzincan Evden Eve Nakliyat
Sinop Lojistik
Tekirdağ Şehirler Arası Nakliyat
Bitlis Şehirler Arası Nakliyat
Hatay Lojistik
Bolu Şehirler Arası Nakliyat

7079EGary83AE3

DBCCF
giresun yabancı görüntülü sohbet uygulamaları
mobil sohbet sitesi
van rastgele sohbet odaları
trabzon görüntülü sohbet
izmir canlı sohbet ücretsiz
tekirdağ rastgele sohbet
maraş telefonda kızlarla sohbet
aydın bedava görüntülü sohbet
burdur rastgele sohbet

837B9LauraBF6DD

71D2C
kastamonu sohbet sitesi
edirne canli sohbet
kilis random görüntülü sohbet
balıkesir tamamen ücretsiz sohbet siteleri
bedava sohbet uygulamaları
en iyi görüntülü sohbet uygulamaları
muğla kızlarla canlı sohbet
mardin sohbet chat
afyon canlı sohbet et

02BC6Angela63C86

F5F48
ısparta Sesli Sohbet Odası
kayseri parasız görüntülü sohbet
sesli mobil sohbet
Aydın Sesli Sohbet Odası
ısparta kadınlarla görüntülü sohbet
karabük rastgele görüntülü sohbet uygulamaları
bolu telefonda sohbet
yalova en iyi ücretsiz sohbet siteleri
antep sesli sohbet mobil

D6A6COrion517FE

AA203
bartın kadınlarla ücretsiz sohbet
Ardahan Canlı Sohbet Siteleri Ücretsiz
görüntülü sohbet odaları
Diyarbakır Ücretsiz Sohbet Uygulamaları
sinop görüntülü sohbet siteleri ücretsiz
burdur rastgele sohbet odaları
mobil sohbet sitesi
ücretsiz görüntülü sohbet
sohbet chat

06F68Deon002BC

B3C56
shapeshift
satoshivm
eigenlayer
pudgy penguins
pancakeswap
layerzero
DefiLlama
uwulend finance
sushiswap

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

Related Posts Plugin for WordPress, Blogger...