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

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

Как увеличить изображения в "Популярных сообщениях" от 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
Вид сообщения http://shpargalkablog.ru/2011/03/populyarnye-soobshcheniya-blogger.html на вкладке HTML

При использовании внешнего редактора, например, 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.
в f t
наверх ↑

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

Яна
У меня изначально все картинки из пикасы были, но все равно недели 2 назад их не было видно
сейчас все наладилось
NMitra
Хорошо, что всё наладилось!
Олеся_Fialka
У меня не отображались картинки, которые были вставлены из Интернета путем копирования адреса ссылки. Я думала, что все равно картинка продублируется в Пикассе, но видимо нет.
NMitra
Да, этого не происходит. В Picasa они попадают только при загрузки сразу со своего компьютера.
Alexandr
А можно для чайника более подробно описать как и что делать. С первого пункта.
Alexandr
Например что вписываеться в /общее поле/ ,/каждый из пунктов/,и т.д. И сам код вставляеться в изменение HTML при создании нового сообщения или редактируется сам блог
NMitra
В указанные поля мы пишем свойства CSS, определяющие внешний вид гаджета. Пропустите это. Данные изменения необязательные. Если хотите, можете добавить стили как в примере при изменении шаблона "Дизайн"-"Изменить HTML".

Эта конструкция обозначает комментарии, то есть эти символы не будут участвовать в коде, они нужны для того, чтобы веб-мастер имел возможность делать заметки по-поводу каких-либо фрагментов кода:

/* комментарий */

Редактировать сообщение нужно только, если вы используете внешний редактор. Если вы пишете статьи в Blogger, то изменять ничего не нужно.

И небольшая просьба: откройте профиль с вашим блогом, по которому есть вопросы, или воспользуйтесь вариантом "Имя/URL". Я как правило просматриваю блоги для понятия сути вопроса.
Morskaia
Спасибо большое! я чайник, но у меня все-таки получилось по вашим объяснениям поменять попул.сообщения:)
NMitra
Рада слышать)
Максим
по поводу индексации, не дублирует ли виджет ссылки?
NMitra
Какие ссылки? Заголовок сообщения? Да, хорошо, когда анкор ссылки на каждой страницы разный, но осуществить это возможно только вручную... А когда 500 и более страниц...
Максим
Я в данный момент боролся со скрытием Ярлыков от индексации, не станут ли Популярные Посты такой же проблемой?
NMitra
Нет, здесь ссылки ведут на страницу сообщения, а не вида http://название_блога/search/....
Максим
Спасибо большое за подробный и быстрый ответ)
NMitra
Пожалуйста)
Анонимный
у меня не действует, нет вообще такого в коде :(
NMitra
Что именно нет и чего хотите добиться? ]]></b:skin>? Каков адрес блога?
Анонимный
вот адрес: http://www.tiptop-desktop.ru/ я заливаю картинки прямой ссылкой с другого хостинга и хочу добиться отображения в гаджете "популярные сообщения". очень рассчитываю на Вашу помощь. Как с Вами можно связаться по почте?
NMitra
Как я уже указала, в скрипте используется определённый формат изображений, благодаря которому при уменьшении/увеличении не теряется качество - http://shpargalkablog.ru/2011/03/pochemu-uhudshaetsya-foto-pri.html

При использовании другого URL, он игнорируется.

Решение: выберите сами наиболее востребованные изображения и загрузите их в гаджет "Картинка" или "HTML/JavaScript".

В вашем шаблоне к тому же отсутствует мета rel="image_src", иначе можно было бы воспользоваться гаджетом Blog List.

Я бы на вашем месте отключила Lightbox http://shpargalkablog.ru/2011/09/modalnoe-okno-blogger.html , у вас картинки открываются не на весь экран, а лишь в уменьшенной копии в масштабе 1 221px × 687px.
Si.A.A.
А можно ли установить исключения для части сообщений, что бы они не отображались в этом гаджете?
NMitra
Не тестировала. Попробуйте после

<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'>

добавить условие

<b:if cond='data:post.href == &quot;ВАШ_URL&quot;'>

И ниже перед

    <b:include name='quickedit'/>
  </div>
</b:includable>

добавить конец условия

</b:if>
NMitra
Нет, вот так

<b:if cond='data:post.href != &quot;ВАШ_URL&quot;'>
Si.A.A.
Пробовал, но второе условие некуда добавлять, нет у меня части кода, перед которым ставить . Пробовал поставить в те места, которые более или менее подходят, получаю:
Error while parsing XML (line 1949, column 7): The element type "b: if" must be terminated by the matching end-tag "".
Всё равно спасибо за попытку помочь.
NMitra
Сейчас протестировала - неудачно, несмотря на то, что решение было верным. Условие не принимает значений. Видимо в исходном скрипте это не предусмотрено.
Si.A.A.
Спасибо.
Гаша
Здравствуйте, огромное Вам спасибо за такое подспорье. У меня всё получилось!

Я только начала оформлять Блоггер, можно я Вам буду вопросы задавать от "чайника"?

