Генератор кода похожие сообщения под каждым постом в 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