Рекламный блок
Меню сайта
Вход на сайт
Мини-чат
Статистика
Пользователи
Гости сайта
Информера популярных новостей uCoz
 |
Добавил: Initro
Категория: Новости сайта
Просмотров: 846
Скачек: 0
|
Всем тёплых дней и удачных выходных, в этом посте мы будем создавать информер популярных новостей в стили минимализма, ничего лишнего, только название новости.
Установка:
Шаг 1 - Установим HTML:
И так для начало нам следует зайти в Админ панель => Инструменты => Информеры => Создать Информер:
Раздел: Новости
Тип данных: Материалы
Способ сортировки: Количество просмотров
Количество материалов: 7
Количество колонок: 1
а в самом шаблоне информера удаляем весь код и устанавливаем новый:
Code
<a href="$ENTRY_URL$" title="Рубрика: $CATEGORY_NAME$">$TITLE$</a>
отлично, теперь нам стоит поместить системную переменную информера популярных новостей в нужное нам место на вашем сайте, предварительно поместив его в контейнер div:
Code
<div id="popular_news">$MYINF_1$ </div>
Шаг 2 - Установим CSS:
Теперь когда основной html каркас информера популярных новостей готов, пропишем ему css стили:
Code
/* Вид популярных новостей
------------------------------------------*/
#popular_news {
float:left;
width:230px;
padding: 10px 0px 0px 0px;
font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;
}
#popular_news a:link,
#popular_news a:visited {
float:left;
color:#666;
width:220px;
background:#eef6fc;
margin-bottom: 10px;
padding: 1px 5px 1px 5px;
text-shadow: 1px 1px 1px #fff;
border-left: 4px solid #3276a9;
}
#popular_news a:hover {
color:#666;
background:#eefcef;
border-left: 4px solid #40a932;
}
------------------------------------------*/
#popular_news {
float:left;
width:230px;
padding: 10px 0px 0px 0px;
font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;
}
#popular_news a:link,
#popular_news a:visited {
float:left;
color:#666;
width:220px;
background:#eef6fc;
margin-bottom: 10px;
padding: 1px 5px 1px 5px;
text-shadow: 1px 1px 1px #fff;
border-left: 4px solid #3276a9;
}
#popular_news a:hover {
color:#666;
background:#eefcef;
border-left: 4px solid #40a932;
}
На этом всё, наш с вами информер готов.
Теги материала:
Источник:
Данный материал еще никто не комментировал. Вы можете сделать это первым!
| Всего комментариев: 0 | |
