Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Новый вид информера популярных новостей v2

Дата добавления: 02.11.2013 - 13:53
Категория: Информеры
Добавил: newil
Количество просмотров: 679
Количество комментариев: 0
Размер файла: 144.0Kb
Рейтинг материала: 0.0 / 0
Новый вид информера популярных новостей v2
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Шаг 1 - Установим HTML:
Для начала на следует создать информер популярных новостей, для этого идём в Админ панель => инструменты => Информеры

и создаём информер со следующими параметрами:

Раздел: Новости сайта
Тип данных: Материал
Способ сортировки: Количество просмотров A
Количество материалов: 7
Количество колонок: 1

отлично, теперь заходим в его шаблон, удаляем старый html код и устанавливаем следующий:

HTML


Код
<div class="news_top$NUMBER$">  
<a href="$ENTRY_URL$" title="$TITLE$">  
<img src="$IMG_SMALL_URL1$"><img src="$IMG_URL1$">  
<span>  
28)?>...$TITLE$  
</span>  
</a>  
</div>


-обратите внимание, что классу news_top я прописал системную переменную uCoz, которая будет отображать номер материала, тем самым мы сможем изменить седьмой вид изображение по всей ширине основной ячейки div

- плюс я прописал заголовку новости ограничения символов, вы сможете подстроить эту функцию под себя

Теперь создадим основной контейнер div и поместим в него выше созданный информер:

JS


Код
<div id="content_new_news"> $MYINF_1$</div>


Шаг 2 - Установим CSS:
Наш с вами информер популярных новостей готов, пропишем ему основные css стили:

CSS-Code


Код
/* Новый вид информера популярных новостей  
------------------------------------------*/  
#content_new_news {  
  width:240px;  
  overflow:hidden;  
  padding: 10px 0px 10px 0px;  
}  

#content_new_news a:link,  
#content_new_news a:visited {color:#bababa;}  
#content_new_news a:hover {color:#60a62c;}  

#content_new_news div {  
  float:left;  
  width:110px;  
  height:90px;  
  overflow:hidden;  
  position:relative;  
  margin: 5px 5px 5px 5px;  
}  

#content_new_news span {  
  float:left;  
  width:100%;  
  left: 0px;  
  bottom: 0px;  
  position:absolute;  
  background: url(http://art-ucoz.ru/files/informs/4/pix_title.png) repeat;  
  padding: 2px 5px 2px 5px;  
  font: 9px Verdana,Arial,Helvetica, sans-serif;  
}  

.news_top7 {  
  float:left;  
  text-align:center;  
  width:230px!important;  
  height:85px!important;  
}


Источник: http://www.center-dm.ru
Добавлять комментарии могут только зарегистрированные пользователи.