Красивое оглавление Blogger

Внешне другая реализация оформления "Содержания блога": ОБРАЗЕЦ. "Подготовительный этап" и "Оптимизация title" будут полностью идентичными, немного изменим лишь код.



        <b:if cond='data:blog.searchLabel'>
        <b:loop values='data:posts' var='post'>
         <b:if cond='data:post.thumbnailUrl'>
           <a class='post-miniature' expr:href='data:post.url' expr:style='&quot;background: url(&quot; + data:post.thumbnailUrl + &quot;) no-repeat 50% 50%; color: rgba(0,0,0,0);&quot;'><span><data:post.title/></span></a>
         <b:else/>
           <a class='post-miniature' expr:href='data:post.url'><span><data:post.title/></span></a>
         </b:if>
      </b:loop>
      <b:else/>      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>      </b:if>

CSS стиль и малюсенький JavaScript

До </head> внести

<b:if cond='data:blog.searchLabel'>
<style>
a.post-miniature {
 position: relative;
 overflow: hidden;
 display: inline-block;
 width: 32%;  /* для того, чтобы увеличить количество блоков, расположенных на одной линии, уменьшите значение, например, 19% для 4-х блоков */
 padding-top: 32%;
 background: rgba(100,100,100,.5);
 box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
 text-align: center;
 text-decoration: none;
 transition: .5s;
}
a.post-miniature span {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 max-height: 100%;
 transform: translate(-50%, -50%);
}
a.post-miniature:hover {
 background: rgb(100,100,100) no-repeat 50% 50% !important;
 color: #fff !important;
}
</style>
<script>
function soderzhanie() {
  document.getElementById(&#39;Blog1&#39;).innerHTML = document.getElementById(&#39;Blog1&#39;).innerHTML.replace(/s72-c/g, &#39;s&#39;+document.querySelector(".post-miniature").offsetWidth+&#39;-c&#39;);
}
document.addEventListener( &quot;DOMContentLoaded&quot;, soderzhanie, false );
</script>
</b:if>
в f t
наверх ↑

85 комментариев:

Иван
Хороший скрипт)))! А нельзя сделать так же для ярлыков и на главной?!
NMitra
Этот скрипт для подобных целей не подходит. В вашем случае нужно менять вид отображения сообщений.

Можно, конечно, прикрепить сообщение сверху, а гаджет ярлыков заменить на "Список ссылок".
Иван
Жаль, спасибо)))
Tanka
Красота! Я как раз задумывалась на одной из страниц сделать ссылки на сообщения от одного ярлыка, но времени бы это заняло много.. А так просто и главное быстро:) Спасибо!
Tanka
Пришлось переделывать 3 раза )) Пробовала на тест-блоге (браузер Опера)

- если вставить текст перед кодом, то код не отображается потом при сохранении, просто виден текст на странице
- если внести изменения в код (цвет ссылок и т.п.) после его сохранения, то при последующем просмотре ничего не видно, страница пустая - исчезают рамки с сообщениями на странице
NMitra
Текст перед кодом можно вставлять, просто это нужно делать сразу при публикации страницы, то есть сначала определяемся с текстом, потом с кодом.

Это не ошибка скрипта, а особенности Blogger - он умудряется изменять элементы кода, заменяя одни фрагменты на другие. Поэтому сохранять можно только один раз. А для того, чтобы подобрать удачный стиль я перед сохранением нажимала кнопку "Просмотр". И меняла не весь код, а только фрагмент между

<script type="text/javascript">.....</script>
NMitra
Соглашусь, что весь этот процесс несколько раздражает :(. Но из-за полученного результата я приспособилась.
Tanka
В работающем блоге уже существовала страница, я вот думаю, что просто удалю ее, и создам новую, чтобы с текстом получилось :) То, что это приколы Блоггера я уже поняла )) А вообще отлично получилось :) Спасибо!
NMitra
Я бы страницу не стала удалять. А просто поменяла её содержимое.
Tanka
Не получается, когда добавляю текст исчезает таблица с ссылками
NMitra
Попробовала на тестовом блоге, всё в норме. Нужно написать текст, сохранить, и лишь затем при редактировании страницы добавлять код "Оглавления".
совесть
Спасибо.
Вера Борок
Ура!!! Все получилось.Правда, боковую панель не убрала, но пока постов мало и меня все устраивает. Наталья, спасибо за Ваш титанический труд. Для меня это не шпаргалка, а целая энциклопедия.
http://veraborok.blogspot.com/
Оорт
А у меня почему-то не отображаются картинки из постов.
NMitra
Ответ здесь будет как с проблемой с "Популярными сообщениями" - http://shpargalkablog.ru/2011/03/populyarnye-soobshcheniya-blogger.html. Она решается.
Оорт
Спасибо!
Торт
Можно ли уменьшить размер описания? если да то как?
NMitra
.paginaposts {
height: 50px;
width: 230px;
overflow: hidden;
}

