Сегодня мы научимся добавлению очень полезного виджета ⇨ "похожие статьи" для каждого сообщения, на основании ярлыков. Это очень нужный виджет, после каждого вашего поста посетитель будет наблюдать ваши похожие записи с миниатюрами.
После очень простых действий на вашем блоге, в зависимости от ярлыков, будут отображены "похожие сообщения" и выглядит это так:
Как добавить "похожие сообщения" на блог
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.
Для нормальной работы виджета нужно иметь достаточное количество одинаковых ярлыков.
Слово "Похожие сообщения" можно заменить на своё.
comments powered by Disqus
Сегодня мы научились добавлять полезный виджет "похожие сообщения" для удобного пользования ваших читателей.
