Как в Blogger добавить похожие статьи с миниатюрами под каждое сообщение

Приветствую вас, бесценный мой читатель! Пользователям бесплатного блогохостинга Blogger посвящается. Сегодня пост, как в Blogger добавить похожие статьи с миниатюрами под каждое сообщение. Для того, чтобы у вас было из чего выбирать (здесь, предыдущий гаджет похожих сообщений) предлагаю вам рассмотреть ещё один отличный и очень оригинальный виджет для блога блоггер похожих статей. Будет два стиля, светлый и темный. Оба очень красивы и вам они обязательно понравятся.

Google Blogger виджет
Widget для блога Google Blogger

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

Светлый стиль:

Похожие статьи для Blogger
Похожие статьи для Blogger с миниатюрами и анонсом поста. Светлый стиль.

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

И для темного дизайна блога стиль виджета такой:

Темный стиль виджета
Темный стиль виджета похожих статей для Blogger

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

Как установить похожие статьи в блог Blogger с миниатюрами

Найдите в шаблоне вашего блога, при помощи сочетания клавиш Ctrl+F строчку </head>:

Blogger код
Находим нужный тег в шаблоне Blogger

Чуть выше данного тега вставить такой код:

Здесь, в этом коде вы сразу можете настроить - сколько выводить похожих записей, по умолчанию 4, а также, установить количество символов сниппета (анонса), по умолчанию 75. Идем далее, для светлого стиля виджета (смотрите скрин) нужно установить CSS, чуть выше всё того же тега </head> такой код:

А для тёмного стиля виджета нужно вставить такой код CSS:

Обратите внимание, что стили для виджета можно вставить чуть выше строчки ]]></b:skin>, нужно лишь убрать из кода <style> ..</style>. Можете прочитать инструкцию по вставке кода CSS в шаблон Blogger различными способами - тут. Ещё в стилях можно изменить высоту и ширину виджета: 120 и 200 по умолчанию, а также, размер эскиза изображения 82. Поехали дальше, теперь вам нужно в шаблоне найти вот такой код:

<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'>
,
</b:if>

 Код в шаблоне Blogger
Ищем нужный код в шаблоне

 

Далее, вам нужно чуть ниже добавить вот этот кодик, после </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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
</b:if>

И в итоге у нас получится вот так:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
</b:if>

И последний шаг, ищем ещё одну строчку в вашем шаблоне:

</b:includable>
<b:includable id='postQuickEdit' var='post'>

Код в шаблоне
Ищем ещё одну строчку в вашем шаблоне

И выше строки </b:includable> вставляем (смотрите скриншот) маленький кодик:

Здесь, в коде можете написать свой текст вместо моего - "ПОХОЖИЕ СТАТЬИ". Сохраняйте шаблон и готово. Вот как у меня получилось в итоге:

Виджет Blogger
Вывод похожих статей в блоге

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



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

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

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