Очередной информер который отображает топ материалов по количеству комментариев. Сверху выделены два слова "Обрати внимание". И ниже список материалов. Также рядом отображается дата добавления и количество комментариев.
1. Установим HTML:
Для начало нам следует создать информер популярных новостей вашего сайта, для этого идём в Админ панель => Инструменты => Информеры
И создаём информер со следующими параметрами:
Раздел: Новости сайта
Тип данных: Материалы
Способ сортировки: Количество просмотров
Количество материалов: 7
Количество колонок: 1
устанавливаем в него следующий html код:
Код
<li>
<div class="menu_newsT">
<a href="$ENTRY_URL$" class="drop"><?if(len($TITLE$)>50)?><?substr($TITLE$,0,47)?>...<?else?>$TITLE$<?endif?></a>
<div class="menu_dd_newsT">
<span class="menu_news_ugol1"></span>
<div class="menu_newsT_os">
<?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?endif?><?endif?>
</div>
</div>
</div>
<span class="inews_data">$DATE$ | <strong>Комментарий: $COMMENTS_NUM$</strong></span>
</li>
теперь давайте разместим данный информер на странице с контентом, для этого идём в Админ панель => Дизайн => Управление дизайном => и выбираем нужный модуль, в который после контента устанавливаем следующий html код:
Код
<div id="news_top">
<div id="nt_title"><strong>Обрати внимания:</strong></div>
<ul>
$MYINF_1$
</ul>
</div>
Установим CSS:
Теперь давайте пропишем css стили:
Код
/* Информер обрати внимания на странице контента
------------------------------------------*/
#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(/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 символов.
Код
<?if(len($TITLE$)>50)?><?substr($TITLE$,0,47)?>...<?else?>$TITLE$<?endif?>
Хочу обратить внимание, что в данном примере за отображение картинки новости, отвечает данный системный код uCoz:
Код
<?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?endif?><?endif?>
который будет работать в том случае, если при добавлении контента на ваш сайт, вы используете Краткое описание и Полный текст материала, в противном случае вам стоит использовать дополнительное поле, в которое вы помещаете ссылку на изображение новости и прописываете его в данном информере.
Если у Вас возникли вопросы или проблемы при установке - пишите в комментариях.