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

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

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

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("http://lh4.ggpht.com/_G92voTj-yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png");

}

.info {

background-color:#FFFFCC;

background-image: url("http://lh5.ggpht.com/_G92voTj-yF0/TO0osHobz7I/AAAAAAAAA7c/UuJQ0vP5k18/info.png");

}

.kod { background-color:#E9FFD4;

background-image: url("http://lh3.ggpht.com/_G92voTj-yF0/TO0qiaCAffI/AAAAAAAAA7k/DRmMoObB4ss/kod.png");

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

</div>

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

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

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

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

© blogodel.com 

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