Стикер для блога (в т.ч. blogspot) - украшение с помощью CSS - оформление постового

Продолжаю заниматься украшательством. Тестирование нового оформления постовых в блоге Интернет-Утречко! Постовой выделен с помощью CSS в стиле стикера и, возможно, с небольшим фоновым изображением с левом верхнем углу или по всей площади.Стикер - это такая бумажка или наклейка, которую прикрепляют на поверхность дерева, металла, стекла или блога. В блоге стикер может быть использован в теле поста для размещения интересной информации, NB, полезных ссылок и прочее. Можно использовать стикер и для размещения постовых, только помните, что некоторые заказчики рекламы в блогах предпочитают увидеть свой постовой прямо в тексте, а не в отдельной области.

В этом посте я расскажу, как можно сделать стикер с помощью CSS (область справа в этом посте с оранжевым цветком).

В общем-то, надо вставить CSS-код в CSS-область вашего шаблона (Настройки -> Макет -> Изменить HTML). Те, кто знают CSS, справятся с задачей самостоятельно. А после моего кода я расскажу, как можно вставить и модифицировать этот стикер без знания CSS.

Вот как выглядит код моего стикера:

/*стикер utrechko - начало кода */
#utro {
width:134px; /*ширина стикера*/
float:right; /*с какой стороны будет всплывать стикер*/
background-color:#E9E8DE; /*цвет фона стикера*/
border:2px solid #DDDCCE; /*граница стикера - ширина стиль цвет*/
background-image:url(http://www.ljplus.ru/img4/s/u/suvares/flower-utrechko4.gif); /*картинка фона стикера - её URL*/
background-repeat:no-repeat;/*повторяемость картинки фона*/
color:#585878; /* цвет текста */
font-size:12px; /*размер шрифта*/
font-style:italic; /*стиль текста. здесь - наклонный*/
font-family:Arial; /*шрифт*/
font-weight:900; /*"жирность" текста*/
margin:2px 0px 2px 6px; /*отступ от текста постинга - сверху, справа, снизу, слева*/
padding:25px 25px 20px 28px; /*отступ текста внутри стикера - сверху, справа, снизу, слева*/
}
#utro a {
color:#FE6602; /*цвет ссылки*/
}

/*стикер utrechko - конец кода */

Если хотите вставить этот стикер

Если вы не знаете CSS и вам подходит мой стикер, просто копируйте код и вставляйте в область CSS вашего шаблона (где она в вашем шаблоне,я написал в конце этого поста). В дальнейшем текст, который вы хотите разместить на стикере, необходимо будет заключать в теги <span id="utro">ваш текст стикера</span>

Если хотите сделать свои цвета

Подобрать цвета по номерам можно тут или в программе Фотошоп. Поэкспериментируйте, заменяя номера цветов на свои.

Если хотите сделать свою картинку

Я использовал стандартную картинку из фотошопа. Подберите себе в этой программе какую-нибудь звёздочку или листок, ну, или нарисуйте сами. Сохраните, загрузите в Интернет и укажите URL вместо моего.

Если хотите сделать всё своё

Если вы хотите индивидуализировать свой стикер и не знаете CSS, то посмотрите сводную таблицу и подберите нужные свойства - http://htmlweb.ru/html/styles1.php

Сделать это можно так. Например, вы хотите, чтобы фоновая картинка замостила стикер (у меня просто один цветок, а, может, вы захотите замостить стикер звёздочками!). Из моего кода ясно, что надо искать background-repeat. В таблице вы найдёте, что чтобы фон замостил область, необходимо поставить в коде после двоеточия поставить repeat. То есть, заменить моё выражение background-repeat:no-repeat на background-repeat:repeat.

Для тех, кто совсем не знает CSS и HTML: хотя CSS - вещь не опасная, всё равно, прежде чем вносить изменения, на всякий случай сохраните изначальный код вашего blogspot-а.

И напоследок - где искать область CSS (стили) в шаблоне blogspot?

Настройки -> Макет -> Изменить HTML. Вставьте код сразу перед выражение body {

Если что, спрашивайте в комментах!

А если не охота заниматься украшением блога, купите себе ведро овальное. По ссылке вы найдёте производителя ведер ООО Континент упаковки. Их овальные ведра - герметичны и годны для хранения пищевых продуктов. Откройте свой склад и будьте счастливы с ведром овальным!