В этом гаджете показаны те страницы, которые пользователи просматривают чаще всего. Вот пример того, как он может выглядеть.
Как увеличить изображения в "Популярных сообщениях" от Blogspot
На вкладке Шаблон перед </head> добавить:
<script> function IzoPopularPosts() { document.getElementById('PopularPosts1').innerHTML = document.getElementById('PopularPosts1').innerHTML.replace(/s72-c/g, 's210-c'); } document.addEventListener( "DOMContentLoaded", 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 == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (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 == "false"'> <!-- (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('PopularPosts1').innerHTML = document.getElementById('PopularPosts1').innerHTML.replace(/s72-c/g, 's00'); } document.addEventListener( "DOMContentLoaded", 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.
53 комментария:
сейчас все наладилось
Эта конструкция обозначает комментарии, то есть эти символы не будут участвовать в коде, они нужны для того, чтобы веб-мастер имел возможность делать заметки по-поводу каких-либо фрагментов кода:
/* комментарий */
Редактировать сообщение нужно только, если вы используете внешний редактор. Если вы пишете статьи в Blogger, то изменять ничего не нужно.
И небольшая просьба: откройте профиль с вашим блогом, по которому есть вопросы, или воспользуйтесь вариантом "Имя/URL". Я как правило просматриваю блоги для понятия сути вопроса.
При использовании другого URL, он игнорируется.
Решение: выберите сами наиболее востребованные изображения и загрузите их в гаджет "Картинка" или "HTML/JavaScript".
В вашем шаблоне к тому же отсутствует мета rel="image_src", иначе можно было бы воспользоваться гаджетом Blog List.
Я бы на вашем месте отключила Lightbox http://shpargalkablog.ru/2011/09/modalnoe-okno-blogger.html , у вас картинки открываются не на весь экран, а лишь в уменьшенной копии в масштабе 1 221px × 687px.
<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 == "ВАШ_URL"'>
И ниже перед
<b:include name='quickedit'/>
</div>
</b:includable>
добавить конец условия
</b:if>
<b:if cond='data:post.href != "ВАШ_URL"'>
Error while parsing XML (line 1949, column 7): The element type "b: if" must be terminated by the matching end-tag "".
Всё равно спасибо за попытку помочь.
Я только начала оформлять Блоггер, можно я Вам буду вопросы задавать от "чайника"?
Подскажите, пожалуйста, как сделать, чтобы отображались только заголовки под изображениями?
<a expr:href='data:post.href' target='_blank'>
после
<li>
</a>
перед
</li>
И удалить <a expr:href='data:post.href' target='_blank'> и </a> из предыдущих мест
(Немного помогает если заключить
class='item-snippet'>
в
и
но тогда в виджете фрагмент становится цвета ссылки и через css его не получается сделать черным.)
вывожу только картинки для отображения
Вопрос такого характера: установил гаджет "Популярные сообщения", но сколько не возился в миниатюрным изображением, всё равно по бокам немного обрезано http://s005.radikal.ru/i209/1401/9a/c1315901344e.png
Посоветуйте, что можно предпринять?
img {
float: left;
margin-right: 5px;
}
Это плохой пример:
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://.