Гаджет последние сообщения для Blogger

Канал Многие опробовали интересный гаджет Blog List. Он позволяет показывать те блоги, читателями которых вы являетесь. Им то мы воспользуемся и для отображения последних записей: "Дизайн"-"Элементы страницы"-"Добавить гаджет". Но вместо чужих блогов будем добавлять URL-адрес своей RSS ленты.

Вспомним, что у нас есть несколько RSS-каналов:
http://имя_блога.blogspot.com/feeds/posts/default - для блога в целом
http://имя_блога.blogspot.com/feeds/posts/default/-/название_ярлыка - для ярлыков
Их можно настроить, показывая только одну запись:
http://имя_блога.blogspot.com/feeds/posts/default?start-index=1&max-results=1 - для последней записи
http://имя_блога.blogspot.com/feeds/posts/default?start-index=2&max-results=1 - для предпоследней записи
http://имя_блога.blogspot.com/feeds/posts/default?start-index=n&max-results=1 - для n-записи
Последние сообщения
После создания нескольких записей, переходим в "Дизайн"-"Изменить HTML" и, указав "Расширить шаблоны виджета", заменяем:
<div class='widget-content'>
      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
        <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
          <b:loop values='data:items' var='item'>
            <li expr:style='data:item.displayStyle'>
              <div class='blog-icon'>
                <b:if cond='data:showIcon == &quot;true&quot;'>
                  <input expr:value='data:item.blogIconUrl' type='hidden'/>
                </b:if>
              </div>
              <div class='blog-content'>
                <div class='blog-title'>
                  <a expr:href='data:item.blogUrl' target='_blank'>
                    <data:item.blogTitle/></a>
                </div>
                <div class='item-content'>
                  <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                    <b:if cond='data:item.itemThumbnail'> 
                      <div class='item-thumbnail'>
                        <a expr:href='data:item.blogUrl' target='_blank'>
                          <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                        </a>
                      </div>
                    </b:if>
                  </b:if>
                  <b:if cond='data:showItemTitle == &quot;true&quot;'>
                    <span class='item-title'>
                      <b:if cond='data:item.itemUrl != &quot;&quot;'>
                        <a expr:href='data:item.itemUrl' target='_blank'>
                          <data:item.itemTitle/></a>
                      <b:else/>
                        <data:item.itemTitle/>
                      </b:if>
                    </span>
                  </b:if>
                  <b:if cond='data:showItemSnippet == &quot;true&quot;'> 
                    <b:if cond='data:showItemTitle == &quot;true&quot;'>
                      -
                    </b:if>
                    <span class='item-snippet'>
                      <data:item.itemSnippet/>
                    </span>
                  </b:if>
                  <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                    <div class='item-time'>
                      <data:item.timePeriodSinceLastUpdate/>
                    </div>
                  </b:if>
                </div>
              </div>
              <div style='clear: both;'/>
            </li>
          </b:loop>
        </ul>
на
<div class='widget-content'>
      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
        <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
          <b:loop values='data:items' var='item'>
            <b:if cond='data:blog.url != data:item.itemUrl'>
            <li expr:style='data:item.displayStyle'>
               <div class='blog-content'>
                <b:if cond='data:showItemTitle == &quot;true&quot;'>
                   <div class='blog-title'>
                  <b:if cond='data:item.itemUrl != &quot;&quot;'>
                        <a expr:href='data:item.itemUrl' target='_blank'>
                          <data:item.itemTitle/></a>
                      <b:else/>
                        <data:item.itemTitle/>
                      </b:if>
                </div></b:if>
                <div class='item-content'>
                  <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                    <b:if cond='data:item.itemThumbnail'> 
                      <div class='item-thumbnail'>
                        <a expr:href='data:item.itemUrl' target='_blank'>
                          <img expr:alt='data:item.itemTitle' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                        </a>
                      </div>
                      <b:else/>
<div class='item-thumbnail'><a expr:href='data:item.itemUrl' target='_blank'><img alt='Blogger' border='0' height='72' src='адрес_альтернативного_изо' width='72'/></a></div>
                    </b:if>
                  </b:if>
                  <b:if cond='data:showItemSnippet == &quot;true&quot;'> 
                    <span class='item-snippet'>
                      <data:item.itemSnippet/>
                    </span>
                  </b:if>
                  <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                    <div class='item-time'>
                      <data:item.timePeriodSinceLastUpdate/>
                    </div>
                  </b:if>
                </div>
              </div>
              <div style='clear: both;'/>
            </li>
            </b:if>
          </b:loop>
        </ul>
