Информативные вставки текста

  Порой хотелось бы обратить внимание, особо выделить какую-либо часть текста, имеющую особую информативную направленность.
Таких способов достаточно много, эффективных и не очень, которые имеются в арсенале blogspot: выделение шрифтом, цветом шрифта, подчеркиванием,
всевозможными кавычками и др.обозначениями через редактор личных знаков, таблицы символов (возможности операционных систем), в blogspot "цитатами" и т.д.
    Мне понравилось найденное в Интернете простое, но эффективное и красивое решение, на мой взгляд, которое я начала использовать на этом блоге-текст в рамке с тенью, с разным фоновым цветом в зависимости от акцента текста либо от информации, которая выделяется. Кроме этого, для большей наглядности и акцентирования внимания используется в левой части картинка соответствующая тематике изложенного в информативной вставке.

Для этого необходимо выполнить следующие действия: -панель управления- шаблон – изменить HTML.  С помощью поиска (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/AVvXsEi5Hzt7ZhZEVNzGNQ6yqu5c6tRg61xrGUAwF1AvsRD9Z13mha9dsG6gNlUyM0BzhzaiLMotznhF9ZA6HBrlgwe66KE8kw-XXirP_PfzIfVazgtlqcbVytPRqWSvZtpII7s66RptRqmHEiU/");
}
.info {
background-color:#FFFFCC;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJWKVi1xU64okCE1ga9OOHE5miyc4q-k8tFkUDE8RfpN-77UuhvQlxpcsZ202_wKFd3xnCOaTwgtYHhCqXzXz1qi8Eq18Uyeslwu7FSU7PN2UaGnJAwyXXtQ0sjIWc6bm98TvUFdZtq9Y/");
}
.kod { background-color:#E9FFD4;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkU74Pj_Mzz1w35xKAaSd7Ww7s_GC4vatizSR8UCxta82EXFygN_GFnb-4UAaAkKRSGBiChUPNTV5KDy2qwT9YuqygzMDP9XFPiLwwrTwZfGBXNxUwCLXdhcYf_1IJ_39VLlG4qpQS_K5Q/");
}

В начале кода CSS – имеется названия блоков vajno, kod, info. Их можно назвать по своему, внеся соответствующее изменение в коде отдельного блока. Можно добавить новые блоки, опять же добавив в код соответствующий блок.
Редакция внешнего вида:
background-color   цвет фона
background-image   адрес картинки
и т.д.

В сообщении в режиме HTML  заключаем требуемую часть информативной вставки в теги

<div class="vajno">Информативная вставка</div>

Названия блока .vajno, .kod, .info, меняем в зависимости от выбранного вида, особо обращая внимание на наличие точки перед названием блока.


(Похожая информация встречается на разных сайтах, потому первоисточник определить сложно)