Похожие сообщения - настраиваемый виджет

 Если честно, мне давно разонравился виджет похожих сообщений от Linkwithin. И авторы блогов часто говорили, что не могут его добавить к себе. Нашла хорошую альтернативу (на сегодняшний день). Огромное спасибо за идею блоггеру Сергею (http://shkolablogger.ru/vidzhet-engageya-pohozhie-i-rekomenduemyie-stati.html). 
 Мне понравилось, что есть большой выбор настройки виджета похожих сообщений - с миниатюрами круглой или квадратной формы, один или два ряда миниатюр, различные варианты показа текста (в том числе цвет подписи) и др. И всё это бесплатно.



Для начала я бесплатно зарегистрировалась в сервисе http://www.engageya.com. Для этого нужно:

1. На сайте в правом верхнем углу нажать кнопку Register.

2. Заполнить поля во всплывающем окне: Username, Email, Website (сейчас укажите 1, потом можно еще добавить), Password. Ниже две галочки - 1) узнавать об обновлениях, 2) пользовательское соглашение.

 

3. После заполнения полей и нажатия кнопки Signup, появится еще одно маленькое окошко, где нужно будет внести проверочный код, который придет в письме по электронной почте.

Сразу скажу, что виджеты можно создавать разные и для нескольких разных Ваших сайтов (сайт на английском, на скриншоте перевод из браузера).

Возможно, Вам понравятся виджет похожих сообщений с круглыми миниатюрами:

Или квадратные эскизы 100х100 с эффектом "наведения":

Есть еще виджет похожих сообщений с прямоугольными эскизами и с эффектом всплывающего текста после наведения курсора на картинку:

Ну и, например, виджет с фиксированным цветом текста заголовка сообщения:

Пробовала я разные варианты на двух блогах. Для того, чтобы добавить еще сайт в сервис - нажмите (на вкладке Website) зеленую кнопку +Add New Site

 Для создания виджета похожих сообщений нужно перейти на сайте на вкладку Widgets и справа найти кнопку Create New Widget

1. Название виджета (Widget Name) - пишем на латинице.
2. Выбираем внешний вид виджета (Layout) - потом можно будет отредактировать. Количество рядов миниатюр (Rows) - 1 или 2 - работает в некоторых виджетах. 

 Ниже будет отображаться предварительный просмотр. Меня интересовал виджет с двумя рядами квадратных

эскизов размером 100х100.

Блок большой, но информативный.

Автоматически подстраивается под ширину сообщения. Например, в превью было показано 10 похожих сообщений, а у меня в блоге "Я сама блоггер" входит шесть в ширину, итого 12. 

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

 Текст надписи, которая будет показываться перед всем блоком придумайте свою.

Выберите нужный Ваш сайт.

Если Вы хотите, чтобы в Вашем блоге/сайте показывались похожие сообщения только с Вашего сайта - отметьте строку "Related content from your blog". 

Далее можно выбрать 3 платформы для вставки виджета - Wordpress, Blogger и третий вариант для прочих платформ. Мы выберем в данном случае третий. Объясняю - почему. 

Вариант, предназначенный непосредственно для Blogger удобен в установке (несколько кликов), но при этом он будет отображаться на Главной странице Вашего блога сразу после каждого сообщения - неважно, анонс это или полное сообщение. В результате всё это выглядит громоздко. Поэтому предлагаю помучиться и выбрать третий вариант - вставка скрипта в код шаблона Blogger - Javascript any platform.

После выбора нажимаем кнопку Save end Get code и на следующей странице сможем получить код скрипта.

Вот теперь самое интересное.

Поскольку у меня в блоге был установлен виджет похожих сообщений от LinkWithin, мне нужно было сначала его удалить. Код этого скрипта удалила в шаблоне HTML перед строкой <footer>. 

Теперь попытаемся вставить код нового скрипта от www.engageya.com.
Скажу честно, перепробовала все варианты. Пробуйте тоже, пока результат Вас не устроит. 

Итак, в настройках блога идем в пункт Шаблон. Делаем резервную копию!

Далее нажимаем Изменить HTML.

Внутри рамки с кодом шаблона ставим курсор и при помощи клавиш Ctrl+F вызываем строку поиска.

Возможные варианты строк в шаблоне, после которых надо пробовать вставлять код скрипта похожих сообщений:

1) <data:post.body/> 
2) <div class='post-footer-line post-footer-line-1'> 
3) <div class='post-footer-line post-footer-line-2'> 
4) <div class='post-footer-line post-footer-line-3'> 
5) <b:include data='post' name='post'/>

У меня после долгих попыток "прошел" только последний вариант...

Перед сохранением шаблона обязательно нажимайте кнопку Просмотреть шаблон. И еще. Создатели сервиса виджетов предупреждают, что, в зависимости от количества сообщений в блоге, виджет может заработать не сразу, а в течение получаса. Так что сразу не паникуйте, какое-то время ждите и обновляйте страницу. 

Желаю удачи!