Новое в блоге
Loading...
19 янв. 2012 г.

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

Всем привет! Так как сегодня великий праздник, хочу в первую очередь поздравить всех Вас с Крещением Господним!

 Сегодня Крещение.
 Праздник великий.
 Дарует прощение
 Господь многоликий.

 Пусть будут дела
 Вашим мыслям под стать.
 И пусть вам дарует
 Господь благодать!

А теперь о деле. Предлагаю сегодня вашему вниманию - Виджет похожие сообщения под каждой статьёй для блоггер.

Этот виджет для Blogger хорошо знают все. Поэтому я не буду отнимать ваше время на описание виджета похожих постов. Только очень кратко - похожие сообщения с миниатюрами для Blogger это отображение ссылки на соответствующие статьи, а также эскиз картинки на соответствующее сообщение. Вот как то так. Я его использую почти на всех своих блогах и в том числе здесь. Можете посмотреть в низу после поста (уже нельзя, сменил шаблон). Лучше его устанавливать на светлые шаблоны ,а кто разбирается в стилях CSS можно и на тёмный шаблон.

Как установить виджет похожих сообщений для Blogger

Для этого заходим- Blogger-Шаблон-Изменить HTML. Далее с помощью поиска (Ctrl+F)  найдите  эту строку в вашем шаблоне: </head> и прямо над ней вставляем код:
<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 src='http://dl.dropbox.com/u/48089857/relatedthumbs19.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Следующий шаг. Теперь ищем одну из этих строчек: <data:post.body/> или  <div class='post-footer-line post-footer-line-1'>  если не найдёте тогда  такую:  <p class='post-footer-line post-footer-line-1'> Теперь сразу после любой из этих строчек (в зависимости от того какую Вы нашли) вставляем этот код:
<!-- Related Posts with Thumbnails Code Start-->
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='#' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='#' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Похожие сообщения";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Теперь о настройках виджета похожих сообщений под кажым постом. Вы можете настроить максимальное количество связанных сообщений для вывода, редактируя эту строку в коде: var maxresults=5; можно отображать даже в два ряда. Также можете заменить слово "Похожие сообщения" на своё, например: "Читателям так же нравится". Всё. Желаю удачи. До новых встреч дорогие мои читатели.

Смотрите так же: виджет связанных сообщений с миниатюрами от сервиса nRelate или стильный виджет связанных сообщений под каждым постом для Blogger

P.S. Скачать скрипт можно по этой ссылке. Затем заливаем его на свой хостинг, а ссылку на скрипт вставляем в первом коде, вместо http://dl.dropbox.com/u/48089857/relatedthumbs19.js
Инструкция для хостинга Dropbox читайте здесь, а по Google Диск тут.

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

