Новое в блоге
Loading...
22 янв. 2012 г.

Виджет похожие сообщения без миниатюр для Blogger

Добрый вечер! Сегодня этот пост для тех, кто хочет установить виджет--похожие сообщения под каждым постом без миниатюр. Это значит, что будут выводиться в конце статьи только  заголовки ваших связанных постов. Были вчера такие просьбы, показать как это сделать. "Школа Blogger(а)" для начинающих, с большим вниманием относится к таким просьбам и с огромным удовольствием покажет как установить в блог виджет похожие сообщения без миниатюр. Как это будет выглядеть в блоге, прошу смотреть живой пример здесь. А вот небольшой скриншот виджета похожих сообщений:

Скриншот виджета
Как установить виджет похожих сообщений под каждым постом без миниатюр

Для этого нам понадобиться всего пару шагов.Зайти в Blogger-Шаблон-Изменить HTML и ищем при помощи сочетания клавиш(CTRL+F) в шаблоне такую строчку кода: </head> и над ней вставляем код стиля виджета:
<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://lh6.googleusercontent.com/-2JWL1R0i0i0/TxsH-tOc_lI/AAAAAAAAENs/pgk0U-IDGsE/w10/green.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Похожие сообщения:";
</script>
<script src='http://dl.dropbox.com/u/48089857/related-posts.txt' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles  End-->

Здесь, в этой строке Вы можете сразу поменять название var relatedpoststitle="Похожие сообщения:"; на своё. Теперь переходим ко второму шагу. Найти одну из этих строчек (ищем внимательно): <data:post.body/> или  <div class='post-footer'>  или  <div class='post-footer-line post-footer-line-1'>   или <div class='post-footer-line post-footer-line-2'>  и чуть ниже одной из строк какую нашли вставляем такой код:
<!-- Related Posts Code  Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='#'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://3.bp.blogspot.com/_jM8-wHc3NKY/TPyFOT4CmhI/AAAAAAAAADM/MvlLp1fyfoM/s1600/blogger-widgets.png" /></a>
<script type='text/javascript'>
var maxresults=8;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<!--Remove--></b:if>
<!-- Related Posts Code  End-->

Здесь указывается в этой строчке - var maxresults=8; количество выводимых заголовков сообщений. Всё. Нажимаем просмотр, если всё в норме, сохраняем шаблон. Всем пока. До новых встреч.

Аналогично этому виджету можно воспользоваться онлайн сервисом-виджет оценка постов "Пять звёзд" для Blogger тут можно выбрать виджет с картинками или без. Плюс оценка ваших постов. Смотрите также: похожие статьи с миниатюрами виджет для Blogger

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

12 коммент. :

  1. спс, к стати, в коде скрытая ссылка на блог автора(наверное)

    ОтветитьУдалить
  2. Пожалуйста.Да во втором коде ссылка есть,можете её убрать.

    ОтветитьУдалить
  3. Спасибо, пригодилось, только у меня почему то получилось слияния "похожие статьи" и кнопками соц. сетей -
    Web 2.0 - сервисы для школ

    ОтветитьУдалить
  4. Пожалуйста.Можно в шаблоне сделать промежуток между виджетом и кнопками.

    ОтветитьУдалить
  5. Пыжился, пыжился, но эффекта добиться не удалось. А жаль.

    ОтветитьУдалить
  6. Так не появились похожие сообщения.

    ОтветитьУдалить
  7. Попробуйте всё сделать заново.Если всё правильно сделаете,то должно работать.

    ОтветитьУдалить
  8. Спасибо! Все работает отлично! Подскажите пожалуйста, как сделать сам заголовок "Похожие сообщения" меньшим шрифтом?

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, Людмила.Заключите в теги <h6... </h6>

      Удалить
    2. Спасибо! Мне h4 больше подошел)))

      Удалить
    3. Пожалуйста!Хорошо, что догадались пробовать 5,4 и т.д.

      Удалить

 
Footer