Высота и ширина соответственно.
Евгения
Спасибо. Всё получилось.
Анонимный
Ух ты! Не дурно...!)). Это что-то на подобие карты сайта? Меня интересует вопрос, будет ли индексироваться дополнительная страница с ТАКОЙ КРАСОТОЙ Яндексом и Гуглом? А то по моему дак Яндекс отдельные страницы "не кушает"...Наталья, плиз...если для Яши нужно что-то прописать, осведомите меня, ась...?
NMitra
Страницы хорошо индексируются Яндексом, но нужно разместить на них ссылку. Например, посмотрите на "Автор: NMitra".

Вот только этот вариант реализации оглавления только радует глаз, а для поисковых систем совсем не доступен, они не читают указанный скрипт.
Евгения
Вот такой вопрос. Как по средствам условного оператора можно на последней странице оглавления убрать недоразумение типа: "Всего опубликовано сообщений: 132 - из них показано 122-180 записей" (это из Вашего примера). То есть получается записей всего 132, а показано 180 макс.?

С уважением.
NMitra
Скрипт отсчитывает по 60 записей. Строчку убрать можно, удалив:

var totales = "Всего опубликовано сообщений: " + cantidadposts + " - из них показано " + iniciopagina + "-" + finalpagina + " записей";
Евгения
По сути это ведь является картой сайта, да? Или стоит карту создать ещё и отдельно?
NMitra
Да, но только картой сайта для посетителей, поскольку она не индексируется поисковыми системами.
Евгения
А для индексации надо что-то подобное делать или они blogspot и так нормально индексируют?
NMitra
Гугл нормально индексирует, для Яндекса достаточно необходимого минимума отсюда - http://shpargalkablog.ru/2010/08/indeksatsiya-yandex.html.
TeterinaSN
Не получается...:((( создаю страничку, копирую ваш код...изменяю на свой блог...не получается....отображает только текс
TeterinaSN
получилось!!!! УРА!!!!!!...а вот как разнести статьи по разделам???? напишите пожалуйста
TeterinaSN
очень хочется, чтобы было точно так же с картинками, но разбивка по ярлыкам....
NMitra
Рада, что получилось.
Замените в коде
/feeds/posts/default?start-index=
на
/feeds/posts/default/-/зайцы?start-index=
NMitra
На одной странице разбить по ярлыкам не получиться.
TeterinaSN
http://shpargalkablog.ru/2011/04/krasivoe-oglavlenie-blogger.html
TeterinaSN
Спасибо огромное! как я поняла, чтобы по ярлыкам сделать, нужно для каждого ярлыка создать страницу?
у вас очень классное оглавление....)))все понятно и удобно
NMitra
Да, всё верно. Спасибо, приятно слышать))
NeiL
Размер картинки я так понял 72-с, можно ли увеличить. При задании размера картинки 100х100px не красиво смотрятся? Не нашел в коде этого.
NMitra
После
postimg = entry.media$thumbnail.url;
добавьте строку
postimg = postimg.replace('s72-c','s100-c');

Также замените height и width в
.paginaposts
.paginaposts img
NeiL
Большое спасибо.
жаль индексации нет, ищу решение.

з.ы. с возвращением после переустановки.)
Tatiana Zamakhova
Спасибо большое! Очень понравилось, использую теперь.
Rona
первый код работает,второй - нет
NMitra
Вы возможно в IE смотрите? Пока браузер не поддерживает, только в 10 версии.
Dima
Здравствуйте, Наталья. Мне на блог очень нужно горизонтальное меню, например с лучшими новостями. вот картинка примера
http://fotohost.org/images/a1bb8f31-253kB.gif
Необязательно чтобы там были стрелки, хотя бы чтобы картинки двигались, а если навести курсор, то останавливались, и если нажать, открывается какая нибудь новость. и чтобы эти новости писать можно было самому(ну то есть как список чего-то в гаджет html)
спасибо
NMitra
http://24works.blogspot.com/2010/12/marquee-scrolling-text-and-link-hacks.html
Dima
спасибо!=)
Dima
Помогите ещё пожалуйста), я хочу горизонтальное меню, а когда картинку вместе с текстом вставляю, то следующая картинка и надпись становятся уже немного ниже (под первой).Если без надписей, то все норм. вообщем вот блог:
http://xn--80afo7al4d.blogspot.com/
А вот через исходный код посмотрите пожалуйста, ищите
>Лучшие игры<
а то чего то ваш сайт пишет "Ваш код HTML не может быть принят: Недопустимый тег: H2" =))
спасибо.
NMitra
Используйте CoderHTML - http://shpargalkablog.ru/2010/07/instrumenty-vebmastera-s-nulya.html

