Расположить сообщения блога в два столбца

Начиная работать с Blogger, мы не хотим быть ограниченны только стандартным вариантом размещения сообщений и поэтому становятся востребованы такие статьи, как "Всегда сверху". WordPress предлагает шаблон стиля (газетный), когда посты на Главной расположены в несколько столбцов. Попробуем реализовать это на Blogspot только благодаря знанию свойств CSS.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
   <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 != &quot;index&quot;'>
   <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 == &quot;index&quot;'>
   <a expr:href='data:post.url'><data:post.body/></a>
     <b:else/>
   <data:post.body/>
</b:if>

Чтобы картинка не обязательно была вначале страницы.

<link rel="image_src" href="адрес_первого_изо" />

Именно его мы будем использовать. В отличии от предыдущих вариантов, здесь желательно не использовать изображение близко к началу статьи. Фрагмент

<data:post.body/>

заменяем на

<b:if cond='data:blog.pageType != &quot;item&quot;'>
   <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.body/>
<b:else/>
   <data:post.body/>
</b:if>

И перед

]]></b:skin>

добавляем

.image-mini {
  float: left;
  margin: 0 10px 10px 0;
}

И, скажем, через четыре строчки текста будем использовать разрыв .

Картинка располагается вне зависимости от места на страницы.

<data:post.body/>

меняем на

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <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 + &quot;#more&quot;' 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>

В данном образце я разделила статьи на три колонки. Перед

</head>

внести

<b:if cond='data:blog.pageType != &quot;item&quot;'>
   <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>