![Выделяем нужную часть статьи в блоге Как выделить участки кода в сообщении блога](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9y-4EKdZOUPqgZvxsN0QEmc8hndEldGK4G8cP7xfbe-8EnM65fBYf0QIjW9VSB0n9G0z0D9TCoEgplArHZsUOGczaYyDWQAwuupRe6kh1AWFG1acO7P1iUxl0XkwVU57R-LCUwgQcZb_k/s300/oformlenie+koda.jpg)
Такое оформление позволяет владельцу блога указать на нужную часть статьи и лучше сориентироваться в перечне букв читателю.
Побудем и мы джентльменами и рассмотрим несколько способов такого оформления.
Все варианты, приведенные ниже, имеют сопроводительные примеры в виде картинок, из которых вы можете выбрать себе подходящий, и, скопировав код к нему, установить себе в блог. Оформленная таким образом часть статьи будет полностью функциональна и подобна остальному тексту, только выделена из общей массы букв за счет особого отношения к ней автора :)
Вариант 1:
Для особого выделения текста можно задействовать фоновое изображение.
![Как выделить участок статьи в блоге](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvoATXllIzriiljRnlvDDRLr-K7zUzNm_9fKnCqtsXxEOfcVQ3kFaxOmItQJaE_KCfM9MXVnyax8ee_0nSAIMn-HbC0IHox04t4YqY2XA3Zz_HmgZr6IMkVX6Gl-Lbwv_stNa-v7UTU780/s1600/kod-bloknot.png)
.bloknot { margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigOPrnePVKjrJLg3AAlg8zU6CP7Ir_7SECd6Do6olCB9CktiqwsdyD8LU859uZCasAP8KL817BI3a80xOTaohC1THSAjFj7JFxFx6QfV9aHQcOlKHWj3mskjlT5FJbHduP7o6DwFB9RcGP/s1600/Bloknot.gif) repeat-y top left; border-top : 1px solid #555555; border-right : 1px solid #555555; border-bottom : 1px solid #555555; border-left : 1px solid #555555; }Вариант 2:
.bloknot { margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKk9CkWM2XDhdR663XebGo62bTy2a3n-gKS8_8V3WFAgb3LYXHVz7LtsyQHzM3_ghlpfcmYu8i2SGP_xaSbq_9QQW1awjXj_g_f4Ok8p7aiNs6r5724bmnmVivcWufGHxTyWhm8l0D9CH/s1600/note.jpg) repeat-y top left; border-top : 1px solid #555555; border-right : 1px solid #555555; border-bottom : 1px solid #555555; border-left : 1px solid #555555; }Вариант 3:
Можно просто залить блок с кодом однотонным цветом и закруглить углы:
![Как выделить участок статьи в блоге](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg94ieDDUmDGwutidDbq0xrwzIV53pE-IjqaoVNFWFTCNhzjEitsbragVCZ6krAEfHdx9eBRolVRY1M3s30S4mui5cgaewgsCzqT8_QKLIpFPb4kGsVepdAyZKaAX3p8JrpjwTCUMyf6r50/s1600/kod-bloknota.png)
.bloknot { margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #F7C65C; border-top : 1px solid #B5520B; border-right : 1px solid #B5520B; border-bottom : 1px solid #B5520B; border-left : 1px solid #B5520B; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }При желании вы можете использовать собственные цвета, более подходящие под дизайн вашего блога. В участке кода значение цвета background : #F7C65C замените на свое. Для выбора подходящего цветового оттенка воспользуйтесь удобным онлайн-генератором веб-цветов, а для настройки гармоничного цветового оформления - вот этим онлайн-приложением.
Ну и напоследок, еще пару вариантов выделения текста с использованием изображений в бэкграунде.
Вариант 4:
![Как выделить участок статьи в блоге](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUjElAUmR6hwOpVLENgoGNeC8OkNUAG7ZWZ17Yu8WhmzYuChhai8_ceA3XpGvBsFfZm30Ua_b3qWQYXJ9LzQ4ZTGfQxzPlTWXY-JfBXT79mJZio3DzGvYYprniDiakVJHeFngWVmLfkjEQ/s1600/kod-fon.png)
.bloknot { margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZdjSzRsATyh0U6AcXJYFRDDVktVjORuq0vcjMMdC09ulSzYTPS90zGRp0qKbELtkx__x-qSPpECo6tjkgA8AxtSfSRfXeI8Ga7FsEopxBRXVmbIFDg9AXokJnaLnijV92rtIj8msvJYub/s800/ground+%252820%2529.jpg) repeat-y top left; border-top : 1px solid #B5520B; border-right : 1px solid #B5520B; border-bottom : 1px solid #B5520B; border-left : 1px solid #B5520B; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }Вариант 5:
![Как выделить участок статьи в блоге](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEU7HXGJNMiHyZzkeFAMdKP7Lcoo0etx4fALQvDeMrLVHAAjHj_XTaRCuQjdWqYHyUodKmnm7FUCR1ml5-uDk48MPz0Y6sJQaNlIqHIxO4G7W-ExH0ExJ0H87LhgM3dFOm2BE5zNlGI2fB/s1600/kodabloknote.png)
.bloknot { margin : 15px 35px 15px 15px; padding : 20px 10px 10px 40px; background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Eaaw4Ngo16KNSsq57-PinF9ht05ShldHpgkQ8FZGQBvNSPjOlOXlFxHlx5n3i9xoNEvhWCp4cJr_mJUUAACMwDm5WjR0SbFg5M00B8GORzP7BvWAwsMZxozW3YQha56f-gdAihGrt0NZ/s800/kod.jpg) repeat-y top left; border-top : 1px solid #3D282B; border-right : 1px solid #3D282B; border-bottom : 1px solid #3D282B; border-left : 1px solid #3D282B; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }Определившись с видом оформления, проследуйте в административной панели вашего блога Дизайн > Изменить HTML, посредством сочетания клавиш CTRL+F найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним впишите выбранный вариант кода из предложенных выше. Сохраните шаблон.
Теперь при создании сообщения, переключившись во вкладку "Изменить HTML", можно легко облечь нужный участок текста в выбранное оформление путем заключения участка в теги:
<div class="bloknot"> Участок текста </div>