Доброе утро, поздравляю всех с началом майских праздников! Как всегда начну с того, что в этом посте мы будем создавать информер популярных новостей на странице с контентом, для начало смотрим демо, чтобы всё понять самому, как выглядит данное решение.
Шаг 1 - Установим HTML:
Для начало нам следует создать информер популярных новостей вашего сайта, для этого идём в Админ панель => Инструменты => Информеры
И создаём информер со следующими параметрами:
Раздел: Новости сайта
Тип данных: Материалы
Способ сортировки: Количество просмотров
Количество материалов: 7
Количество колонок: 1
и устанавливаем в него следующий html код:
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 код:
HTML
<div id="news_top">
<div id="nt_title"><strong>Обрати внимания:</strong></div>
<ul>
$MYINF_1$
</ul>
</div>
Шаг 2 - Установим CSS:
Теперь давайте пропишем css стили:
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://ucoz-helper.ucoz.com/vid_info/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?>
Обратите внимание, что в данном решении я использовал вывод изображений новостей благодаря Выпадающиму Drop-Down Menu, так же хочу обратить внимание, что в данном примере за отображение картинки новости, отвечает данный системный код uCoz:
CSS-Code
if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$">else>if($IMG_URL1$)?><img src="$IMG_URL1$">endif?>endif?>
который будет работать в том случае, если при добавлении контента на ваш сайт, вы используете Краткое описание и Полный текст материала, в противном случае вам стоит использовать дополнительное поле, в которое вы помещаете ссылку на изображение новости и прописываете его в данном информере.
На этом всё, спасибо за внимание!
· 
14:14
