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

Стильный виджет связанных сообщений под каждым постом для Blogger

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

Как установить стильный виджет связанных сообщений под каждым постом в Blogger

Заходим в Blogger--Шаблон--Изменить HTML. При помощи комбинаций клавиш (Ctrl+F) находим строчку кода ]]></b:skin> и перед ней вставляем стиль нашего красивого виджета:
/* Related Posts Widget
----------------------------------------------- */
ul#related-posts{
    font-family:Helvetica,Arial,sans-serif !important;
    font-size:10px !important;
    list-style: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}
ul#related-posts li{
    float: left !important;
    height: auto !important;
    margin:0 15px !important;
    padding: 2px 1px 4px !important;
}
*html ul#related-posts li{
    margin:0 13px !important;
}
ul#related-posts li a {
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid #FFFFFF !important;
    display: block !important;
    height: 72px !important;
    position: relative !important;
    width: 72px !important;
}
ul#related-posts li a {
    color: #474C51 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 #FFFFFF !important;
}
ul#related-posts li .overlay {
    height: 66px !important;
    line-height: 14px !important;
    padding:6px 0 0 6px !important;
    position: absolute !important;
    width: 66px !important;
    z-index: 10 !important;
}
ul#related-posts li a:hover .overlay {
    background: #fff !important;
    display: block !important;
    opacity:0.9 !important;
}
ul#related-posts li img {
    bottom: 0 !important;
    padding:0px !important;
}
ul#related-posts li a:hover {
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

Затем находим другую строчку <b:includable id='backlinks' var='post'> и чуть ниже вставляем код:
<!--remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://lh6.googleusercontent.com/-BWeuPdXbt-c/TtTZJzzz5XE/AAAAAAAAC_o/Vg9SEd3AzmI/s195-c/29201102&quot;;
var maxresults=4;
</script>
<script src='http://dl.dropbox.com/u/48089857/hover.js' type='text/javascript'/>
        <b:loop values='data:post.labels' var='label'>
             <b:if cond='data:label.isLast != &quot;true&quot;'>
        </b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
         </b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if> <!--remove-->

Далее ищем один из кодов, какой найдёте в вашем шаблоне (шаблоны у всех разные):

<div class='post-footer'>
 или такой  
<div class='post-footer-line post-footer-line-1'>
 а может такой
<div class='post-footer-line post-footer-line-2'>

Теперь чуть ниже кода,какой нашли вставляем код:
<b:include data='post' name='RelatedPosts'/>
Всё готово.Теперь если хотите, можете заменить число вывода показа связанных сообщений в этой строчке: var maxresults=4; по умолчанию стоит 4. Всем пока. До скорой встречи.

Также можете посмотреть: бегущая строка с последними статьями или виджет облако тегов для Blogger

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

