Анонсы постов с картинками на главной странице

Во многих случаях отображение на главной странице постов целиком является не лучшим решением. Конечно, с некоторых пор у blogspot-блогера появилась возможность прятать посты «под кат». Это открыло кое-какие возможности, но тега more явно не достаточно в том случае, если вы хотите аккуратно сверстать на главной странице анонсы постов (особенно если при этом вы хотите, снабдить такие «саммари» превьюшками). Когда я собирался внедрить для BlogoHelp`а какой-то из журнальных шаблонов Blogger`а, то как раз думал о возможности добавления картинок в анонсы.

Замечу, что варианты реализации главной страницы подобным образом существовали и ранее (в основном с помощью скриптов), но тот вариант что был недавно описан на BloggerBuster стоит особняком.

Во-первых, он полностью автоматический. Во-вторых — реализован без скриптов. В-третьих — содержит превью расположенной в посте иллюстрации. В-четвертых — устанавливает легко и просто. В-пятых — хорошо и аккуратно выглядит. Кстати, конечный результат будет выглядеть примерно так:

Что, по-моему, очень даже замечательно! Если и вам нравится, тогда переходим к инсталляции:

Первым делом делаем бекап — Дизайн > Изменить HTML > Загрузить весь шаблон (Design > Edit HTML, Download Full Template). Далее устанавливаем галочку «расширить шаблон виджета», находим <data:post.body /> и заменяем на следующий фрагмент:

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.snippet'>

<b:if cond='data:post.thumbnailUrl'>

<div class='Image thumb'>

<img expr:src='data:post.thumbnailUrl'/>

</div>

</b:if>

<data:post.snippet/>

<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>

</div>

</b:if>

<b:else/>

<data:post.body/>

</b:if>

<b:else/>

<data:post.body/>

</b:if>

В принципе вы уже на данном этапе можете сохранить шаблон и посмотреть изменения. На главной странице блога вы увидите уже сформированные «саммари», но пока еще не отформатированные, поэтому займемся стилями.

Находим </b:skin> и вставляем перед:

.thumb img {

float: left;

margin: 0 10px 10px 0;

}

Если вы хотите чтобы превью располагалась справа:

.thumb img {

float: right;

margin: 0 0 10px 10px;

}

Вот и все, можно проверять результат. Кстати, тэгом more вы тоже по прежнему може пользоваться!