Сегодня мы научимся добавлению очень полезного виджета ⇨ "похожие статьи" для каждого сообщения, на основании ярлыков. Это очень нужный виджет, после каждого вашего поста посетитель будет наблюдать ваши похожие записи с миниатюрами.
После очень простых действий на вашем блоге, в зависимости от ярлыков, будут отображены "похожие сообщения" и выглядит это так:
Как добавить "похожие сообщения" на блог
1. Сначала заходим в панель управления blogger. Выбираем вкладку "Шаблон ⇨ Изменить HTML". Далее с помощью сочетаний клавиш (Ctrl+F), находим строку в вашем шаблоне </head> и прямо над ней вставляем код:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <!--Related Posts with thumbnails Scripts and Styles Start--><b:if cond='data:blog.pageType == "item"'><style type="text/css">#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}#related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, “Times New Roman”, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{color:black;}#related-posts a:hover{color:black;}#related-posts a:hover {background-color:#d4eaf2;}</style></b:if><!--Related Posts with thumbnails Scripts and Styles End--> |
2. Теперь ищем одну из этих строчек <div class='post-footer-line post-footer-line-1'>
Если вдруг не найдёте, то <p class='post-footer-line post-footer-line-1'>
Если вдруг не найдёте, то <p class='post-footer-line post-footer-line-1'>
Если уж вдруг нет никакой из эти строчек, то находим <data:post.body/>
Далее сразу после любой из этих строчек вставляем этот код:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
| <!-- Related Posts with Thumbnails Code Start--><b:if cond='data:blog.pageType == "item"'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='#' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='#' style='display:none;'>blogger widgets</a><script type='text/javascript'>var currentposturl="<data:post.url/>";var maxresults=5;var relatedpoststitle="Похожие сообщения";removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script></div><div style='clear:both'/></b:if><!-- Related Posts with Thumbnails Code End--> |
Поздравляю! У вас теперь красивый виджет, который поможет посетителям найти то, что они ищут.
3. Настройки;
Поговорим о настройках виджета:
Цвет текста, фон и т.д. ⇨ можно поменять в первом коде.
Максимальное количество сообщений для вывода ⇨ можно поменять во втором коде: var maxresults=5.
Для нормальной работы виджета нужно иметь достаточное количество одинаковых ярлыков.
Слово "Похожие сообщения" можно заменить на своё.
Сегодня мы научились добавлять полезный виджет "похожие сообщения" для удобного пользования ваших читателей.
