Как быстро и красиво оформить текст блога

---

Легкий способ выделить часть текста или всю страницу блога

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

В одном из своих постов я писала информацию об этом коде, но там я мало уделила внимания и не рассказала, как с помощью этого кода можно (всего один раз настроить) красиво оформить текст в блоге. Попутно я буду выделять текст, и Вы сами увидите, как это будет выглядеть.

Вот код

.code 1 {

margin : 15px 35px 15px 15px;

padding : 20px 10px 10px 35px;background : #f3f3f3;

border-top : 1px solid #E3E3E3; цвет верхней границы

border-right : 1px solid #E3E3E3;  цвет границы справа

border-bottom : 1px solid #E3E3E3; цвет нижней границы

border-left : 1px solid #E3E3E3; цвет границы слева

border-radius: 5px; размер рамки

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

Теперь давайте разберем его:  background : #f3f3f3;-цвет фона;  цвета окантовки (справа, слева, верх, низ) у меня выделены. Они могут быть у Вас разными, тогда получится рамочка с разным цветом окантовки. 

border-top:1px;  border-right : 1px; border-bottom : 1px; border-left : 1px-это размер окантовки верхней (top), правой (right), нижней (bottom) и левой (left) границы рамки; solid-это форма прямой линии рамки. 

Вы можете вписать точечную (dotted), пунктирную (dashed), выпуклая (outset), вдавленная (inset), двойная (double), края рамки выемкой (groove), края в виде кромки (ridge). Подробнее читайте в моем посте Как выделить часть текста в рамку.
border-radius: 5px;-размер закругленных углов рамки, измените при необходимости все значения, чтобы числа были одинаковы. 

С настройками разобрались. Теперь этот код, вернее несколько, нам надо вставить один раз в шаблон-изменить шаблон выше строки ]]></b:skin>  Перешли в шаблон, в самом начале ищем строку <b:skin>...</b:skin>. Именно сюда вставляются все стили CSS во всех шаблонах.

У кого работает поиск нажимаем CTRL+F, английская клавиатура при включенной кнопке Caps Losk или на клаве верхняя кнопка F3, вставляете в поле поиска скопированную строку. Нажимаете Enter. Строка будет выделена фоновым цветом.  Если поиском воспользоваться не сможете, смотрите скриншот:

Строка находится рядом с самой первой стрелкой слева

 

Нажимаем на стрелку слева, тихонечко прокручиваем вниз и находим строку ]]></b:skin>

Выше этой строки вставляем наши коды.

На скриншоте Вы видите, что у меня вставлено несколько: 3,4,5 стилей CSS.

Остается сохранить шаблон и все.

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

<div class="code1">часть текста</div>

Таким образом можно оформить и целую страницу в блоге. Код в HTML вставляете в самом начале и в конце закрываете тэгом </div>. Запишите где нибудь в блокноте настройки кодов: 1, 2, 3, и.т.д, затем просто меняете цифры и выбираете подходящее оформление.

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

Картинку располагаете слева, справа или по центру.

Вот и все. Будет что-нибудь непонятно, задавайте вопросы. Делитесь со своими друзьями. Всего Доброго.

Почитайте статьи по оформлению текста: Стильные рамки со свечением цвета и изображением; Как выделить часть текста в рамку; Рамки разной толщины границ и формы окантовки; Рамочки с прошивкой для текста и цитат на CSS; 

Рекомендуемый контент: