HOW YOU CAN SUPPORT UKRAINE

Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

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

Во многих случаях отображение на главной странице постов целиком является не лучшим решением. Конечно, с некоторых пор у 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 вы тоже по прежнему може пользоваться!

15.06.11

Категории: Blogger.com (Blogspot).

Теги: , , , ,

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.