Тег p - блочный, то есть занимает всю доступную ширину, присвойте ему style="display: inline-block;"
Dima
пробовал, тогда текст становиться справа от картинки, и под следующей картинкой. Если без block, то текст смещается вправо, и следующая картинка тоже. =((
NMitra
br - между картинкой и текстом
или
http://shpargalkablog.ru/2011/05/float-left-div-css.html - float: left
или стиль display: table;

Вариантов много.
Dima
ОО спасибо))) я сразу сам поставил br, но тогда смещалось вниз уже и вторая картинка)) а потом забыл. Спасибо Вам большое))
Sool
не работает вообще код, - и содержание от Абу Фарана тоже перестало работать с вашего сайта
Евгения
№50. Вариант первый работает отлично - руки почините.
NMitra
Sool, что делали с RSS? Проверьте, чтобы у канала сообщений блога не был выбран пункт "Ни одного". См. последний скриншот http://shpargalkablog.ru/2010/07/zarabotok-na-rss-s-nulya.html
NMitra
Евгения, спасибо, что не остаётесь в стороне!
Plotegor
Подскажите пожалуйста, все сообщения что я публикую на сайте сами будут добавляться или както по-другому?
NMitra
Сами, они берутся из RSS ленты.
Plotegor
По сути ето карта сайта?
NMitra
Да, только не индексируется.
Anko
здравствуйте! скажите, пожалуйста, а можно ли сделать чтобы во втором варианте показывались только избранные картинки? а то показывает все картинки из всех постов. можно ли оставить только одну картинку от каждого поста?
NMitra
Немного не поняла. Почему все картинки из поста? Покажите пример
Марина Петрова
Здравствуйте!Я ,наверное,единственный человек,у которого не получилось,а очень хочется.Не пони маю на что менять вот это
( var postporpagina = 60; // число записей на странице
var urlsitio = "http://shpargalkablog.ru"; // адрес блога)Мой блог
http://marinapetrova62.blogspot.ru/А что вместо var вставлять? И откуда брать вот это(/feeds/posts/default?start-index=") Я попробовала взять это из оглавления старого правильно ли это-вот так:/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc" На странице в блоге появляется одно слово: загрузка,но оно не активно.Помогите,дорогая!!!!
NMitra
Здравствуйте, разбираю комментарии, отправленные до блокировки блога.

Вначале вместо
var urlsitio = "http://shpargalkablog.ru";
напишите
var urlsitio = "http://marinablog50.blogspot.ru/";

Опубликуйте. Получилось? После этого будем разбирать более мелкие и уже не такие существенные моменты.
Diana T
Отличное оглавление! Красиво, наглядно. Можно разбить по темам. Спасибо! Буду использовать. Есть дополнительный вопрос: можно ли как-нибудь рядом с названием статьи размещать информацию, которая хранится в Блоггере под грифом "Описание для поисковых систем"?
NMitra
Предполагаю, что можно. Этот скрипт я позаимствовала у JMiur http://vagabundia.blogspot.com/2011/04/resumen-de-entradas-con-paginacion.html , о чём писала тут http://shpargalkablog.ru/2011/03/soderzhanie-bloga-na-blogger.html

Спросите, пожалуйста, у него.
Diana T
Спросила, и даже получила ответ. Вот бы знать только что с ним теперь делать.... Я, к сожалению, в программировании не сильна. Поможете? Его ответ на мой вопрос - самый последний в посте.
NMitra
Не, он не то дал. Он дал контент страницы. Спросите его про
<meta expr:content='data:blog.metaDescription' name='description'/>

Если даст такой же участок кода, то я смогу его добавить в нужное место.
free-dom
у меня не получилось((( скопировала первый вариант, второй и ничего не оторбразилось
NMitra
http://free-dom-777.blogspot.ru/p/resultados-loadingscript.html - не вижу скрипта. На вкладке "HTML" добавляйте код.
free-dom
NMitra, я вставляю в хтмл новой страницы Содержание. Но можетнужно в какой то тег заключить? блог словно не видит( вставляемый хтмл
NMitra
Тег не нужен. Попробуйте в новое Сообщение вставить. Результат тот же?
free-dom
да, тоже(((
NMitra
Скриншоты сделайте, покажите что делаете
Alla Cuvichico
Давно хотела сделать такие страницы для каждого ярлыка, так обрадовалась, что наконец то нашла, но , к сожалению, ничего не получается. Создаю страницу, нажимаю - "Изменить HTML" вставляю код, заменив выделенное на свои данные, нажимаю - "Создать", затем - "Просмотр" и ... ничего, Что я делаю не так? Прошу простить меня за бестолковость.
NMitra
free-dom, Alla Cuvichico ошибка была во втором примере, сейчас должно работать.

free-dom, извините, что сразу не проверила.
Юлия Алешкина
Здравствуйте еще раз:)
Снова обращаюсь за помощью. Я сделала таким образом настройки ярлыков и теперь у меня получается такое оглавление. Поигралась и с шириной окошек и количеством показывающих результатов. Но, как всегда хочется "перламутровых пуговиц"
Можно ли как-то настроить размер изображений (сами окошки я постаралась подогнать под квадрат - получилось 168х173пикс), чтобы они "вписывались" туда. У меня в разных сообщениях по-разному- то гориз.изображение, то вертикальное и, выбирая условие "по длине\ширине\меньшей стороне..." (http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html#size), всё равно получается, что какая-то картинка выбивается.. Ставила эти значения пикселей- получилось, что просто вырезался "кусочек" из картинки...
А потом нашла вот такое у вас - http://prilozhenie1.blogspot.ru/search/label/kod - и там (если я правильно понимаю) картинка как-то "влезает" в квадрат... Можно ли и в моем случае "схитрить" и реализовать задумку?
Надеюсь, что понятно объяснила.
Для примера моя страничка с "кривенькими" квадрариками http://www.altoys.ru/search/label/%D0%94%D0%BB%D0%B8%D0%BD%D0%BD%D0%BE%D0%BD%D0%BE%D0%B6%D0%BA%D0%B8?max-results=50
NMitra
Один человек очень против ломаных пропорций.

Так, картинки можно сделать квадратами. У вас ширина блога фиксированная, поэтому можно не мучатся с этими процентами, указывайте для a.post-miniature ширину width и высоту height в px.

Вот эту часть кода
.replace(/s72-c/g, &#39;s00&#39;)
замените на
.replace(/s72-c/g, &#39;s300-c&#39;)

Получится
http://4.bp.blogspot.com/-vMOL1LiDvCk/UnyZv_X430I/AAAAAAAAOzI/_GcNq3FZHBY/s300-c/DSCF8085+1.jpg

Вместо 300, ту ширину и высоту, которую задали для блока.
Юлия Алешкина
поставила .replace(/s72-c/g, 's168-c') 0 получилось красиво, хотя раза с 6-го, до этого почему-то картинки становились размытыми.
А вот с шириной width и высотой height в px - поставила 168px,
a.post-miniature {
overflow: hidden;
display: inline-block;
width: 168px;
height: 168px;
padding: 9% 0 9%;
box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
text-align: center;
background-color: #ffffff;
background-size: auto 100% !important;
color: #ffffff;
transition: .5s;
}
но в этом случае растянулись окошки (и изображения) - стали вытянутыми по длине.
Потом убрала строку
padding: 9% 0 9%;
я не знаю, что это такое, но ее удаление привело к нужному результату - окошки стали квадратными с заданными параметрами, изображение в них красивое, только текст (тот, что при наведении на картинку - название сообщения) ушел вверх, а ранее был по центру- подскажите, пожалуйста, как это исправить?
NMitra
padding: 9% 0;
вернуть и добавить
-moz-box-sizing: border-box; box-sizing: border-box;
NMitra
Юлия, вы молодец, видно, что с Blogger на "ты".
Юлия Алешкина
Благодарю! Всё получилось! теперь всё красиво-красиво и перламутровые пуговки все на месте :)
Вы чудо!
Дикий Гусь
Доброго времени суток! Можно ли добавить в шапку блога картинку таким образом: с правой стороны название блога и описание, с левой - небольшая картинка.

По задумке должно получаться примерно так: 1.bp.blogspot.com/-zuX7tzYkZ2Q/U-ZUcdAZlnI/AAAAAAAAAi0/aRgtFAGrfmU/s1600/%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9.png

Т.е. в блок шапки надо вставить и текстовое название блога с описанием, и картинка сбоку типа логотипа.
NMitra
Здравствуйте,

#Header1 {
padding-right: 100px; /* чуть больше изображения */
background: url(адрес_картинки.jpg) no-repeat 100% 50%;
}
Дикий Гусь
Супер! Огромное спасибо! Всё получилось в лучшем виде!
Дикий Гусь
хммм... а что прописать, чтобы получилось 2 картинки: одна с правой стороны, другая с левой (два гуся симметрично)? или анреал?

прописал параметр " padding-left: 190px; " получился отступ с левой стороны, теперь как-бы текст посередине, картинка одна - с правой стороны
NMitra
http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html

background-image: url(адрес_картинки.jpg), url(адрес_картинки.jpg);
background-repeat: no-repeat;
background-position: 0% 50%, 100% 50%;
Дикий Гусь
Огромное спасибо! Чуток не так пытался сделать, изобретал велосипед :-)