01 марта 2012

Похожие сообщения с миниатюрами для Blogger

Для лучшей навигации и поиска необходимой информации, применяется виджет похожие сообщения с миниатюрами для Blogger. Если хотите использовать виджет похожие сообщения без миниатюр перейдите по   одноимённой ссылке. Также с помощью ссылок на похожие сообщения которые обычно размещаются под статьёй обеспечивается внутренняя перелинковка повышающая статический вес страниц, поэтому применение виджета похожие статьи для Blogger желательно, как для обеспечения удобной навигации, так и для SEO оптимизации Blogger.

Виджет похожие сообщения с миниатюрами для Blogger, что он собой представляет.


Этот скрипт выводит миниатюры изображений и заголовки статей связанные общими ярлыками.

Установим этот нужный виджет похожие сообщения с миниатюрами на свой Blogger, для этого:
Перейдём Blogger - Шаблон - Изменить HTML.
Отмечаем галочкой “Расширить шаблоны виджетов”
Потом с помощью поиска (Ctrl+F) найдём строку в шаблоне:
</head>

и прямо над ней вставляем код:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://slivsol.0fees.us/download/relatedthumbs20.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Виджет похожие сообщения с миниатюрами для Blogger


Дальше находим строку:
<div class='post-footer-line post-footer-line-1'>
таких строк в коде шаблона две, ставьте под первым найденным.
Попробуйте ещё вставить под этим кодом:
<div class='post-footer-line post-footer-line-2'>
или под этим:
<div class='post-footer'>
но в этом последнем варианте у меня пропадала форма комментариев.
Если предыдущих строк в коде нет, то поищите такую:
<p class='post-footer-line post-footer-line-1'> 
и теперь сразу под строкой вставляем этот код:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

Настройки виджета Похожие сообщения с миниатюрами для Blogger


Название виджета меняется в строке:
var relatedpoststitle=

Цвет заголовка "Похожие сообщения:" меняется  заменой кода цвета (color) в строке:
font-weight: bold;
color:

Размер шрифта заголовка задаётся в строке:
font-size: 1.6em;


Настройка количества ссылок на похожие сообщения, осуществляется с помощью редактирования строк в коде:
var maxresults=
и
max-results=


Цвет заголовка статьи в миниатюре меняется в строке:
#related-posts a{
color:
и
#related-posts a:hover{
color:


Цвет при наведении на похожую статью меняется в строке:var splittercolor="#d4eaf2";

Когда в статье нет изображения, выводится изображение по умолчанию. В этой строке его можно заменить поставив свою ссылку на изображение:
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

Если вы хотите, чтобы виджет выводился не только в конце каждой статьи, но и на главной странице, то для этого удалите из кода все эти строки:
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- remove --></b:if>

Виджет похожие сообщения с миниатюрами для Blogger
Примечание* В этом коде удалены все скрытые рекламные ссылки ведущих на сторонние ресурсы!

Сохранив шаблон с внесёнными изменениями, вы увидите в низу своей статьи виджет похожие сообщения с миниатюрами для Blogger.

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

  1. У меня шаблон по другому устроен, и нет строки class='post-footer-line post-footer-line-1'

    вообще вместо сообщений вставлено




    Это где редактировать ?

    ОтветитьУдалить
  2. widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'

    ОтветитьУдалить
  3. Могу только посоветовать
    Виджет LinkWithin - похожие сообщения с миниатюрами. Можно настроить показ до 5 сообщений.

    ОтветитьУдалить
  4. Доброго времени суток, возник вопрос. А можно ли сделать так, чтобы виджет отображался не в боксе с тегами и автором, а отдельным боксом? Заранее спасибо за ответ.

    ОтветитьУдалить
  5. Точно сказать не могу, думаю эти коды находясь в теле статьи взаимодействуют между собой и с ярлыками. Возможно перемещать похожие сообщения выше или ниже можно, но в пределах статьи

    ОтветитьУдалить
  6. Здравствуйте!
    Пытаюсь вставить Ваш виджет похожие статьи для блогспот.
    Но у меня отсутствуют строки под которыми нужно вставлять вторую часть кода. Куда записать вторую часть?
    Ответьте пожалуйста
    С уважением, Зоя Пустовойт
    www.svadebnoeoformlenie.com

    ОтветитьУдалить
    Ответы
    1. Таких строк: class='post-footer-line post-footer-line-1'>
      в коде шаблона две, я поставил под первым найденным.
      попробуйте ещё вставить под этим кодом:
      class='post-footer-line post-footer-line-2'>
      или под этим:
      class='post-footer'> но в этом последнем варианте у меня пропадала форма комментариев

      Удалить
  7. Не работает. Ни в одном из трех вариантов.

    ОтветитьУдалить
    Ответы
    1. Ищите причину не в виджетах, а скорее в своём шаблоне. Как видите на этом блоге со стандартным шаблоном виджет работает

      Удалить
  8. Добрый день! А как можно изменить размер картинок?

    ОтветитьУдалить
  9. Спасибо Вам огромное, я два часа пробовала разные коды и именно ваш сработал, ура вам!!!))

    ОтветитьУдалить
  10. Ничего не работает......................
    Все выполнено как написано выше.
    Может ли это быть из-за того что закаченный шаблон?

    ОтветитьУдалить
  11. Спасибо, очень полезная статья!

    ОтветитьУдалить
  12. Добрый день! Подскажите пожалуйста, уже нет кнопки “Расширить шаблоны виджетов”. Это очень важно? что то не получается установить данный виджет(((

    ОтветитьУдалить
    Ответы
    1. Интерфейс платформы изменился, сейчас сразу можете искать и изменять код

      Удалить
  13. Временно решил проблему, можете делать всё как в статье. Не работает Google Code из-за санкций, там лежал скрипт необходимый для работы виджета похожих сообщений. Можно полностью решить проблему скачав скрипт-https://cloud.mail.ru/public/13a8e3e6f613/relatedthumbnails20.js и разместить его на своем хостинге, указав потом на него ссылку в коде виджета. Ссылка которую нужно будет заменить выделена зелёным

    ОтветитьУдалить