Оформление текста в Blogger

На просторах интернета нашел вот такое оформление текста.
 Знаю что не новость, но всетаки может кому небудь пригодиться. Ну и для себя будет где подсмотреть 😉.




Добавляем стили CSS в шаблон перед
]]></b:skin> или </style>

.info, .tips, .warning {
line-height: 22px;
min-height: 38px;
padding-left: 10px;
padding: 10px 12px 12px 68px;
margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEo3IYJQGgHiGaf3XNDE2UMFWR_v7YCxHZnAQtPvgLI6VaUFpNku9AimApRXg-HbXqWeCCndHtriHLvSOzWcBn6tHOBNmqfUjQ1xBjzMI0R_N7oxgaF-8jJX2_iYzLd2mU8XcySgoc_7s/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt2G3beHtYzkoFTKORshlz9Fy9j_DeRvqLt-Z2HfLDbpL3eRB5yCe_ZPValeBRFpFxWEOzaUmutz-dIxlmHxxzP5_O3CoX6nkOzPheGnwD0iNFihfTFXWjBrxNyqNCyIPKyoVauGarzus/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56UmDm2EOigM5O5BlTwIRVyZb54SVy3uqZSVu5qf2CbmeJ32BI_MC-a5DtCgUbMfkiY23ib5DhoqsOyfQQSVzvefmvZHSkbPtQtgU56-ZJjRXLX5rQzZWh9yb3Q3zFMhGdVGefXO2dA4/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Дальше.

Чтобы наш текст стал в красивом обрамлении, выводим его в редакторе так:

<div class="info">
Ваш текст...
</div>
Получаем такой текст:

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum

Есть еще вариант, только без иконки. Добовляем стили CSS в шаблон.

.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}

Вывод в редакторе:

<div class="colorbox .purple">
Ваш текст...
</div>

Получаем такой текст:

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum

Источник: http://www.idblanter.com