Похожие сообщения (related post) для Blogger

Приветствую вас, дорогие друзья! Вот и снова я, собственной персоной, спешу на всех парусах поделиться с вами новинками, а именно, классными виджетами для Blogger. Для того, чтобы было из чего выбирать, их будет несколько. Виджет - похожие сообщения с миниатюрами (related post thumbnail) и еще пару - похожие статьи без картинок.

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

Не буду вам описывать для чего они нужны, вы и сами всё отлично знаете. Лучше сразу перейдем к пошаговой установке виджетов в блог на Blogger.

Первым у нас пойдет:

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

Вот так он будет выглядеть:

pohozhie-soobschenija-s-miniatjurami
Виджет - похожие сообщения с миниатюрами

А здесь, в демо блоге его можно пощупать. Для тех кому понравился этот стильный гаджет и хочет его установить, найдите в шаблоне своего строчку </head> 

head-teg
Найти нужный тег

И чуть ниже вставляем стиль виджета:

Затем, скачиваем скрипт с Яндекс. Диск и в коде ставим ссылку на него. Как это делать, читайте здесь. Тут в коде можно выставить сколько выводить связанных постов, по умолчанию стоит 4. Так же здесь, настаиваются цвета, размер шрифта, пишите подпись над виджетом свою и так далее. Следующий шаг такой, в шаблоне надо найти одну из этих строчек:

<data:post.body/> таких бывает три, вставлять после второй или третьей

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>

У всех строение шаблона разные, по этому вывод похожих сообщений пробуем вставить чуть ниже из одной найденных строчек. У меня в демонстрационном блоге получилось вывести после последней. Код такой:

Следующий:

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

Некоторые пользователи предпочитают именно такой гаджет без изображений. Тоже очень красиво смотрится:

pohozhie-soobschenija
Виджет похожие сообщения без миниатюр

Демо будете смотреть? Если хотите пройдите по ссылке - http://vidzhety-i-gadzhety.blogspot.ru/2013/06/vidzhety-dlja-blogger.html. Для такого виджета, код CSS:

Вставить его нужно чуть выше тега ]]></b:skin>, а найти его можно в шаблоне вашего блога, надо только нажать на стрелочку (раскрыть код) и прокрутить потом немного, а у кого то много, вниз:

stili-v-bloge
Раскрываем код
skin
Прокрутить вниз и вот она искомая строчка. Ура,нашлась

После этой нелегкой (для начинающих) процедуры, ищем опять те же строчки (выше указаны, чтобы не повторяться) и после одной из найденной чуть ниже встраиваем такой небольшой скрипт (у меня в стандартном шаблоне я вывел после этой строчки <div class='post-footer-line post-footer-line-3'/>):

Так, с этим виджетом мы разобрались, идем дальше. Следующий на очереди очень стильный виджет, просто супер.

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

Самые популярные Facebook; Twitter и Google plus:

pohozhie-soobshhenija
Похожие сообщения с иконками соцсетей

Данный виджет я пытался установить (два дня) в разные блоги, где то выходило криво, где то ещё, что то было не так. Получилось все таки этот интересный виджет вставить сюда http://iris-rustemplate.blogspot.ru/2011/10/blog-post_7301.html и то, я менял обтекание иконок текстом справа налево и так далее.  В итоге я пришёл к выводу его вам наверное будет трудно реализовать, но попытаться можно. Желательно связанные посты выводить сразу после статьи, то есть, вставлять скрипт ниже строчки <data:post.body/>. Стиль для этого виджета такой:

Код скрипта:

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

Виджеты взяты у индонезийского товарища - rivai-silaban

Всего доброго, Сергей

Комментарии

  • Сергей добрый день. Вот я насчёт первого варианта. Я перешла по Вашей ссылке на яндекс диск. Там стоит( для общего пользования. )-можно эту ссылку ставить в код CSS? Дело в том, что я всё храню у себя в компьютере. Или обязательно надо через хостинг-я имею ввиду ссылка на скрипт.

  • Привет,отец! Я и не знал. что у тебя так здорово здесь. Так держать. 🙂

  • Спасибо за полезный пост. Я разместил виджет «похожие сообщения без миниатюр, с иконкой и текстом».Скажите, пожалуйста, как можно изменить количество выводимых сообщений, чтобы их было, к примеру, только 5 под каждым сообщением.

  • Добрый день.
    Виджет без миниатюр с иконкой. отображает максимум 2 сообщения.
    Не подскажите в чем может быть причина?
    нашел кусок кода:
    ; max-results=6"’

    подумал что цифра отвечает за кол-во сообщений.
    Но изменение цифры ничего не дает.(

    А также интересует вопрос — существует ли способ добавить «похожие сообщения» в виджет?
    Спасибо.

    • Привет, Леонид! Всё правильно max-results=6 отвечает за количество выводимых статей.У вас мало статей в блоге, соответственно мало и ярлыков, в этом и есть причина. Пишите больше.
      «А также интересует вопрос — существует ли способ добавить «похожие сообщения» в виджет?-Ни разу не задавался таким вопросом, обычно используют случайные сообщения, последние сообщения.Попробуйте код вставить в гаджет HTML/JavaScript.

  • хм, я просто не силен в скриптах.
    И вот непонятно каким образом он выводит ссылки.
    Я думал случайным образом из множества ярлыков.
    Допустим по ярлыку «культура» на сайте 4 сообщения, думал что как минимум 4 сообщения и должны выводиться)
    То есть скрипт, по моему скромному мнению, не совсем рационально отбирает информацию)
    Способы с миниатюрой получше это делают)
    Но в нижний виджет не получилось запихнуть, а вверху занимают «слишком много» места.
    Вот и подумал поставить текстовый способ. Но..
    Наверно буду искать еще способы)

    • Леонид, «И вот непонятно каким образом он выводит ссылки.Я думал случайным образом из множества ярлыков» — Всё правильно думали, вот когда у вас будет достаточно статей и ярлыков, тогда будете предъявлять претензии к скрипту, а с 4 ярлыками это делать глупо.

  • Спасибо еще полезная статья.Тут классно

  • Здравствуйте, большое спасибо!!) перепробовал уже вариантов 10 до того как наткнулся на ваш сайт! Поставил второй виджет, все встало с первого раза и работает отлично!!

  • Здравствуйте Сергей! С наступающим Рождеством вас! сразу не заметил когда установил код (второй) , в каждой статье он предлагает 7 похожих! как можно изменить количество? до 4 например?

    • Привет! Укажите в коде max-results= то число которое вам нужно.

      • У меня на сайте нормально работает виджет «Похожие сообщения», подскажите как сделать так чтобы этот виджет отображался в мобильной версии сайта?

  • Здравствуйте, Сергей, а у меня с миниатюрами ничего не вышло :((

    • Здравствуйте, Виктория!
      Вы же не будете останавливаться от одной не удачи, пробуйте ещё раз. Может где ошиблись. 🙂

  • Пробую, но пока без результата.
    Второй код вставляю после (из нашла в шаблоне 2, после второго)

  • Как адаптировать виджет похожих сообщений под мобильное устройство?

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку: *