Гаджет "Популярные сообщения" Blogger

• Как увеличить изображения в "Популярных сообщениях" от Blogspot
• Как сменить внешний вид
• В "Популярных сообщениях" сделать картинки в ряд или сеткой
• Почему не отображаются изображения в "Популярных сообщениях"
• Гаджет "Последние сообщения"
• Гаджет "Последние комментарии"

В этом гаджете показаны те страницы, которые пользователи просматривают чаще всего. Вот пример того, как он может выглядеть.

Как увеличить изображения в "Популярных сообщениях" от Blogspot

На вкладке Шаблон перед </head> добавить:

<script>
function IzoPopularPosts() {
  document.getElementById(&#39;PopularPosts1&#39;).innerHTML = document.getElementById(&#39;PopularPosts1&#39;).innerHTML.replace(/s72-c/g, &#39;s210-c&#39;);
}
document.addEventListener( &quot;DOMContentLoaded&quot;, IzoPopularPosts, false );
</script>

изменить:

исходный кодитоговый код

  <b:widget id='PopularPosts1' locked='false' title='Популярные сообщения' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize'expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'height='210' width='210'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize'expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'height='210' width='210'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

Вместо значения 210 указывайте своё. Подробности об особенностях URL картинок в Blogger.

Как сменить внешний вид

На вкладке Шаблон перед ]]></b:skin> добавить:

.PopularPosts .widget-content { /* общее поле */ }

.PopularPosts .widget-content ul li { /* каждый из пунктов */ }

.PopularPosts .item-title { /* название сообщения */ }

.PopularPosts .item-thumbnail { /* поле с изображениями */ }

.PopularPosts img { /* изображения */ }

Например, мне больше нравится когда каждый элемент списка имеет своё поле, а шрифт меньше установленного для статьи:

.PopularPosts .widget-content {font-size: small;}
.PopularPosts .widget-content ul li {
  background: #fff;
  margin: 5px 0;
  padding: 3px;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 5px;
}

В "Популярных сообщениях" сделать картинки в ряд или сеткой

Перед </head> добавить:

<script>
function IzoPopularPosts() {
  document.getElementById(&#39;PopularPosts1&#39;).innerHTML = document.getElementById(&#39;PopularPosts1&#39;).innerHTML.replace(/s72-c/g, &#39;s00&#39;);
}
document.addEventListener( &quot;DOMContentLoaded&quot;, IzoPopularPosts, false );
</script>

Исходный код (см. выше) привести к виду:

            <b:widget id='PopularPosts1' locked='false' title='Популярные сообщения' type='PopularPosts'>
              <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
        <style>
          .imgPopularPosts {
            display: block;
            width: calc(100%/4 - 1%*3/4); /* из расчёта, что в ряду будет 4 изображения */ 
            float: left;
            margin-right: 1%;
          }
          .imgPopularPosts:nth-of-type(4n) { /* из расчёта, что в ряду будет 4 изображения */ 
            margin-right: 0;
          }
          .imgPopularPosts img {
            padding: 0;
          }
        </style>
      <b:loop values='data:posts' var='post'>
        <a expr:href='data:post.href' expr:title='data:post.title' target='_blank' class="imgPopularPosts">
          <b:if cond='data:post.thumbnail'>
            <img alt='' expr:src='data:post.thumbnail' height='80' width='100%'/> <!-- высота картинки 80px -->
          <b:else/>
            <img expr:alt='data:post.title' height='80' src='свой_адрес_альтернативного_изображения' width='100%'/> <!-- если в популярном сообщении отсутствует картинка, то её заменит это фото -->
          </b:if>
        </a>
      </b:loop>
    <b:include name='quickedit'/>
  </div>
</b:includable>
            </b:widget>

Почему не отображаются изображения в "Популярных сообщениях"

Несколько человек у меня поинтересовалось, почему некоторые картинки не видны. Ответ мы узнаем, если заглянем в исходный код страницы. Дело в том, что в скрипт заложен вид URL-адреса изображения, ориентированный на альбом Google+. Его структура в <img height="" src="URL-адрес" width="" alt=""/> на вкладке "Изменить HTML" должна выглядеть как:

http://4.bp.blogspot.com/-HxWJeED5k_8/TYYeP_00fcI/AAAAAAAABks/MO5kKDY4FzI/s1600/populyarnye-soobshcheniya-Blogger.png

При использовании внешнего редактора, например, Windows Live Writer, картинки также попадают в Google+, но имеют другой адрес:

http://lh3.ggpht.com/_VgypggpIQxU/TW-h-cL2u4I/AAAAAAAAAYI/a_T0I1STUlI/41002%5B7%5D.jpg?imgmax=800

Его мы скорректируем под наш формат:

http://lh3.ggpht.com/_VgypggpIQxU/TW-h-cL2u4I/AAAAAAAAAYI/a_T0I1STUlI/s800/41002%5B7%5D.jpg

удалив все символы после знака вопроса включительно и добавив s800. Обратите внимание, что цифра 800 присутствует в конце исходного URL.