Главная » Файлы » Для uCoz » Информеры для Ucoz

Информер популярных новостей на странице контента
[ Скачать с сервера (0.8 Kb) ] 02.11.2012, 19:32


Для начало нам следует создать информер популярных новостей вашего сайта, для этого идём в Админ панель => Инструменты => Информеры

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

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

и устанавливаем в него следующий html код:
Code
<li>  
<div class="menu_newsT">  
  <a href="$ENTRY_URL$" class="drop">...</a>  
  <div class="menu_dd_newsT">  
  <span class="menu_news_ugol1"></span>  
  <div class="menu_newsT_os">  
  <img src="$IMG_SMALL_URL1$">  
  </div>  
  </div>  
  </div>  
  <span class="inews_data">$DATE$ | <strong>Комментарий: $COMMENTS_NUM$</strong></span>  
</li>

отлично, теперь давайте разместим данный информер на странице с контентом, для этого идём в Админ панель => Дизайн => Управление дизайном => и выбираем нужный модуль, в который после контента устанавливаем следующий html код:
Code
<div id="news_top">  
  <div id="nt_title"><strong>Обрати внимание:</strong></div>  
  <ul>  
  $MYINF_1$  
  </ul>  
  </div>

CSS стили:
Code
/* Информер обрати внимания на странице контента  
  ------------------------------------------*/  
#news_top {  
  width:600px;  
}  

#news_top ul {  
  margin: 5px 0px 0px 0px;  
  padding:0;  
}  

#news_top li {  
  float:left;  
  width:100%;  
  list-style-type: none;  
  border-top: 1px solid #D6D6D6;  
  padding: 5px 0px 5px 0px;  
}  

.menu_newsT {  
  float:left;  
  display:block;  
  position:relative;  
}  

.menu_news_ugol1,  
.menu_dd_newsT {  
  width:252px;  
}  

.menu_dd_newsT {  
  float:left;  
  padding:4px;  
  left:-999em;  
  z-index:998;  
  background:#777;  
  margin:0px auto;  
  position:absolute;  
  -moz-border-radius:5px 5px 5px ;  
  -webkit-border-radius:5px 5px 5px ;  
  border-radius:5px 5px 5px ;  
  box-shadow: 0px 0px 3px #999;  
}  
   
.menu_newsT:hover .menu_dd_newsT{  
  right:auto;  
  left:0px;  
  bottom:25px;  
}  

.menu_news_ugol1 {  
  height:25px;  
  float:left;  
  position:absolute;  
  bottom:-9px;  
  background:url(http://www.bets-script.ru/Material/fon_ugol_1.png) no-repeat;  
  background-position: center bottom;  
}  

.menu_newsT_os {  
  margin:0;  
  padding:0;  
  width:250px;  
  height:90px;  
  background:#fff;  
  overflow:hidden;  
  border: 1px solid #666;  
}  

.inews_data {  
  color:#999;  
  float:right;  
}  

#nt_title {  
  color:#DE4727;  
}

Заголовок новостей, будет укорочен по количеству выводимых символов, в данном примере он имеет ограничения в 47 символов.
Code
...

CSS-Code
Code
<img src="$IMG_SMALL_URL1$">

который будет работать в том случае, если при добавлении контента на ваш сайт, вы используете Краткое описание и Полный текст материала, в противном случае вам стоит использовать дополнительное поле, в которое вы помещаете ссылку на изображение новости и прописываете его в данном информере.
Категория: Информеры для Ucoz | Добавил: Jeep  | Теги: |
Просмотров: 495 | Загрузок: 59 | Жаловаться на материал | Рейтинг: 5.0/9
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]