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

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

P.S. Если вам нужен современный и функциональный интернет магазин, платформа magento может идеально подойти для реализации этой задачи.
Про то что такое бесплатная раскрутка сайта вы узнаете на блоге SEOinUA.
Кстати сейчас компаний (агрегатор) Webeffector проводят конкурс Продвижение неизбежно для всех вебмастреров и оптимизаторов.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails