Красивый информер цитат для ucoz
Установка.
1. В первую очередь для отображения цитат для uCoz, нам потребуется создать у себя на компьютере, к примеру в папке Мои документы, обычный текстовый файл, в который следует скопировать следующий html код:
Код
<img alt="Джастин Менкес" title="Автор цитаты Джастин Менкес" src="img/Justin_Menkes.jpg"></a> Разгадывая секрет успеха управленцев, стоит смотреть не на решение, а на способ, который позволил к нему прийти. <span>Джастин Менкес</span> <br>
<img alt="Даг Девос" title="Автор цитаты Даг Девос" src="img/Doug_DeVos.jpg"></a> Интернет не меняет бизнес-модели, он способен лишь дать новые мощные инструменты уже существующим. <span>Даг Девос</span> <br>
<img alt="Алан Лафли" title="Автор цитаты Алан Лафли" src="img/Alan_George_Lafley.jpg"></a>Пишите простейшие инструкции, как для трехлетних детей. <span>Алан Лафли</span> <br>
Обратите внимание, для того чтобы при каждом обновлении страницы сайта, в вашем браузере отображалась новая цитата из данного текстового документа, в конце каждой строки, следует прописать тег
2. Создаем сам информер цитат:
Для создание информера цитата заходим в Админ панель => Инструменты => Информеры => Создать информер => Случайные данные
С параметрами:
Количество материалов: 1
Количество колонок равны: 1
И с кодировкой текста Unicode (UTF-8)
Там же вы можете увидеть [ Помощь по работе данной функции ], где расписан пример работы данного информера, в основном вам следует знать три правила:
- Все переводы на новую строку заменяйте тегом "
".
- Размер файла не должен превышать 2мб.
- В файле не должно быть пустых строк!
3.Теперь когда информер цитат готов, его следует установить на страницу сайта в нужное место:
Код
<div class="cell_quote">$MYINF_1$ </div>
4. И в завершении работы с информером цитат, пропишем следующие css стили:
Код
/* Информер цитат
------------------------------------------*/
.cell_quote {
float:left;
width:220px;
position:relative;
background:#fff;
margin: 15px 0px;
padding: 10px 15px 20px 15px;
border: 1px solid #CAD3DA;
font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif; color:#555;
}
.cell_quote img {
float:right;
width:60px;
height: 60px;
margin: 0px 0px 0px 15px;
}
.cell_quote span{
position:absolute;
bottom: 5px;
right: 15px;
margin: 0px 0px 0px 0px;
font: 10px Verdana,Arial,Helvetica, sans-serif; color:#999;
}
------------------------------------------*/
.cell_quote {
float:left;
width:220px;
position:relative;
background:#fff;
margin: 15px 0px;
padding: 10px 15px 20px 15px;
border: 1px solid #CAD3DA;
font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif; color:#555;
}
.cell_quote img {
float:right;
width:60px;
height: 60px;
margin: 0px 0px 0px 15px;
}
.cell_quote span{
position:absolute;
bottom: 5px;
right: 15px;
margin: 0px 0px 0px 0px;
font: 10px Verdana,Arial,Helvetica, sans-serif; color:#999;
}
Обратите внимание, что в данном примере css стилях, я использовал абсолютное позиционирование, для ячейки с именем автора цитаты, вы можете изменить положение данной ячейки, изменив параметры bottom: 5px; и right: 15px; для тега span.
На этом всё, спасибо за внимание!
Другие новости |
Поделиться ссылкой
|