Генератор кода похожие сообщения под каждым постом в BLOGGER.

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

Я сделала несколько скриншотов для наглядности. Хотя, кто работает в браузере Хром, трудностей с переводом не будет. Итак, переходим по этой ссылке. И перед нами окно с настройками.

генератор кода

В первой строке нажимаем на стрелочку справа и выбираем как будут отображаться похожие сообщения под каждым постом в блоге. Как я уже говорила, их 6. В виде списка, картинка с анонсом, всплывающая подсказка и другие. Вы можете сначала просто поиграться со всеми, чтобы подобрать подходящий. Внизу есть кнопка просмотра.
Во второй строчке пишем название-похожие темы или как хотите назовите. Далее, количество отображаемых сообщений. Затем количество символов анонса, ниже заголовок. Писать не надо ничего - выводится автоматически.
В графе Links: ставим галочку если хотите, чтобы ссылки открывались в новом окне. В следующей Read More Text пишем дальше или подробнее. И нижнюю не трогаем.

Вторя часть.

Первые две строки оставляем как есть. Они отвечают за внешний вид ссылок, которые будут отображаться так, как настроены у вас в блоге.

В строке Image Border: указано значение 0px. Это ширина рамки вокруг изображения. Хотите сделать миниатюры в рамочке установите нужное. Image Background Color:-не трогаем. Дальше можно весь блок похожих статей сделать в рамке. Пожалуй, это все основные моменты.

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

Чтобы просмотреть, как это будет выглядеть в итоге смело нажимаем на чёрную кнопку.  И ниже получаем 2 кода.

Определились с внешним видом и приступаем к установке. Заходим во вкладку шаблон. Обязательно сделайте резервную копию. С помощью клавиш Ctrl+ F находим в шаблоне строку <div class='post-footer'>. Их должно быть две. В нашем случае нужна именно вторая.

Если не получается таким образом найти, попробуйте в блоке где все секции  includable вот эту строчку <b:includable id='post' var='post'/>


Нажмите на чёрный маркер слева, чтобы открыть весь код. И там посмотрите <div class='post-footer'>. Копируем второй сгенерированный код HTML/JavaScript  и над этой строкой устанавливаем его.

Сейчас копируем первый код CSS и там же в шаблоне ищем знакомую уже ]]></b:skin> и над ней его вставляем.
Всё. Нажмите предварительный просмотр и если нет никаких замечаний, сохраняем шаблон.

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

Хочется надеяться, что достаточно понятно всё изложила и вам не составит труда с этим справиться. Единственное на чём хотела бы заострить ваше внимание, так это на правильной установке кода HTML/JavaScript. А с остальным ничего сложного нет. В любом случае, если возникнут вопросы обращайтесь.

И на этом сегодня закончу. Спасибо всем что читаете мои шпаргалки. До новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Ничего не отобразилось в итоге. Или нужно время подождать?

    ОтветитьУдалить
    Ответы
    1. liza belova, он у Вас установлен верно. По крайней мере на месте. Тут я вижу 2 возможные причины.Зашла на Ваш блог. Там стоит уже виджет Engageya. Вероятно конфликт. Но, скорее всего то, что в блоге ещё мало статей. Такое бывает. С тем же виджетом от LinkWithin.

      Удалить
  2. А в чем может быть проблема, что вместо миниатюр изображений просто серый квадрат?

    ОтветитьУдалить
    Ответы
    1. liza belova-когда я тестировала эти виджеты, то на блогах с малым количеством статей изображения не появлялись тоже. А вообще, зачем Вам ещё один виджет похожих статей. У Вас же есть Engageya.

      Удалить
  3. Engageya уже мной удалена. Не корректно работает: заменяет мои изображения на ужасные картинки из интернета в миниатюре, так же "рекомендует" удаленные посты, а это мне не очень то и нравится.
    Спасибо вам за ваши подсказки:)

    ОтветитьУдалить
    Ответы
    1. liza belova, я в своё время сразу от него отказалась. Через неделю вирус выполз. Попробуйте вот этот http://www.shpargalochki.ru/2015/03/pohozhie-soobshhenija-pod-pod-kazhdym-postom.html

      Удалить

Пользовательский поиск