Благодаря условию
<b:if cond='data:blog.url != data:item.itemUrl'>...</b:if>
мы не увидим запись той страницы, на которой находимся. В результате чего текст не повторяется в теле одного URL и отсутствует ссылка "на себя". Что более привлекательно с точки зрения поисковой системы. Но чтобы место не пустовало, добавим свою наиболее популярную страницу между кодом </li>......</b:if>:
<b:else/>
<li expr:style='data:item.displayStyle'>
               <div class='blog-content'>
                 <div class='blog-title'>
                   <a href='адрес_своей_страницы' target='_blank'>заголовок_своей_страницы</a>
                 </div>
                <div class='item-content'>
                   <div class='item-thumbnail'>
                        <a href='адрес_своей_страницы' target='_blank'>
                          <img alt='альтернативный_текст_изо' border='0' height='72' src='адрес_изо_своей_страницы' width='72'/>
                        </a>
                      </div>
                   <span class='item-snippet'>
                      текст_нашей_страницы... 
                    </span>
                    <div class='item-time'>
                      много часов назад
                    </div>
                  </div>
              </div>
              <div style='clear: both;'/>
            </li>
Гаджет BlogList

Упрощенный вариант

В первом случае получиться тот же вид, что и при использовании гаджета "Популярные сообщения". Мне же был интересен вариант покомпактней, то есть без вступительных слов. Они отвлекают и всё равно не дают понять о чём будет повествование в статье. От картинок я не смогла отказаться, они привлекают и фокусируют внимание.
Вид упрощённого варианта гаджета Последние сообщения
Меняем тот же код, но на:
    <div class='widget-content'>
      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
        <ul>
          <b:loop values='data:items' var='item'>
            <li expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
              <a expr:href='data:item.itemUrl' expr:title='data:item.itemTitle' target='_blank'>
                <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                  <b:if cond='data:item.itemThumbnail'>                          
                    <img border='0' expr:alt='data:item.itemTitle' expr:height='72' expr:src='data:item.itemThumbnail.url' expr:width='72'/>
                  <b:else/>
                    <img border='0' expr:alt='data:item.itemTitle' expr:height='72' expr:width='72' src='http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png'/>
                  </b:if>
                </b:if>
              </a> 
            </li>
          </b:loop>
        </ul>
http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png - это адрес картинки, которая будет показана в случае, если в статье отсутствуют изображения. Её замените более подходящей. Условие data:blog.url != data:item.itemUrl можно добавить при желании согласно примеру выше.

И CSS:
.BlogList a {
  position: relative;
  display: block;
  text-align:right;
}

.BlogList img {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);}

.BlogList a:before {
  content: attr(title); 
  left: 0; 
  position:absolute; 
  top: 20%;  
  width: 70%; 
  text-align:left;
  font-weight: bold;
}

Картинка, при наведении на которую появляется название сообщения

Этот вариант подходит блогам, где внешний вид будет важнее содержания, например, посвященным приготовлению блюд или вышиванию. Здесь код будет тот же, но стиль CSS:
#BlogList1_blogs { 
  position:relative; 
  height: 75px;
}

#BlogList1_blogs img, #BlogList1_blogs a:after {
  content: attr(title); 
  position:absolute; 
  top: 0; 
  left: 0; 
 }

  #BlogList1_blogs a:after {opacity:0;filter:alpha(opacity=0);}
  #BlogList1_blogs:hover a:after {opacity:1;filter:alpha(opacity=100);}
  #BlogList1_blogs:hover img, #BlogList1_blogs img:hover {opacity:0;filter:alpha(opacity=0);}
Более подходящий вариант посмотрите в статье "Как сделать, чтобы при наведении на картинку, она менялась".
в f t
наверх ↑

33 комментария:

Tanka
Поставила у себя в блоге, спасибо! Несколько дней думала, как бы такое осуществить. А как можно увеличить картинку (сейчас 72х72 пикс.), добавить заголовок и короткую новость к превьюшкам, а то отображает только картинки и дату публикации и всё (
NMitra
"Дизайн"-"Элементы страницы"-"нужный гаджет". Там указываем необходимые настройки

Значок
Заголовок последнего элемента
Фрагмент последнего элемента
Эскиз последнего элемента
Дата последнего обновления.

Для увеличения изображения код

<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>

изменяем на

<img alt='' border='0' expr:height='150' expr:src='data:item.itemThumbnail.url' expr:width='150'/>

Но будет не совсем хорошо. В идеале нужно менять строку в шаблоне с s72-c:

<link rel="image_src" href="http://1.bp.blogspot.com/-9TxksgLNDcI/TfcUoo5gkEI/AAAAAAAAIgQ/9qG5t4f7FNM/s72-c/altered_egg.jpg" />
Tanka
Спасибо :) Картинку решила не увеличивать, да получается не очень качество.
Tanka
Почему-то работает неправильно ( Я написала новый пост в блог и исчезло предпоследнее сообщение в блоге, вместо него 3я новость, и она на своем 3-ем месте. Это можно как-то исправить? Спасибо
NMitra
Да, я тоже заметила такую особенность. Насколько я поняла, такое происходит при редактировании статьи. Пусть пройдёт немного времени, нормализуется.

Ещё один момент. Подправила пост (см. статью), а именно заменила:
<a expr:href='data:item.blogUrl' target='_blank'>
на
<a expr:href='data:item.itemUrl' target='_blank'>
Иначе ссылка с картинки ведёт на Главную блога.
Tanka
Спасибо, заменила :)
trololo
Это только для google blogger?
NMitra
Не очень поняла вопрос.