35 коммент. :

  1. Спасибо, Сергей! Отличная штука! Подумываю над употреблением нечто подобного! Уверен, и другим пригодиться!!!

    ОтветитьУдалить
  2. Нечто подобное обязательно устанавливай.Спасибо,что заглянул на огонёк.

    ОтветитьУдалить
  3. Как думаешь есть нам смысл обменяться ссылками ?

    ОтветитьУдалить
  4. Пока мне ещё рановато.Блог молодой.

    ОтветитьУдалить
  5. Николай у Вас много хороших онлайн сервисов.А почему Вы  все ссылки оставляете открытыми для индексации.

    ОтветитьУдалить
  6. Привет, этот пост попал в Топ каталога Russian Top Blogspot

    ОтветитьУдалить
  7. Это значит, что ваш пост один из лучших

    ОтветитьУдалить
  8. Наверное потому, что не знаю что лучше.
    Я не спец в SEO скорее наоборот.
    Только информацию по теме получается хорошо собирать
    а с правильной подачей проблемы.

    ОтветитьУдалить
  9. Да я тоже не спец.У меня в политблогах все ссылки открытые на источники.Посещаемость нормальная.

    ОтветитьУдалить
  10. Не смог поставить.. Вставляя код номер 2, ругается на ошибки "
    Виджет с идентификатором "Blog1" содержит как
    минимум два элемента b:includable с одинаковым идентификатором
    "backlinks". Каждый элемент b:includable должен иметь
    уникальный идентификатор для данного виджета."
    Я как человек далёкий от сего не могу понять в чём дело..

    ОтветитьУдалить
  11.  Попытался удалить как верхний так и нижний
    "
    "
    то страница загружается но без центральной части, какая попросту отсутствует.

    ОтветитьУдалить
  12. А какой у Вас шаблон?Дайте ссылку на блог.

    ОтветитьУдалить
  13. Сюда хочу поставить - http://www.blog.arcane-clan.ru/
    А тут на тестовом пробую http://arcane-test.blogspot.com/
    Шаблон из стандартных Travel

    ОтветитьУдалить
  14. Здравствуйте Сергей! Помогите пожалуйста! Я тоже не смогла поставить и по той же причине. Шаблон 
    Виджет с идентификатором "Blog1" содержит как 

    минимум два элемента b:includable с одинаковым идентиф 
    "backlinks". Каждый элемент b:includable должен иметь
    уникальный идентификатор для данного виджета."Красивое дополнение, но никак не поставить.
    Может посоветуете что. Спасибо.
    http://tasha50.blogspot.com 

    ОтветитьУдалить
  15. Привет Марина!Пожалуйста прости, что сразу не ответил я был в отъезде на несколько дней.

    ОтветитьУдалить
  16. Огромное Спасибо Сергей! Все получилось на основном болге!
    Рада, что есть отзывчивые люди. Надеюсь и в дальнейшем на помощь, ну если что:)))

    ОтветитьУдалить
  17. Я всегда рад помочь.Сам научился, научи других.Я помню сам когда начинал,вообще не чего не умел.Теперь надо другим помочь.

    ОтветитьУдалить
  18. Вроде я тут уже отписывался, пришёл проверить комментарии, а моего-то и нет. Может, пошёл как спам, а может я что-то путаю. Попробую ещё раз: если вам описанного функционала мало (мне мало), то можете попробовать похожий виджет от graddit.com (описание настройки виджета: http://fruitfulbookmarks-ru.blogspot.com/2012/06/blog-post.html). Из плюсов: гибкость - можно вручную указать связанные посты, но если лень, то можно и на теги положиться. Одно но: виджет работает не сам по себе, а является дополнением к виджету рейтингов, который должен быть так же установлен - для сбора информации о постах. Попробуйте - может, понравится. Открыт для критики.

    ОтветитьУдалить
  19. Комментарии с ссылками дискус не пропускает,пока я не одобрю.Иногда я забываю заглянуть, проверить комментарии.Прошу меня извинить.Сервис graddit я знаю,вроде нормальный,но мне подходит виджет который установлен у меня.

    ОтветитьУдалить
  20. У тебя ошибка в коде. Я долго не мог понять в чем дело пока не нашел первоисточник. Ты посеял одну строчку и описание не правильное сделал.

    "Затем находим другую строчку и чуть ниже вставляем код:" по меняй на

    ->

    "Затем находим другую строчку и заменяем ее на:" твой код плюс пропущенная в нем строка которая должна стоять в самом начале

    ОтветитьУдалить
  21. Олег,здесь всё правильно.Вы перепутали этот виджет с другим.Вы демо видели?

    ОтветитьУдалить
  22. позволю с тобой не согласиться, проделай сначала ровно только то что у тебя указано в инструкции, я делал по ней и не по какой другой, я брал ровно твой код и больше ничей, когда я увидел что он не работает я начал разбираться в чем проблема. Порывшись в джаваскрипте приведенного тобой же кода я нашел ссылку на ресурс который его модифицировал, я нашел его на этом ресурсе, англоязычном. После всего этого я просто добавил в тобой приведенный код ту самую строку что тебе говорю и все заработало. Так что просто прими к сведению. А вообще прикольный у тебя ресурс, спасибо.

    ОтветитьУдалить
  23. Подскажите, а какой виджет для related post установлен у Вас в блоге? Очень уж понравился =)

    ОтветитьУдалить
    Ответы
    1. Привет,Алексей!Здесь в блоге, этот виджет уже был установлен.Шаблон такой. 8-)

      Удалить
  24. Далее ищем один из кодов, какой найдёте в вашем шаблоне (шаблоны у всех разные).
    Никак не могу найти ни один.
    Что делать?

    ОтветитьУдалить
    Ответы
    1. Привет,Дмитрий! Воспользуйтесь сочетанием клавиш Ctrl+F в появившемся окошко вставьте искомый код.Прежде, сначала нажмите Форматировать шаблон,затем ищите.Удачи.

      Удалить
    2. Может туплю.Все сделал как вы написали все равно нет этих строчек.Уже даже весь шаблон вдоль и поперек просмотрел.Шаблон обычный(стандартный) "Венецианское окно".
      До этого проблем не было.Может что нибудь поменялось?

      Удалить
    3. Тогда попробуйте <data:post.body/>

      Удалить
    4. нету.Я в растерянности.Пол года назад 2 блога сделал, там находил все без проблем.А щас новый блог создал и завис....

      Удалить
    5. Дмитрий,такого не может быть.Постарайся найти <b:includable id='post' var='post'> и раскрой код полностью, нажав на стрелку.Там будут все строчки.

      Удалить
    6. Ура!!!! Спасибо большое за очень быстрые и внятные ответы.
      Про стрелочки я и не догнал..........

      Удалить
    7. Хорошо.Теперь будете знать, как раскрыть код в шаблоне.

      Удалить

 
Footer