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



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


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

Вот код

.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, вставляете в поле поиска скопированную строку. Нажимаете Enter. Строка будет выделена фоновым цветом.  Если поиском воспользоваться не сможете, смотрите скриншот:

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


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

Вставляем коды выше строки ]]></b:skin>

На скриншоте Вы видите, что у меня вставлено несколько: 3,4,5 стилей CSS.
Остается сохранить шаблон и все.
Дальше, когда в редакторе сообщений пишите пост и нужно какую то часть текста выделить, слева нажимаем HTML.и заключаем вот в такой код:

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

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


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




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

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

Почитайте  Стильные рамки со свечением цвета и изображением;


Автор статьи ✎ Olga Protasova Выпуск ✹ 4/26/2014 Ярлыки ►


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

4 коммент. :

  1. Извините, но эти коды не работают.

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

      Удалить
    2. Всё работает, только как можно изменить цвет текста в такой рамке?

      Удалить
    3. Александр Чуриков, здравствуйте. В редакторе блоггер, где Вы пишите статьи, выделите нужный текст мышью, и в меню сверху выберите цвет текста.

      Удалить


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

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

Имя

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

Сообщение *