Разделить сообщение блога на колонки
Здравствуйте дорогие друзья, читатели и гости блога. Сегодня короткий пост, как нам разделить сообщение на две и больше колонки. Зачем, спросите Вы, но иногда бывает просто необходимо это сделать. Причин может быть несколько, и одна из них, как всегда обратить внимание к информации в своем блоге. Пример Вы уже видите, кого заинтересовало поехали, вот код
<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>.
Кто использует много изображений в блоге, таким способом можно разделить картинки на две колонки, только придется подогнать размеры. Ориентируйтесь на ширину страницы и ширину изображения.
✓При просмотре черновика, до публикации, в отдельных шаблонах можете не увидеть разделение на колонки. Все появится после публикации.
✓Разделитель можно настроить на свое усмотрение: изменить форму, цвет, толщину. А я на этом закончу свою информацию. Буду благодарна за плюсик в социальных сетях, поделитесь со своими друзьями. Пишите отзывы, Всего Доброго!.
Почитайте по теме: Как выделить виджеты блога разделителем; Кнопка Подписки Яндекса для чтения новых записей блога;
Почитайте по теме: Как выделить виджеты блога разделителем; Кнопка Подписки Яндекса для чтения новых записей блога;
Рекомендуемый контент:
Ольга, этот так называемый -газетный стиль- сообщения мне всегда нравился Таким образом можно в колонки вставлять не только текст но и картинки и коды. .
ОтветитьУдалитьМожно Вика, и коды и картинки и текст. Я тестировала в демо блоге, изображения классно смотрятся.
УдалитьСпасибо Оленька! Здорово! Но у меня в блоге наверное не подойдёт такой стиль.
ОтветитьУдалитьВаля твои работы на всю ширину страницы, можно подогнать размеры и уменьшить ширину изображений. Но как они будут смотреться не знаю. Ты у нас мастер, тебе виднее.
УдалитьЗдравствуйте, Ольга. Поздравляю с прошедшими праздниками. Информация в статье очень полезная, Неоднократно думал на эту тему. Спасибо.
ОтветитьУдалитьСергей спасибо за Ваше мнение об информации. Я также Поздравляю Вас с Праздниками!
ОтветитьУдалитьОгромное спасибо!!! Все получилось. Правда, с третьего раза!
ОтветитьУдалитьСвітлана Босак, главное, что получилось. С каждым разом будет легче. Удачи Вам, и спасибо за отзыв.
Удалить