63 коммент. :

  1. Второй код у меня не находит, ни первый вариант ни второй.

    ОтветитьУдалить
  2. Попробуйте вот этот  Может Вы галочку расширить шаблоны виджета не поставили.Я вот всем даю совет на всякий случай,заведите второй блог,с таким же шаблоном и там можно тренироваться.Если всё получается,то можно и на основной блог ставить виджет.  

    ОтветитьУдалить
  3. Нет, такой тоже не находит, в нескольких блогах пробовал. Я уже не помню, у вас здесь брал или в другом месте, без изображений
    просто снизу под публикацией идут похожие статьи, видимо подбор идет по ярлыкаи, там еще значок возле каждой идет rss, так вот  в ней тоже глюк какой то. Поставил там в настройках max5 что бы только пять показывало, но в реале бывает и больше десятка выдает. Есть что то подобное?
    То что у вас наверху менюшка с содержанием, статью о том как создать у вас здесь видел или где то в другом месте?

    ОтветитьУдалить
  4. Попробуйте вместо 1 в строчке поставить 2 или 3.Косую черту добавили после 
    body такая строчка должна быть.Со значком 
    rss у меня брали в другом блоге.Да там показывало больше чем выставляешь,а разбираться почему я не стал.Сейчас я подыскиваю чего то похожее.Хочу в дополнение поставить к картинкам.Как найду нормальный виджет так опубликую здесь.Хотя без картинок можно поставить этот виджет.Будет как НАДО.
    http://new-school-blogger.blogspot.com/2011/12/vidzhetocenka-postov-pjat-zvjozd-dlja.html там можно выбирать с картинками или без в добавок есть оценки поста 5 звёзд.

    ОтветитьУдалить
  5. Да забыл. А какой меню идёт речь?Вы имеете ввиду карту блога сделать?
    http://new-school-blogger.blogspot.com/2012/01/vidzhetnovaja-karta-bloga-dlja-blogger.html

    ОтветитьУдалить
  6. У меня вот этот стоит, в конце поста укажу, а то тестк меняется елси печатать сразу, но но как то одни и теже 10 тем показывает, толи по рейтинги из подбирает, незнаю, я хотел бы похожие а не самые популярные , сейчас попробую то что предлагаете,LinkWithin     к

    ОтветитьУдалить
  7. А вот ещё о нём мало наверное кто знает 
    http://new-school-blogger.blogspot.com/2012/01/vidzhet-svjazannyh-soobschenij-nrelate.html

    ОтветитьУдалить
  8. Данная статья делает такую же древовидную структуру как это у вас здесь на блоге? То есть она из рубрик при нажатии на "кнопочку"
    раскрывает другую подрубрику, и если щелкаешь по не обратно зарывает эту ветвь, так же как и вас здесь карта сайта, как меню СОДЕРЖАНИЕ?

    ОтветитьУдалить
  9. Если как у меня 
    http://new-school-blogger.blogspot.com/2012/01/kartasoderzhanie-bloga-s-jeffektom.html

    ОтветитьУдалить
  10. все сделал в точности - виджета нет,- не пойму в чем дело,- кидаю ссылку на блог не прими за рекламу - может посмотришь чего у меня может не так ? :
     http://zdestochtonado.blogspot.com

    ОтветитьУдалить
  11. А !!! все , спасибо - все появилось само минут через 10, видно надо было просто подождать пока он настроиться для блога.
    Еще раз спасибо , виджет лучше чем от линк висин.

    ОтветитьУдалить
  12. Рад что получилось.Я использую этот виджет на трёх своих блогах.И менять не собираюсь.

    ОтветитьУдалить
  13. Интересный блог.На всю ширину монитора.

    ОтветитьУдалить
  14. Здравствуйте, а можно ли поменять фоновый цвет у виджета, если можно как это сделать ?

    ОтветитьУдалить
  15. Привет!Можно в этой строчке,в первом коде:background-color(цвет фона):#d4eaf2

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

    ОтветитьУдалить
  17. большое спасибо! 

    Дмитрий, то что вам написал Сергей "
    #d4eaf2 " замените вот на это "transparent" без скобок

    ОтветитьУдалить
  18. Возможно ли изменить размер шрифта? 

    ОтветитьУдалить
  19. Конечно,нажимаешь в первом коде на ссылку скрипта,копируешь,редактируешь размер шрифта,кладёшь скрипт на свой хостинг и меняешь ссылку мою на свою,где лежит скрипт.

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

    ОтветитьУдалить
  21. находите в HTML вот это "var maxresults=5;" и вместо пятерки ставите, хоть 35!

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

    ОтветитьУдалить
  23. не помогает, ярлыков достаточно, ставлю 1,2,3,4,5 все работает а вот дальше нет , не пойму в чем засада

    ОтветитьУдалить
  24. в таком случае, используйте сервис nrelate.com, приятнее на вид и более гибкие настройки.

    ОтветитьУдалить
  25. у меня кстати тоже уже отображается только 5, нужно просто скрипт перезалить на свой хостинг и отредактировать под себя

    ОтветитьУдалить
  26. Посмотрите у меня 7 сообщений показывает,как и выставил.

    ОтветитьУдалить
  27. скачал скрипт , но где там кол-во выставить, не понял

    ОтветитьУдалить
  28. Зачем скачивал?Это стили скрипта.Там настраивается шрифт,размер шрифта,фон и т.д.
    "var maxresults=5;" ВОТ КОЛИЧЕСТВО ВЫВОДИМЫХ ПОСТОВ С ОДИНАКОВЫМИ ЯРЛЫКАМИ.У меня на многих блогах, всё работает отлично.

    ОтветитьУдалить
  29. Вот найди эту строчку во втором коде: max-results=6" и попробуй поставить нужное число.

    ОтветитьУдалить
  30. стоит var maxresults=7; толку нет все равно 5
    http://www.rosagit.info/2012/06/blog-post_17.html

    ОтветитьУдалить
  31. админ блога не заслуживает уважения, ему даже ответить на элементарные вопросы сложно... самый дерьмовый блог. честно

    ОтветитьУдалить
  32. Пожалуйста не надо ругаться.Я работаю на тяжёлой работе.Прихожу с работы и сразу валюсь спать.Стараюсь по возможности отвечать всем. Если Вам не ответил прошу прощения.Иногда комментарии не сразу приходят,ВЫ видтие комментарии дискус обновились.Они комм. могут прийти через сутки.По моему мой блог нормальный .

    ОтветитьУдалить
  33. У меня ничего не получилось. Коды вставила, но...http://methodicinfo.blogspot.com/2012/07/sistschicleniya.html

    ОтветитьУдалить
  34. Помогите пожалуйста!
    Вставляю все как тут описано и просто ничего...
    Шаблон стандартный: Венецианское окно
    И ссылка на тестовый блог: http://blog-for-test-design.blogspot.com/
    Заранее благодарен)

    ОтветитьУдалить
  35. Сколько у Вас встречается этих строчек?

    ОтветитьУдалить
  36. с цыфрой 1 - 2 строчки
    с цыфрой 2 - 2 строчки
    с цыфрой 3 - 1 строчка

    ОтветитьУдалить
  37. С цифрой 1 после второй строчки код попробуй вставить.Если не получится попробуй с цифрой 2 вставить.Надо пробовать по разному,так как шаблоны у всех разные.

    ОтветитьУдалить
  38. Если бы все было так просто я бы не просил помощи)
    Я пробывал вставлять вторую часть кода почти везде (в проделах post footer) и ничего не отображалось((((
    Может есть еще идеи???)))

    ОтветитьУдалить
  39. Странно, должно работать.Тогда пробуем после этой строчки:

    ОтветитьУдалить
  40. Отобразилось два раза.Ищи одну строчку.

    ОтветитьУдалить
  41. у меня тоже не получается - перепробовал все!

    ОтветитьУдалить
  42. Можно ли сделать так, чтобы "Похожие сообщения" отображались без изображения, если возможно то, что нужно сделать?

    ОтветитьУдалить
  43. Пожалуйста:http://new-school-blogger.blogspot.com/2012/01/vidzhet-pohozhie-soobschenija-blogger.html

    ОтветитьУдалить
  44. У меня после слова "Похожие сообщения" появились две линии черная и серая как их убрать.

    ОтветитьУдалить
  45. спасибо за пост , всё работает , автор красава .

    ОтветитьУдалить
  46. Как увижу блоки кодов - не по себе становится. Попал с таким кодом в засаду: установил похожие статьи с помощью вот этого кода. http://seocross.ru/sozdanie-bloga/poxozhie-stati.php
    У многих всё работает хорошо. А вот у меня после установки комментарии стали прыгать на другие статьи. Вот только выводимых статей хочется побольше!

    ОтветитьУдалить
  47. Из всего, что пробовал на эту тему самое на мой взгляд лучшее! :d

    ОтветитьУдалить
    Ответы
    1. Хорошо, что ни какие сервисы не нужны. Вставил два кода и всё. :)

      Удалить
    2. Это один из жирных плюсов этого виджета! (o) Также можно поднастроить под свой дизайн блога, а больше всего нравится в нём то, что реально показывает то, что ближе к опубликованной теме, а не просто наспех попавшиеся)) Тут главное ярлыки грамотно прописывать и всё будет супер! Спасибо за него, Сергей!!! С Первомаем!!! (h)

      Удалить
    3. Пожалуйста. И вам хорошо провести майские праздники.

      Удалить
  48. Сергей, я хотел просто уточнить... Пробовал этот виджет и использую до сих пор на своём блоге, жалоб нет. Но сейчас начал мастерить новый, попробовал установить виджет в него, но по завершению его не вижу. Шаблон правда другой сейчас, тот, что был у вас прежде - светлый. Но тогда я устанавливал его уже с содержимым в блогу более ста постов, а сейчас с десяток прописал пробников для общей настройки, может просто недостаточно материала? Хотя, заголовок же должен отображаться с заголовком "Похожие сообщения" или не факт? Первый код вставил над /head, а второй сразу после data:post.body/
    Есть какие-то предположения на этот счёт? Заранее признателен за ответ! :-d

    ОтветитьУдалить
    Ответы
    1. У меня такая же проблема.

      Удалить
  49. Анонимный9 июня 2013 г., 17:48

    Здравствуйте. На вашем сайте есть такая же статья: http://forbloggerhelp.blogspot.com/2011/11/pohozhie-stati-s-miniatjurami-dlja.html
    Но в ней во втором куске кода после <a href=' идет адресс страницы и далее такой же участок - адресс блога, а в этой статье стоят решётки в коде <a href='#'.
    Вопрос - как правильно вставить код? Что-то надо вводить вместо решётки в код: <a href='#' ?

    ОтветитьУдалить
    Ответы
    1. Привет!Ни чего вместо решетки вводить не надо.Здесь в коде стояла посторонняя ссылка,я её просто убрал, а в другом блоге убрать забыл. 8-)

      Удалить
    2. Анонимный9 июня 2013 г., 23:43

      Спасибо за труды и быстрый ответ. Доделаю блог - выставлю ссылку на ваш сайт. Очень доступно и просто изложен материал, хорошо подобраные темы!

      Удалить
    3. Спасибо за приятные слова.За ссылку буду очень благодарен.Удачи.

      Удалить
  50. Все сделал как написано, но ничего не появляется!

    ОтветитьУдалить
    Ответы
    1. Привет, Дмитрий! Вот здесь написал, как решить проблему-http://shkolablogger.ru/kak-v-blogger-dobavit-pohozhie-stati-s-miniatyurami-pod-kazhdoe-soobshhenie.html

      Удалить
  51. У меня тоже ничего не получилось((. А нельзя ли создать новый пост, с учетом всех изменений, корректировок и дополнений? Это ведь не так сложно. Сделайте пожалуйста, для таких чайников как я, буду признательна.

    ОтветитьУдалить
    Ответы
    1. Привет! Дописал пост. Надеюсь теперь у вас получится. Если, что спрашивайте, помогу.

      Удалить

 
Footer