Сообщения в два столбца в блогспоте.
Часто
возникает вопрос, как разместить сообщения в два столбца в блогспоте? Дело в
том, что я не нашел шаблонов газетного типа в готовых предложениях от блогспота
и не увидел возможностей сделать это в настройках шаблона.
Такая
необходимость периодически может возникать, особенно у тех, кто привык работать
с шаблонами вордпрес или теми, где предусмотрена функция газетного размещения
сообщений на странице в два и более столбцов.
Начнем
с того, что в ваших сообщениях придется удалить дату публикации сообщения и
сделать так, чтобы на странице блога показывалось только четное количество
сообщений. Для этого идем в Дизайн - Гаджет
сообщений блога (изменить). Делаем количество сообщений четным (1) и
убираем галочку напротив даты (2).
Теперь
идем в Шаблон – Изменить HTML и находим там
закрывающий тег </head> .
Перед ним вставляем такой код:
<b:if cond='data:blog.pageType != "item"'>
<style
type="text/css">
.post-outer {
margin: 0 25px 25px 0;
width: 40%;
height: 500px;
float: left;
overflow: hidden;
position:relative;
}
.post-body
img {width: 280px;}
.post object, .post embed
{width: 150px; height: 120px;}
.blog-pager { clear:both; }
</style>
</b:if>
Значения
width - ширина, height - высота, margin –
отступ вы должны будете подобрать на свое усмотрение, в зависимости от
параметров вашего блога.
В
теле самоих сообщений нужно добавить разрыв «Читать далее» для того, чтобы на главной странице отображалась
только часть вашего сообщения.
Некоторые параметры : ширина, обтекание текстом, высота вы можете изменить в коде (отметил красным) подставив свои.
Некоторые параметры : ширина, обтекание текстом, высота вы можете изменить в коде (отметил красным) подставив свои.
Например:
.post-body img {width: 100px; float: left; height: 100px; padding: 0
10px 0 0;}
Для
корректного отображения картинок их стоит размещать сразу после заголовка.
Два столбца с боковой панелью можно посмотреть здесь:
Два столбца с боковой панелью можно посмотреть здесь:
ОСТАВЛЯЕМ ТОЛЬКО КАРТИНКИ при нажатии на которые мы переходим в тело самого сообщения.
Код:
<b:if cond='data:blog.pageType != "index"'>
<b:if
cond='data:post.title'>
<h3 class='post-title
entry-title'>
<b:if
cond='data:post.link'>
<a
expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if
cond='data:post.url'>
<b:if
cond='data:blog.url != data:post.url'>
<a
expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
</b:if>
Сделаем
сам пост на Главной ссылкой на внутреннюю. Для чего заменяем
<data:post.body/>
на
<b:if cond='data:blog.pageType == "index"'>
<a
expr:href='data:post.url'><data:post.body/></a>
<b:else/>
<data:post.body/>
</b:if>
И в завершении статьи на главной В ТРИ РЯДА с текстом.
Все точно так же, только перед </head>
<b:if
cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-outer {
margin: 0 25px 25px 0;
width: 26%;
height: 250px;
float: left;
overflow: hidden;
}
.image-mini {
float: left;
margin: 0 10px 10px 0;
}
.blog-pager { clear:both; }
</style>
</b:if>
Осталось
только заменить <data:post.body/> на :
<b:if
cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<img alt='' class='image-mini'
expr:src='data:post.thumbnailUrl' height='72' width='72'/>
<b:else/>
<img alt='' class='image-mini'
height='72' src='альтернативный_адрес_фото' width='72'/>
</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>
Результат
можно посмотреть здесь
Я подсмотрел
это здесь
Осталось только напомнить, что для таких шаблонов стоит выбирать «Дизайн» (в
настройках Шаблона) без боковой панели, а в регулировках ширины шаблона ставить
1200рх.
Комментариев нет:
Отправить комментарий