RSS будет показана любого блога. Вот только картинка будет видна только тех, где прописано в коде

<link rel="image_src" href="" />
Космо Мизраил Горыныч
NMitra, то ли я что-то не то сделал, то ли что-то где-то не работает... Сделал такой виджет, заголовки есть, а вот картинок нету... Т_Т

я шаблон не менял, альтернативные изображения и не понадобятся...

можете посмотреть????

сайт createhtml5games.blogspot.com, там в правой колонке 3 ссылки (под вашими комментаторами :) ).

Может там нужно как-то по особому указывать эскизы???

link из поста №8, вставленный в сообщение, не помог.
NMitra
В гаджете все галочки поставили?
Космо Мизраил Горыныч
Не все, но показ эскизов есть. Фавиконка отключены и фрагмент содержания.

С телефона зашёл, у одного поста ion cannon есть эскиз, а вот на компьютерной версии всё нету.
Космо Мизраил Горыныч
%| Одна иконка из трёх появилась, она квадратная в формате png. Остальные в jpg и одна из них тоже квадратная.

Если ткнуть на картинку, то она ведёт к показу статей с ярлыком, но это я через шаблон добью.

Иконка появилась где-то через пол-часа после обновления материала, может больше.
Космо Мизраил Горыныч
О______________О ещё одна *U*

NMitra, видимо, эти квадратики просто не сразу появляются))))) Проблема, думаю, решена :)
NMitra
Странно...
Фиалка-фиалка
подскажите пожалуйста. не могу редактировать гаджет Blog List - у меня там сейчас 188 блогов - не могу ни удалить старые, ни добавить новые блоги и поменять настройки. что можно сделать?
NMitra
Попробуйте удалить весь гаджет и заново создать новый.
Фиалка-фиалка
спасибо, я тоже об этом думала) а как сохранить перед этим прежний список блогов, чтобы потом их по новой вставить можно было?
NMitra
Только в ручную, просматривая данные из блога, а не в интерфейсе.
Фиалка-фиалка
понятно) спасибо за помощь
Tanka
Добрый день! Вы мне не подскажете, я перешла с блогспота на свой домен, и теперь эта фишка не работает ((

был craft-fair.blogspot - стал tanyabatrak.com
NMitra
Нужно адреса заново в гаджет вносить

http://имя_блога/feeds/posts/default?start-index=1&max-results=1

Имя блога сменилось.

Войдите в старый интерфейс по шестерёнке для изменения адресов.
Tanka
Я добавила новые ссылки, но все равно не работает.
"Войдите в старый интерфейс по шестерёнке для изменения адресов." - енто что? :)
NMitra
От домена не зависит внешний вид и функционал блога, только от шаблона. Новый гаджет Blog List в шаблоне работает?

http://3.bp.blogspot.com/-7Esd3i_rLOs/Tz5hPzf7_AI/AAAAAAAACus/knNyDRVE22E/s1600/staryi-interfeis-blogger.png
Tanka
неа, он должен быть у меня под надписью "последние сообщения блога", но он не отображается. Там у меня две ссылки, одну поставила на мое последнее сообщение блога, а вторую на чужой рсс. Но не видно, ни того, ни другого.
NMitra
Я правильно поняла, что вы удалили предыдущий гаджет и создали новый без каких-либо изменений? И он не функционирует?
Tanka
Нет, я изменяла старый
NMitra
Попробуй взять новый и сделать заново, может что было удалено случайно.
Tanka
Ураа, заработало :) Спасибо! Удалила старый список и создала новый :)
Julia De
А как вместо "data:item.itemThumbnail" поставить в коде ссылку на картинку в изначальном размере, а не эскиз?
NMitra
Попробуйте так. Перед </head> добавить:

<script>
function IzoLastPosts() {
document.getElementById(&#39;BlogList1&#39;).innerHTML = document.getElementById(&#39;BlogList1&#39;).innerHTML.replace(/s72-c/g, &#39;s00&#39;);
}
document.addEventListener( &quot;DOMContentLoaded&quot;, IzoLastPosts, false );
</script>
Julia De
Спасибо огромное!
Всё получилось!!! :))
Космо Мизраил Горыныч
А у меня всё сломалось. Блог перестаёт отображать виджет вообще (даже в хтмл), как только я пихаю в него ссылку на блог-обладатель. При этом на черновике с тем же шаблоном работают те же ссылки.
NMitra
Не знаю почему так. Иногда почему-то глючит.