Создание красивых информативных блоков в сообщениях на blogspot

Идею создания блоков в сообщениях я почерпнул в очередной раз в в этом блоге

, за что весьма признателен его автору. Поэтому изложение в сообщении будет немного дублироваться. Однако постараюсь все изложить более кратко.
Итак, создаем название блоков. Я тоже сделал всего четыре:
Важно - vajno.
Информация - info.
Письма от читателей - mail.
Код – kod.

Вот как будет выглядеть часть статьи в блоке инфо.

Теперь приступим непосредственно к операции создания блоков. Снова > Дизайн> Изменить HTML, находим строку:
 ]]></b:skin>  и все дальнейшие коды, которые я укажу ниже, нужно установить до этой строчки.

.vajno, .info, .mail, .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:#FFD4A0;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixGIKfB2g2w3WlPwXkRPlj94x9AafoOD4E_tg0VwNlAVqlHwT20EcP2qKrYgiSe1-GNiUaDcoGWrDJRzPiFcWpiR3woLfOVXtmr2a5lcx1BB67EEEzLegDom3vk26WLn43NJ1d_VmeHk/");
}
.mail {
background-color:#E4F6F8;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjodSIMj7zcA1fKi_rSMax-u2bL4yF1f97andN12Z7OjUazaBdX24UsorADxoPH7KXobRAZsRtjIdY7yiUWdPNdJDpNXFhvsDkjoirE-dPLOGzbGibN3N7em8qwMwfmIRN8mBSkyzS49zQ/");
}
.info {
background-color:#FFFFCC;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1CCZ_fKwEulJZ0uyOC0EBkMUocc3wnQFvUogCRyE5204jed1g57K3L6wI54RueaRFcxhBgPO-rvOekrXssxW0YjzKtyrOM9L469ZjE1zt0mqmKUoQtNauPhoDGaqJuB-jRt8pWgoHxHs/");
}
.kod { background-color:#E9FFD4;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK9UeTdpCKGHMvS_okqlK2_ywUbcnDkY6Q1h6v29XPssPjeujKcwr7R2xoidkmzRJ48Rg2f0O-l3bEUpaAKvV2pWUyStWK3z9pehvM3EupbVJMTZ_pUTsRtxwxrhTDiTnow91rlNBCSgE-/");
}

Сохраняем шаблон. Теперь можем приступать к написанию любых постов и по желанию обрамлять их в нужные блоки.
Пишите статью как обычно, затем закончив ее, переходите на вкладку "Изменить HTML" и выбираете часть текста, которую хотите в ставить в нужный бок.
Так нужно сделать блок инфо:

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

Аналогично для других блоков - меняется только их название в кавычках.

Обращаю внимание на тот факт - если вы в процессе написания будете переходить из режима HTML в в режим "Создать", вы не увидите блоков. Они будут видны в режиме просмотра или после публикации!

Для тех, кто ищет дополнительный заработок, есть подработка город Вологда - для студентов прекрасная возможность! Загляните!

Всем удачи!