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

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

Оформления участка статьи в Blogger

Вариант первый:

Код:

.bloknot1 {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Z7-AUVT-mjZa3upaVrs6-qhIp0a3PjTtvxA62d5ka4a5GXTix_AJbdPJs2EzN-5IjP9kD-NXN2bTIRU7mioC7keMWwmIsuCMPm-mSQtdjjjIdswwxudN64_mReUH5Vh1Lryw-aZVKaGz/s800/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;
}

Вариант второй:

Код:

.bloknot2 {   
margin : 15px 35px 15px 15px;   
padding : 20px 10px 10px 35px;   
background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc13-GpMUnNgk-fOVu22SZoNX8koIWg5U8yWeOuomztY2ZHzsKBqYmZn35t2bYJm6c1F4gjmU5nSqw-M7e9vduwQZ9fOEdYXjTCZyhAVI16qZLm8xrlMDeXgjejWYz28c_OTbrN7ic-22j/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;
}

Вариант третий:

Код:

.bloknot3 {   
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 замените на свое. Для выбора подходящего цветового оттенка воспользуйтесь удобным генератором -цвета.

Определившись с видом оформления, пройдите Шаблон -- Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML", нужно  облечь нужный участок текста в выбранное оформление путем заключения участка в теги:

<div class="bloknot1">  Участок Вашего текста </div>

Если Вы выбрали второй вариант тогда :

<div class="bloknot2">  Участок Вашего текста </div>

Если третий:

<div class="bloknot3">  Участок Вашего текста </div>

P.S. Вы можете вставить в шаблон все стили оформления и соответственно заключать текст в нужные теги. Вот и всё. Оформляйте красиво часть текста в своём любимом блоге. До новых встреч.