Как разделить сообщение блога на колонки



Разделить сообщение блога на колонки


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

<style>
.text_code {
padding-bottom:20px; /*отступ снизу*/
width:100%;  /*указать ширину блока с колонками*/
text-align:justify;  /*выравнивание текста внутри колонок*/
column-width: 200px;  /*указать ширину колонок*/
-moz-column-width: 200px; /*указать ширину колонок*/
-webkit-column-width: 200px; /*указать ширину колонок*/
column-gap: 20px; /*отступ между колонками*/
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-rule: 1px solid #ccc; /*разделить колонки линией если надо, и задать цвет разделителя*/
-moz-column-rule: 1px solid #ccc; /*разделить колонки линией если надо, и задать цвет разделителя*/
-webkit-column-rule: 1px solid #ccc; /*разделить колонки линией если надо, и задать цвет разделителя*/
}</style>

Я подробно в коде о настройках все расписала, думаю Вам будет понятно. Сообщение автоматически разделиться на колонки две-три в зависимости от настроек ширины страницы. Изучите внимательно, при вставке кода удалите информацию о настройках.

Этот код Вы можете вставить дизайн-добавить гаджет и сохранить внизу макета блога. Можно при написании поста в редакторе сообщений перейти по вкладке HTML и вставить внизу поста. Далее, ту часть текста, которую хотите разделить на колонки, в редакторе сообщений, где Вы пишите свои посты, перейдите слева по вкладке HTML и заключите в этот код:

<div class="text_code">текст сообщения</div>


Если потребуется весь текст сообщения разделить на колонки, первую часть кода вставляете в режиме HTML в самом начале поста и в конце закрываете тэгом </div>.


Кто на Ты с шаблоном, можно вставить шаблон-изменить шаблон выше строки ]]></b:skin>, только удалите с кода <style></style>.

Кто использует много изображений в блоге, таким способом можно разделить картинки на две колонки, только придется подогнать размеры. Ориентируйтесь на ширину страницы и ширину изображения.

При просмотре черновика, до публикации, в отдельных шаблонах можете не увидеть разделение на колонки. Все появится после публикации.

Разделитель можно настроить на свое усмотрение: изменить форму, цвет, толщину. А я на этом закончу свою информацию. Буду благодарна за плюсик в социальных сетях, поделитесь со своими друзьями. Пишите отзывы, Всего Доброго!.

Почитайте по теме:  Как выделить виджеты блога разделителемКнопка Подписки Яндекса для чтения новых записей блога;


Автор статьи ✎ Olga Protasova Выпуск ✹ 1/07/2015 Ярлыки ►


Открыть комментарии →

8 коммент. :

  1. Ольга, этот так называемый -газетный стиль- сообщения мне всегда нравился Таким образом можно в колонки вставлять не только текст но и картинки и коды. .

    ОтветитьУдалить
    Ответы
    1. Можно Вика, и коды и картинки и текст. Я тестировала в демо блоге, изображения классно смотрятся.

      Удалить
  2. Спасибо Оленька! Здорово! Но у меня в блоге наверное не подойдёт такой стиль.

    ОтветитьУдалить
    Ответы
    1. Валя твои работы на всю ширину страницы, можно подогнать размеры и уменьшить ширину изображений. Но как они будут смотреться не знаю. Ты у нас мастер, тебе виднее.

      Удалить
  3. Здравствуйте, Ольга. Поздравляю с прошедшими праздниками. Информация в статье очень полезная, Неоднократно думал на эту тему. Спасибо.

    ОтветитьУдалить
  4. Сергей спасибо за Ваше мнение об информации. Я также Поздравляю Вас с Праздниками!

    ОтветитьУдалить
  5. Огромное спасибо!!! Все получилось. Правда, с третьего раза!

    ОтветитьУдалить
    Ответы
    1. Світлана Босак, главное, что получилось. С каждым разом будет легче. Удачи Вам, и спасибо за отзыв.

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *