BloggaRolla
Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  вторник, августа 30, 2011  

Вывод похожих сообщений в блоге Related posts
Как альтернативу недавно опубликованному виджету похожих статей для блога на платформе Blogger могу предложить схожий блок со списком тематических постов, так называемый гаджет Related posts. Он имеет более скромные настройки в сравнении с предыдущим, но, между тем, достаточно стабилен в работе и неприхотлив в быту.

Автор виджета обитает здесь. На себя я взял смелость поменять изображение к списку постов и удалить ссылку на автора, которая выводилась внизу виджета и смотрелась не совсем эстетично в дизайне блога. Отчего мне пришлось изменить настройки скрипта и перезалить его себе на хостинг. Для надежности вы можете сохранить на компьютер строку стороннего скрипта https://sites.google.com/site/serebrock/hranitel-fajlov/Related_posts.js из кода, указанного ниже, и загрузить на свое хранилище файлов. Это для особо мнительных.

Виджет схожих постов Related posts выглядит примерно таким образом:

Вывод похожих сообщений в блоге Related posts
Установка виджета похожих статей в блог.

Итак, чтобы разместить эту весьма полезную вещицу у себя в блоге, потребуется несколько абсолютно не энергозатратных шагов.
В административной панели вашего блога проследуйте Дизайн > Изменить HTML. Отметьте галочкой "Расширить шаблоны виджета" и приступите к поискам. Найдите в шаблоне строку </head> и прямо перед ней разместите следующий код:
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;http://4.bp.blogspot.com/-u8oRycdBSvA/TlxGGHK55GI/AAAAAAAABpM/utwXDnf43AY/s1600/scrollright.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/serebrock/hranitel-fajlov/Related_posts.js' type='text/javascript'/>
Здесь и содержится упомянутый выше сторонний скрипт, который вы можете залить себе, а можете оставить нетронутым, так как адрес его размещения относительно надежен. Также в этом участке кода присутствует ссылка на изображение, которое будет выводиться к каждому сообщению в списке, вида http://4.bp.blogspot.com/-u8oRycdBSvA/TlxGGHK55GI/
AAAAAAAABpM/utwXDnf43AY/s1600/scrollright.png. Ее вы тоже можете изменить на адрес собственной картинки.

Дальнейшим действием мы в шаблоне находим строку <data:post.body/> и уже после нее вставляем еще один код, который отвечает за непосредственный вывод виджета похожих сообщений:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Похожие посты : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Здесь вы вольны изменить отображаемую надпись к похожим сообщениям, заменив "Похожие посты" на собственное наименование, а также указать количество выводимых постов посредством изменения числового значения в строке max-results=5.

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



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.