Красивое оформление текста, скриптов и цитат

Задумался я давеча о том, как красиво оформить публикуемые мной различные коды и скрипты, так как стал я публиковать довольно часто таковые. Изобретать ничего не стал, а "раскопал" в моих закладках довольно таки интересное решение.

Вот ссылка на источник:

http://amateurblogger.ru/2010/11/krasivoe-oformlenie-statey-v-blogspot.html

Обычно полигоном для внедрения, тех или иных нововведений у меня, служит HTML редактор: http://www.timsfreestuff.com/HTMLEditor/

После моих экспериментов остается вполне приличная заготовка, которую жалко уничтожать и она имеет такую особенность, как отсутствие необходимости прописывать, что либо в шаблоне блога. Просто вставляете эту заготовку, в HTML редактор нового сообщения Blogger/Blogspot. И все! 

Полное отсутствие надобности "ковыряния" в шаблоне и засорения такового лишними кодами!

<style type="text/css">.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:#FFD4A0;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKu0hA9_Q_joSxN-NbuTFGJU1rHjoBHSZGwoIE3ASkL4nzGvkt7c2ycuvP-7hcJC6YR_MeMRE__nQGLT2rD2hWJRuDjdJ_P0JlfjxvxbKP6CYDF-aEsrpOqNbWG8TB2Eq-PZLvWepWRkc/");

}

.info {

background-color:#FFFFCC;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwvT3SQfmBHhPWolXzBPL7tRtoQla_HQGgCxP9rB-XHt5kI9moBkbGe_Btgxg0ziO2yVDHuyBMelqk1DLoKKmQeiRf0KDeC7l8S4XTvXHwxX2tYECn-7hlnKhe8TOKyzmzm8GsEiYTiE/");

}

.kod { background-color:#E9FFD4;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvWzHBLM49p2wRBvUxGGtNDfJ3fzSc8ID6OjHy4W5Y-RYXBPiC5npyJUloGTxP8UDFlE60sNHD81Q27KfFcccB1gF8mJcgAEDk1XHpCdpWOUQVNFfhdvtDON5-ZUvBEZ4fdjuCd9vofL8e/");

}</style><div class="info">ВАШ ТЕКСТ

</div>

Я специально оставил общее CSS оформление для трех различных вариантов, чтобы код был универсальным.

Так будет выглядеть, если там где маркировано красным, вставить - info

Так будет выглядеть, если там где маркировано красным, вставить - vajno

Так будет выглядеть, если там где маркировано красным, вставить - kod

© blogodel.com 

Спасибо Юстосу за материал!