среда, 23 марта 2011 г.

Создание красивых информативных блоков в сообщениях на 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("http://lh4.ggpht.com/_G92voTj-yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png");
}
.mail {
background-color:#E4F6F8;
background-image: url("http://lh3.ggpht.com/_G92voTj-yF0/TO0Yze20zPI/AAAAAAAAA7U/AuB_pacAJy8/mail.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");
}

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

<div class="info">Текст, который должен находиться в блоке info</div>
Аналогично для других блоков - меняется только их название в кавычках.

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

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

Всем удачи!

Понравился блог - подпишись на обновления!

Введите Ваш emai-адрес:

Популярные сообщения

Related Posts Plugin for WordPress, Blogger...