Выделяем важное в 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("http://lh4.ggpht.com/_G92voTj-yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png");
}
.info {
background-color:#FFF2CC;
background-image: url("http://lh5.ggpht.com/_G92voTj-yF0/TO0osHobz7I/AAAAAAAAA7c/UuJQ0vP5k18/info.png");
}
.kod { background-color:#D9EAD3;
background-image: url("http://lh3.ggpht.com/_G92voTj-yF0/TO0qiaCAffI/AAAAAAAAA7k/DRmMoObB4ss/kod.png");
}

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

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

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

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