Был вопрос про гороскопы. Покопался и нашел обширную выкладку гороскопов, которые можно вставить в страницы сайта. От простого и эротического до автомобильного. Итак поехали. Образец http://cmsinstant.ru/stati/goroskop-test.html
Начнем с простого.
Итак код простого гороскопа
[code=php]<div id="ignio-bigdaily-com"><a href="http://www.ignio.com/">Загрузка гороскопа от
Ignio</a></div>
<script type="text/javascript" charset="utf-8"
src="http://img.ignio.com/r/export/utf/bigjs/daily/com.js"></script>
<style type="text/css">
.ignioBigInformer { /* Глобальные установки */
/*width: 300px;*/ /* Ширина информера - если надо */
/*border: 1px solid blue;*/ /* Если хочется сделать рамку вокруг информера... */
margin: 10px 0px 10px 0px; /* Отступы снаружи от рамки с краёв: сверху, справа, снизу,
слева */
padding: 5px 10px 5px 10px; /* Отступы внутри от рамки с краёв: сверху, справа, снизу,
слева */
font-family: Tahoma, Verdana, Geneva, Helvetica; /* Шрифт основного текста */
color: #000000; /* Цвет основного текста и цвет заголовка */
background: #ffffff; /*Цвет фона */
}
.ignioBigInformer * { /* Не обращаем внимания */
padding: 0;
margin: 0;
}
.ignioBigInformer a { /* Ссылки */
color: #0000ff; /* Цвет ссылок */
text-decoration: none; /* Не подчёркивать ссылки */
}
.ignioBigInformerTitle { /* Заголовок */
padding: 5px 0px 5px 0px; /* Отступ около заголовка: сверху, справа, снизу, слева */
text-align: left; /* Выровнять заголовок влево */
/* color: red; */ /* Если хочется цвет заголовка сделать отличным от цвета текста */
}
.ignioBigInformerTitle h2 {
font-size: 16px; /* Размер текста заголовка */
}
.ignioBigInformerDates { /* Даты */
font-size: 12px; /* Размер текста дат */
font-weight: bold; /* Жирность: да */
padding: 10px 0px 10px 0px; /* Отступы: сверху, справа, снизу, слева */
}
.ignioBigInformerDates span {
padding-right: 20px; /* Отступ между датами по горизонтали */
}
.ignioBigInformerDates span a { /* Даты - ссылки (не текущие даты) */
text-decoration: underline; /* Подчёркивать ссылки на датах */
}
.ignioBigInformerTexts { /* Блок - все знаки Зодиака - названия + тексты */
padding: 5px 0px 5px 0px; /* Отступы: сверху, справа, снизу, слева */
}
.ignioBigInformerSign { /* Блок для одного знака Зодиака: Название + текст */
padding: 5px 0px 5px 0px; /* Отступы: сверху, справа, снизу, слева */
}
.ignioBigInformerSign h3 { /* Названия знаков Зодиака */
font-size: 14px; /* Размер текста */
font-weight: bold; /* Жирность: да */
}
.ignioBigInformerSign p { /* Текст */
padding: 5px 0; /* Отступы между абзацами если вдруг текст одного знака состоит из
нескольких абзацев */
font-size: 12px; /* Размер шрифта текста */
text-align: justify; /* Сделать разрядку текста */
}
.ignioBigInformerTail { /* Подпись */
padding: 5px; /* Отступы */
font-size: 12px; /* Размер шрифта */
text-align: center; /* Выровнять по центру */
}
</style>
[/code]
Дальше. Этот код имеет 3 часть свою, я ее выложу отдельным кодом
[code=php]<style type="text/css">
.ignioBigInformer { /* Глобальные установки */
/*width: 300px;*/ /* Ширина информера - если надо */
/*border: 1px solid blue;*/ /* Если хочется сделать рамку вокруг информера... */
margin: 10px 0px 10px 0px; /* Отступы снаружи от рамки с краёв: сверху, справа, снизу, слева */
padding: 5px 10px 5px 10px; /* Отступы внутри от рамки с краёв: сверху, справа, снизу, слева */
font-family: Tahoma, Verdana, Geneva, Helvetica; /* Шрифт основного текста */
color: #000000; /* Цвет основного текста и цвет заголовка */
background: #ffffff; /*Цвет фона */
}
.ignioBigInformer * { /* Не обращаем внимания */
padding: 0;
margin: 0;
}
.ignioBigInformer a { /* Ссылки */
color: #0000ff; /* Цвет ссылок */
text-decoration: none; /* Не подчёркивать ссылки */
}
.ignioBigInformerTitle { /* Заголовок */
padding: 5px 0px 5px 0px; /* Отступ около заголовка: сверху, справа, снизу, слева */
text-align: left; /* Выровнять заголовок влево */
/* color: red; */ /* Если хочется цвет заголовка сделать отличным от цвета текста */
}
.ignioBigInformerTitle h2 {
font-size: 16px; /* Размер текста заголовка */
}
.ignioBigInformerDates { /* Даты */
font-size: 12px; /* Размер текста дат */
font-weight: bold; /* Жирность: да */
padding: 10px 0px 10px 0px; /* Отступы: сверху, справа, снизу, слева */
}
.ignioBigInformerDates span {
padding-right: 20px; /* Отступ между датами по горизонтали */
}
.ignioBigInformerDates span a { /* Даты - ссылки (не текущие даты) */
text-decoration: underline; /* Подчёркивать ссылки на датах */
}
.ignioBigInformerTexts { /* Блок - все знаки Зодиака - названия + тексты */
padding: 5px 0px 5px 0px; /* Отступы: сверху, справа, снизу, слева */
}
.ignioBigInformerSign { /* Блок для одного знака Зодиака: Название + текст */
padding: 5px 0px 5px 0px; /* Отступы: сверху, справа, снизу, слева */
}
.ignioBigInformerSign h3 { /* Названия знаков Зодиака */
font-size: 14px; /* Размер текста */
font-weight: bold; /* Жирность: да */
}
.ignioBigInformerSign p { /* Текст */
padding: 5px 0; /* Отступы между абзацами если вдруг текст одного знака состоит из нескольких абзацев */
font-size: 12px; /* Размер шрифта текста */
text-align: justify; /* Сделать разрядку текста */
}
.ignioBigInformerTail { /* Подпись */
padding: 5px; /* Отступы */
font-size: 12px; /* Размер шрифта */
text-align: center; /* Выровнять по центру */
}
</style>
[/code]
Это стиль. Дальше я буду выкладывать другие виды гороскопов, Вам останется лишь менять верхние две части. Стиль остается одним и тем же.
Эротический
Ежедневный антигороскоп
Примерно думаю всем понятно. Попозже выложу еще штук 8 видов гороскопов. Подключать в страницу через внешний скрипт.
компактный гороскоп
<div id="ignio-weekly-car"><a href="http://www.ignio.com/">Загрузка гороскопа от
Ignio</a></div>
<script type="text/javascript" charset="utf-8"
src="http://img.ignio.com/r/export/utf/tinyjs/weekly/car.js"></script>
<style type="text/css">
.ignioInformer { /* Глобальные установки */
width: 300px; /* Ширина информера */
border: 1px solid silver; /* Если хочется сделать рамку вокруг информера... */
margin: 10px 0px 10px 0px; /* Отступы снаружи от рамки с краёв: сверху, справа, снизу,
слева */
padding: 5px 10px 5px 10px; /* Отступы внутри от рамки с краёв: сверху, справа, снизу,
слева */
font-family: Tahoma, Verdana, Geneva, Helvetica; /* Шрифт основного текста */
color: silver; /* Цвет основного текста и цвет заголовка */
background: #000000; /*Цвет фона */
}
.ignioInformer * { /* Не обращаем внимания */
padding: 0;
margin: 0;
}
.ignioInformer a { /* Ссылки */
color: #FFCC99; /* Цвет ссылок */
text-decoration: none; /* Не подчёркивать ссылки */
}
.ignioInformerTitle { /* Заголовок */
padding: 5px; /* Отступ над/под заголовком */
text-align: center; /* Выровнять заголовок по центру */
/* color: white; Если хочется цвет заголовка сделать отличным от цвета текста */
}
.ignioInformerTitle h2 {
font-size: 14px; /* Размер текста заголовка */
display: inline;
}
.ignioInformerSelects { /* Выбор знака Зодиака и даты */
text-align: center; /* Выровнять по центру */
padding: 10px 0 5px 0; /* Отступы: сверху, справа, снизу, слева */
background: #333333; /* Цвет фона */
}
.ignioInformerSelectSign { /* Выбор знака Зодиака */
font-family: Arial; /* Шрифт */
font-size: 12px; /* Размер шрифта */
color: silver; /* Цвет шрифта */
font-weight: bold; /* Жирность: да */
margin: 0 5px 0 0; /* Отступ между знаком Зодиака и датой */
background: #333333; /* Цвет фона */
}
.ignioInformerSelectDate {
font-family: Arial; /* Шрифт */
font-size: 12px; /* Размер шрифта */
color: silver; /* Цвет шрифта */
font-weight: normal; /* Жирность: нет */
margin: 0 0 0 5px; /* Отступ между знаком Зодиака и датой */
background: #333333; /* Цвет фона */
}
.ignioInformerText { /* Собственно текст */
padding: 0px 5px 5px 5px; /* Отступы: сверху, справа, снизу, слева */
background: #333333; /* Цвет фона */
}
.ignioInformerText p {
padding: 5px 0; /* Отступы между абзацами если вдруг текст состоит из нескольких
абзацев */
font-size: 12px; /* Размер шрифта текста */
text-align: justify; /* Сделать разрядку текста */
}
.ignioInformerTail { /* Подпись */
padding: 5px; /* Отступы */
font-size: 12px; /* Размер шрифта */
text-align: center; /* Выровнять по
Авторские права?