Подскажите, пожалуйста, как сделать, чтобы отображались только заголовки под изображениями?
Гаша
Я подписалась :)
NMitra
Здравствуйте, конечно. "отображались только заголовки под изображениями" - не поняла, поясните.
Гаша
Ну сейчас, кроме заголовков видна ещё и часть текста. А нельзя ли сделать, чтобы показывалось только изображение и заголовок?
NMitra
На вкладке "Дизайн" - ссылка "Изменить" у прямоугольника "Популярные сообщения" - убрать флажок с "фрагмент"
Гаша
Спасибо, сделала!
Анонимный
Добрый день! Можно ли сделать, чтобы все поле (не только заголовок и изображене в гаджете, а весь блок вместе с описанием) были кликабельны?
NMitra
Добрый день

<a expr:href='data:post.href' target='_blank'>
после
<li>

</a>
перед
</li>

И удалить <a expr:href='data:post.href' target='_blank'> и </a> из предыдущих мест
Анонимный
Что-то не выходит никак.

(Немного помогает если заключить

class='item-snippet'>

в

и

но тогда в виджете фрагмент становится цвета ссылки и через css его не получается сделать черным.)
Olga Afonina
здравствуйте! подскажите пожалуйста, а можно сделать так, чтобы популярные сообщения отображались в строчку, а не в столбик? или сеткой как-нибудь?
вывожу только картинки для отображения
NMitra
Здравствуйте, Ольга. Конечно, можно. Но это нужно стили подгонять, а у меня пока другим голова занята. Обязательно сделаю, но позже.
Саша Дикий
Здравствуйте! Большое спасибо за ваш блог, многое отсюда подчерпнул.
Вопрос такого характера: установил гаджет "Популярные сообщения", но сколько не возился в миниатюрным изображением, всё равно по бокам немного обрезано http://s005.radikal.ru/i209/1401/9a/c1315901344e.png
Посоветуйте, что можно предпринять?
NMitra
Здравствуйте, вам достаточно только добавить скрипт в head. в скрипте выше s210-c замените на s72. То есть без "-с". Эта "-с" даёт квадрат.
Саша Дикий
Большое спасибо! Действительно, всё получилось :)
Лев Худой
Почему только 10 самых полпулярных отображается? А если я хочу 100? Как это сделать?
NMitra
Не могу сказать, в шаблоне эта цифра не указана
NMitra
Olga Afonina, сделала в ряд: http://shpargalkablog.ru/2011/03/populyarnye-soobshcheniya-blogger.html#tolko-izo
Нина Зоркина
Здравствуйте,Наташа! Обращаюсь не по теме, простите, не знаю как по-другому.Пожалуйста, помогите! После написания сообщения сегодня перестали показываться почти все сообщения, когда перехожу на их страницы. Есть заголовок и в конце соцкнопки, а самой статьи нет. На главной все как надо, в редакторе все сообщения есть. Вчера я пыталась сделать похожие сообщения с картинками с сайта LinkWithin, гаджет появился, но пустой без кода, я его удалила.Как это исправить, какие места проверить? мой блог http://glavnoenachat.blogspot.com/ пожалуйста, помогите!
Нина Зоркина
Загрузила сохраненный шаблон, все работает. боялась,что сообщения не все будут, но все на месте
NMitra
Здравствуйте, Нина. Да, конечно, дело в шаблоне. Хорошо, что осталась копия.
Илья Ермоленко
А не подскажите как добавить этот гаджет на страницу блога? Причем таким образом что бы не самые читаемые сообщения, а те которые мне нужно. Можно такое замаклабанить?
NMitra
Тогда зачем гаджет нужен? Добавьте обычный HTML, приблизительно как в последнем примере http://shpargalkablog.ru/2013/12/inside-a-div-has-an-extra-space-below-the-image.html Только с отступом

img {
float: left;
margin-right: 5px;
}
Ярослава Зоря
Добрый день! У меня не отображается изображение в разделе Популярные сообщения. Я пыталась разобраться, но увы никак. Очень прошу, подскажите, как исправить, чтоб все работало? Мой блог Ladylikesluxe.blogspot.com
NMitra
Добрый день! Отображаются: http://3.bp.blogspot.com/-E8VOmwKRmBo/VGTIjL9ZBCI/AAAAAAAAE8I/IrQq5IrTSwA/s320/1.png
Ярослава Зоря
Нет, не все. Например, пост "Перезагрузка" и "Рождественская кампания".
NMitra
Постарайтесь URL картинок писать маленькими буквами без символов _)(* и т.п. Только латинские буквы и тире.
Это плохой пример:
https://2.bp.blogspot.com/-wZMefAdzeZk/VGOxa3YGOTI/AAAAAAAAA6M/Eb2UJvXCCwM/s640/))).JPG
Это хороший:
http://1.bp.blogspot.com/-M0JZDYABZP0/TYcP5-QwKiI/AAAAAAAABk4/OhK4OMun3Qg/s1600/vkladka-izmenit-html.png
Смотрите на имя файла картинки, когда он у вас на компьютере перед загрузкой в Blogger.

Могу также предположить, что проблема может быть связана и с переходом изображений с http:// на https://.
Anatoly Bhutov
Подскажите как добавить условие: мне требуется измененный виджет только если заголовок виджета будет такой-то
NMitra
А заголовок виджета при каких условиях меняется?