Как сделать красивое оформление текста
Стандартно: заходим в “Панель инструментов” – “Шаблон” – нажимаем “Изменить 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/AVvXsEhYaEeEHSmrFGHmv-3BTo6JuVnK-q8MFI-zrB2M_bOlNvg5z9N77FQYPVujGKFSvEfSDkA0lBssCHKhHYaRGaotAloeJ0hbsYLwviW7ZFouc2kEf-MY87hqT8-OONlLx0YTAENwpzM3h1s/");
}
.info {
background-color:#FFFFCC;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjozkTE6ITed32L9IyTjDULzTDyshQm9smDW5CGmUVHMjQl7ZNy910C-XaIZb-CyZ1XGpDinp3Rsk0lkpvWeTNy37bKKku4A7qopIYf55CXYK3WIyYIwYLQWYp_s2WhOm2bjfGWD7hu8Ho/");
}
.kod { background-color:#E9FFD4;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQXryiD48Vgrwfvh4hyphenhyphenBC93wqQhvytDxaD7nd_AQhZlPnQ-Kg-xmYw0wpR4gVm1wc4Fd0th0l7S9KxEaBkeSWLFnIYazLAjBtZFBfGhhdISi_EuhsqEbddlWQB1jzZkAZCd-0xtXj3PQpA/");
}
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/AVvXsEhYaEeEHSmrFGHmv-3BTo6JuVnK-q8MFI-zrB2M_bOlNvg5z9N77FQYPVujGKFSvEfSDkA0lBssCHKhHYaRGaotAloeJ0hbsYLwviW7ZFouc2kEf-MY87hqT8-OONlLx0YTAENwpzM3h1s/");
}
.info {
background-color:#FFFFCC;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjozkTE6ITed32L9IyTjDULzTDyshQm9smDW5CGmUVHMjQl7ZNy910C-XaIZb-CyZ1XGpDinp3Rsk0lkpvWeTNy37bKKku4A7qopIYf55CXYK3WIyYIwYLQWYp_s2WhOm2bjfGWD7hu8Ho/");
}
.kod { background-color:#E9FFD4;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQXryiD48Vgrwfvh4hyphenhyphenBC93wqQhvytDxaD7nd_AQhZlPnQ-Kg-xmYw0wpR4gVm1wc4Fd0th0l7S9KxEaBkeSWLFnIYazLAjBtZFBfGhhdISi_EuhsqEbddlWQB1jzZkAZCd-0xtXj3PQpA/");
}
Названия блоков находятся в первой части кода CSS – это vajno, kod, info. При добавлении новых блоков, вписывайте в верхнюю часть кода их название. При редактировании названия блока меняйте его в верхней части и в нужном коде отдельного блока оформления текста. Не забывайте добавлять точку перед каждым названием.
Возможность редактирования:
- Цвет тела в рамке, просто измените на свой, в background-color
- Вывод картинки, вставьте ссылку вашей картинки, в background-image. Может найдете более красивое. Если картинка не нужна, удалите ссылку с путем картинки.
- Можно изменить радиус закругления рамки и другие параметры.
После внесения изменений, если таковые были – Сохраните шаблон.
Перейдем к написанию статьи. Как было сказано ранее что бы сделать красивое оформление текста нужно зайти в редакторе сообщений в HTML. Написав статью, определившись какой текст будете вносить в рамку, нажимаете на HTML. Находите кусок текста, и заключаете его в тег div.
Важная информация
И еще я свой текст выравниваю по ширине, и каждая часть текста находится в теге:
<div style="tеxt-аlign: justify;">Часть текста</div>
Вместо тега <div stylе="text-аlign: justify;"> поставьте тег блока. Закрывающую часть тега не трогайте (</div>)
Что бы внести часть текста в любой другой блок замените название в теге <div class="Название любого блока">
Красивое оформление текста не сложно реализовать. Что бы не вспоминать каким тегом закрывать текст, запишите его.
Комментариев нет:
Отправить комментарий