На одном из блогов Blogspot увидел красивое оформление текста, точнее красивые рамки для оформления текста, важной информации.

Преимущества:

• Смотрится оформление - красиво

• Можно выделять текст разными рамками.

Недостатки:

• Что бы выделить часть текста содержащего важную информацию, при написании статьи приходится постоянно лезть в HTML поста, находить нужный отрывок, заключать его в необходимый div class.

Красивые рамки для оформления текста чем то похожи на один из способов цитирования.

  Итак, красивое оформление текста реализуется блоками, сколько их будет решать вам. Я оставил три блока оформления текста:

Блок vajno, помещается информация о важных сообщениях.

Блок info, в этом блоке публикуется информация, которую необходимо знать, учесть.

Блок kod, им я оформляю текст содержащий коды HTML и CSS.

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

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

КАК СДЕЛАТЬ КРАСИВОЕ ОФОРМЛЕНИЕ ТЕКСТА

  Стандартно: заходим в “Панель инструментов” – “Шаблон” – нажимаем “Изменить HTML” – далее “Приступить”. Расширять ничего не надо. Красивое оформление достигается за счет добавления стиля CSS. Нужно найти конец CSS стиля и перед ним добавить CSS стиль для блоков.

С помощью поиска браузера (Ctrl+F) находим строчку конца стиля дизайна

]]></b:skin>

До этой строчки в шаблон блога, вставьте

.vajno, .kod, .info {
margin:10px;
padding:15px 20px 15px 80px;
border:1px solid #999999;
border-radius: 10px;
-moz-border-radius:10px 10px 10px 10px;
box-shadow:2px 2px 3px #999999;
-moz-box-shadow:2px 2px 3px #999999;
-webkit-box-shadow: #999 2px 2px 3px;
background-position:20px 50%;
background-repeat:no-repeat;
position:relative;
text-align:justify;
}
.vajno {
background-color:#FFD4A0;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbuJbVEpj_6EKG53nOT1V1p3WSY0Ac87o213j1w7HfuY9P8p7k673gxrwlkP_EHBiexb_QdZjsZ66X0vBpA__SPFgtIHn8aACWRMWWQSCCbZxgqzCyGhRKhaagN-QjGKaW-8_Uh5g2NM/");
}
.info {
background-color:#FFFFCC;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmBrIxUbUWBI0aD0eJYrR4NtxL9Ld_ABsKCF2P95kwCXT9l_luyqrZKT1DM0bM0hmulCCILoq-5qHsjhnTJb2QRDaoWrBPOTzX2Fk-_hWz6R2R3BjotyIJugBjJ9rKGo-ad9KIrrv0Gss/");
}
.kod { background-color:#E9FFD4;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnLnBf7Dp1ZPPEnB5ZggE9CK0PDe3Rpisqks839pLOLCcsi62owb7d73kWoTG4ufDDyLlUJxGoDy6kC7vFCIzN7m-ZY6w5OfOy-t_cYVY7P2imfqWosmZJ0OQQ4aLXyd3Q6BIVuh46340/");
}

  Названия блоков находятся в первой части кода CSS – это vajno, kod, info. При добавлении новых блоков, вписывайте в верхнюю часть кода их название. При редактировании названия блока меняйте его в верхней части и в нужном коде отдельного блока оформления текста. Не забывайте добавлять точку перед каждым названием.

Возможность редактирования:

• Цвет тела в рамке, просто измените на свой, в background-color

• Вывод картинки, вставьте ссылку вашей картинки, в background-image. Может найдете более красивое. Если картинка не нужна, удалите ссылку с путем картинки.

• Можно изменить радиус закругления рамки и другие параметры.

После внесения изменений, если таковые были – Сохраните шаблон.

  Перейдем к написанию статьи. Как было сказано ранее что бы сделать красивое оформление текста нужно зайти в редакторе сообщений в HTML. Написав статью, определившись какой текст будете вносить в рамку, нажимаете на HTML. Находите кусок текста, и заключаете его в тег div.

Пример оформления блока vajno:

<div class="vajno">Важная информация</div>

На деле выглядит так:

Важная информация

И еще я свой текст выравниваю по ширине, и каждая часть текста находится в теге:

<div style="tеxt-аlign: justify;">Часть текста</div>

  Вместо тега <div stylе="text-аlign: justify;"> поставьте тег блока. Закрывающую часть тега не трогайте (</div>)

  Что бы внести часть текста в любой другой блок замените название в теге <div class="Название любого блока">

  Красивое оформление текста не сложно реализовать. Что бы не вспоминать каким тегом закрывать текст, запишите его.