14 февраля 2013

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


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

Рассмотрим установку виджета похожие сообщения без миниатюр.

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

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

<!--Related Posts 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 .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #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:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://lh6.googleusercontent.com/-2JWL1R0i0i0/TxsH-tOc_lI/AAAAAAAAENs/pgk0U-IDGsE/w10/green.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Похожие сообщения:";
</script>
<script src='http://slivsol-pc-user.googlecode.com/files/related-posts.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles  End-->

Эта ссылка ведёт на изображение в виде зелёной галочки перед заголовком сообщения: https://lh6.googleusercontent.com/-2JWL1R0i0i0/TxsH-tOc_lI/AAAAAAAAENs/pgk0U-IDGsE/w10/green.png его вы можете заменить на своё или полностью удалить выделенную строчку если не хотите, чтобы изображение присутствовало.

В этой строке var relatedpoststitle="Похожие сообщения:"; вы можете поменять название заголовока виджета.

Дальше находим строку:
<div class='post-footer-line post-footer-line-1'>

если такой нет, то такую:
<p class='post-footer-line post-footer-line-1'> 

и сразу под строкой вставляем этот код (код не содержит скрытых сторонних ссылок) :

<!-- Related Posts 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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=7&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var maxresults=7;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<!--Remove--></b:if>
<!-- Related Posts Code  End -->

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

<!-- remove --></b:if>


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

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

  1. Как говориться получилось. Спасибо Вам. Только один вопрос. А как поменять текст названия похожих сообщений с синий на чёрный например, а то в моём блоге как то синий не к месту.

    ОтветитьУдалить
  2. Рад за вас! :) поэкспериментируйте с этими строками:
    color:blue; (таких в коде две)
    и
    text-color:#000000
    нужно вписать код своего цвета после слова color:ВОТ СЮДА!!!!!!!!
    Подобрать html код цвета можно на этом сайте: http://mainspy.ru/kod_cveta_html

    ОтветитьУдалить
    Ответы
    1. Как сделать чтобы этот гаджет показывал в мобильной версии сайт?

      Удалить
    2. А какой подойдет для блоггер?

      Удалить
  3. Спасибо за ответ, буду экспериментировать.

    ОтветитьУдалить
  4. у меня не получается, ничего не появляется, что делать? все перепробовал

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

      Удалить
  5. Спасибо все получилось, только с цветом ссылок не получается вношу изменения, а результат прежний

    ОтветитьУдалить
  6. Вроде разобрался, а как изменить размер шрифта?

    ОтветитьУдалить
  7. Спасибо большое! Несколько статей других вебмастеров прочитал делал как писали ничего не получалось, здесь все получилось без проблем. Тема раскрыта полностью и понятно)))))

    ОтветитьУдалить
  8. Спасибо большое! Я долго искал как сделать что-то похожее! Наткнулся на вас, и все за пять минут получилось! Спасибо большое!!!!

    ОтветитьУдалить
  9. Здравствуйте. Помогите установить. Все сделал, как написано. Один раз показало, а затем нет.

    ОтветитьУдалить
  10. Все. разобрался. Спасибо

    ОтветитьУдалить
  11. Анонимный24.06.2014, 23:26

    Не работает :(

    ОтветитьУдалить
  12. Сам скрипт работает, а название заголовока виджета.не отображается.
    Это что?

    ОтветитьУдалить
  13. У меня под этой строчкой заработало class='post-footer'>, под другими не было результата. Спасибо!

    ОтветитьУдалить
  14. Подскажи стоит ставить кнопку от вебмани спасибо, кто нибудь спасибо перечисляет?
    Если да запили как эт все работает!

    ОтветитьУдалить
    Ответы
    1. Кнопка оригинальный и удобный инструмент, для упрощения перевода. Если тебе захотят перечислить, кнопка в этом поможет, но сложно судить влияет ли наличие кнопки (в сравнении с другими способами) на увеличение перечислений, думаю скорее да чем нет. Минус кнопки в том, что должен накопиться мин. порог средств пережде, чем появится возможность их вывода. Если речь идёт о минимальных и редких перечислениях, то я предпочитаю не ставить кнопку и не засорять код

      Удалить
  15. Как сделать чтобы этот гаджет показывал в мобильной версии сайт?

    ОтветитьУдалить
  16. Можно сделать так, чтобы убрать из списка ссылку на сам пост, на странице которого стоит данный виджет? Т.е., Пост называется "Рыбки", внизу в похожих сообщения тоже "Рыбки"
    Спасибо!

    ОтветитьУдалить
  17. Добрый день! Почему то теперь Ваш гаджет "Похожие сообщения" не работает. Что-то случилось? Подскажите

    ОтветитьУдалить
    Ответы
    1. Гугл код закрыт. Также как и googledrive.com/host . Так что все сторонние скрипты, с этих серверов недоступны.

      Удалить
    2. Уважаемый, Creo! Помогите может внести изменения в этот код? Или залейте его на другой ресурс? Прошу помочь...

      Удалить
    3. Роман, можете использовать с народа
      http://creozavr.narod.ru/js/related-posts.js
      вместо этой строки:
      http://slivsol-pc-user.googlecode.com/files/related-posts.js
      Regards

      Удалить
    4. Уважаемый, Creo! Большое Вам Спасибо!!!

      Удалить
  18. А что делать? Может как-то можно исправить?

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