Выделяем важное в Blogger

Делая очередную запись в своем блоге, порой мы хотим, чтобы определенный абзац или предложение было выделено, но не просто шрифтом другого цвета или полужирным курсивом, а было взято в рамку:

Для начала нужно определиться, какие блоки вам нужны. Я создала 3:

1. Важно - vajno.
2. Информация - info.
3. Код – kod.

В целом все они выглядят одинаково - рамка с закругленными углами. Отличаются шрифтом, цветом и соответствующей картинкой.

Итак, начинаем с того, что заходим в панель администратора, в раздел "шаблон", и нажимаем на кнопку "изменить HTML". В появившемся окне находим строчку ]]></b:skin> (напоминаю, находим с помощью сочетания клавиш Ctrl+F).

До этой строчки вставляем следующий код:

.vajno, .info, .kod {

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:#F9CB9C;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI7W0TB5XdolQESjoSYdcAfv6N5Dm26Ls6RIAYKR9zcpIKQ9Vu-0PzWUMjRMtxowtTlearCMWXvX6QbUKZXPr393YqJP8Ccml2gQ54_jpKC8juw7puODnxkNeNT_uc4pTEKFoZ9EgqR7k/");
}
.info {
background-color:#FFF2CC;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6Coi_xoolOOmC5r8TGb9ZLhnwtoMdCdYpbV63nFP9tjXj6G4bFvehmKvBmtPR5iWVgiVJNtzXR1bi66z5K_II0I-ClXgHKzLDt9sXyKt60AipkH5_p8iZXoaO09V4B4z8BHGHcExPDc/");
}
.kod { background-color:#D9EAD3;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibdSGSQ1UsHlvJwOXNyiv4VxE2e3fdZwo6Dat_m7syrembzc07OWsBN6ivmTiueWxCjnajq8rNWGCU1SnDq5zEa3EYvpZoihjPEq-EVkNFrM70DH2FeY_j-iPFkX_9qkYdtH7c1ckqh5xu/");
}

находите ту строчку/предложение/абзац, который вы хотите выделить, и обрамляете его в соответствующий код:

<div class="vajno ">Текст, который должен находиться в блоке</div>

нажимаете сохранить и получаете это:

по такому же принципу работают и остальные блоки, что можно посмотреть в моем блоге (код и информация). Теперь статьи визуально смотрятся лучше.