Выделяем важное в тексте статьи на Блоггер

Иногда в статье хочется выделить участок текста, что бы читатель обратил на эту часть особое внимание. Цитату мы уже знаем как оформить, а вот любое другое место в тексте можно выделить рамкой, поменять цвет и шрифт, добавить тень, подчёркивание и много-много другого. Но сегодня речь о другом способе. Видела его у многих на сайтах — оформление части текста в блокнотный или тетрадный лист. 

Код оформления:

 .bloknot1{ 
margin : 15px 35px 15px 15px; 
padding : 20px 10px 10px 35px; 
background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAtghTgDritcSmNne7RHyFLd4OvRvChyphenhyphenqxz6-wvhSGCmhMdDJC50o8Uii6_tPK-iiKs-9RIN2Mv2v-m2N9LQpmKDUnKRtnuUD5tt-rp1Zz3gKu3M7cOz_uW6ORAdU3vy_WdiKlvBcgAu1a/s800/kod.jpg) repeat-y top left; background-size:100%;
border-top : 1px solid #555555; 
border-right : 1px solid #555555; 
border-bottom : 1px solid #555555; 
border-left : 1px solid #555555;
}

Устанавливаем его в шаблон выше ]]></b:skin>, а уже в статье, когда понадобится выделить какой-то фрагмент, переходите в режим XTML и устанавливаете такой код:

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

И второй код, обратите внимание, точно такой же и устанавливается так же, только другой адрес картинки:

.bloknot2 {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #bce2eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjU4jAa-EjaHC1M_nmdmeQp7SelfIUmI3mG5vwt06YlYT8Qp1s1Uh5pURh5jsWm-xYhATXelK2ImS5bZgvdZPdyoE8rqf4p3fbCe04CF2pIAo30r6yigpBcU9D2yU65GeZ3_gjFNnZHZM2/s800/Bloknot.gif) repeat-y top left; background-size:100%;
border-top : 1px solid #555555;
border-right : 1px solid #555555;
border-bottom : 1px solid #555555;
border-left : 1px solid #555555;
}

И так же в статье прописываем: <div class="bloknot2">  Участок Вашего текста </div>
Красным в коде отмечен адрес картинки, а зелёным я показала порядковые номера кода. Если вы захотите установить несколько кодов, то каждому прописывайте свой порядковый номер и в шаблоне, и в редакторе статьи в режиме XTML. Соответственно, если код будет один в шаблоне, цифры можно не прописывать.

Третий код без картинки, но вы можете поменять цвета в коде:

.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;
}

И в статье пропишем в режиме XTML код 

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

Цифры выделенные синим — цвет фона,  отмеченные красным — рамка оформления участка текста. Цвета вы можете поменять — воспользуйтесь таблицами цвета.
Закрашенные оранжевым цифры — ширина рамки, можно увеличить или убрать совсем.

У кодов со ссылками можно устанавливать свои картинки. 
Картинка в оформлении повторяется столько раз, сколько места займёт текст. Поэтому очень широкие полосы картинок не подойдут, если текст небольшой, большое пространство пустого места будет смотреться некрасиво. 

Картинку обрезаем так, что бы умещался весь раппорт узора или линии, в зависимости от изображения. Удобно вырезать картинки с мелкими повторяющимися узорами, линиями, квадратами, полосами. 

Примерный размер картинки ширина от 600 до 1000px и высота от 30 до 100px. Если выбирать яркие или тёмные изображения, то и цвет текста нужно будет подобрать так, что бы он читался отчётливо.
Примеры изменения ссылок:

Примеры готовых полосок для оформления: