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

Всем доброе утро, сегодня в этом посте мы будем создавать информер последних новостей, в которых будет отображаться изображение самой новости. <br /><br /> Для начало на следует создать информер популярных новостей, для этого идём в Админ панель => инструменты => Информеры и создаём информер со следующими параметрами: <br /><br /> <u>Раздел:</u> Новости сайта <br /> <u>Тип данных:</u> Материал <br /> Способ сортировки: Количество просмотров A <br /> <u>Количество материалов:</u> 7 <br /> <u>Количество колонок:</u> 1 <br /> отлично, теперь заходим в его шаблон, удаляем старый html код и устанавливаем следующий: <br /> HTML-Code <br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="news_top$NUMBER$">  <br />  <a href="$ENTRY_URL$" title="$TITLE$">  <br />  <img src="$IMG_SMALL_URL1$"><img src="$IMG_URL1$">  <br />  <span>  <br />  28)?>...$TITLE$  <br />  </span>  <br />  </a>  <br />  </div><!--/uzc--></div></div><!--/uzcode--> <br /><br /> -обратите внимание, что классу news_top я прописал системную переменную uCoz, которая будет отображать номер материала, тем самым мы сможем изменить седьмой вид изображение по всей ширине основной ячейки div <br /><br /> - плюс я прописал заголовку новости ограничения символов, вы сможете подстроить эту функцию под себя <br /><br /> Теперь создадим основной контейнер <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->div<!--/uzc--></div></div><!--/uzcode--> и поместим в него выше созданный информер: <br /> JS-Code <br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div id="content_new_news"> $MYINF_1$</div><!--/uzc--></div></div><!--/uzcode--> <br /><br /> <b>Устанавливаем CSS:</b> <br /> Наш с вами информер популярных новостей готов, пропишем ему основные css стили: <br /> CSS-Code <br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->/* Новый вид информера популярных новостей  <br />  ------------------------------------------*/  <br />  #content_new_news {  <br />  width:240px;  <br />  overflow:hidden;  <br />  padding: 10px 0px 10px 0px;  <br />  }  <br />   <br />  #content_new_news a:link,  <br />  #content_new_news a:visited {color:#bababa;}  <br />  #content_new_news a:hover {color:#60a62c;}  <br />   <br />  #content_new_news div {  <br />  float:left;  <br />  width:110px;  <br />  height:90px;  <br />  overflow:hidden;  <br />  position:relative;  <br />  margin: 5px 5px 5px 5px;  <br />  }  <br />   <br />  #content_new_news span {  <br />  float:left;  <br />  width:100%;  <br />  left: 0px;  <br />  bottom: 0px;  <br />  position:absolute;  <br />  background: url(http://www.center-dm.ru/ucoz/informer/news1/pix_title.png) repeat;  <br />  padding: 2px 5px 2px 5px;  <br />  font: 9px Verdana,Arial,Helvetica, sans-serif;  <br />  }  <br />   <br />  .news_top7 {  <br />  float:left;  <br />  text-align:center;  <br />  width:230px!important;  <br />  height:85px!important;  <br />  }<!--/uzc--></div></div><!--/uzcode--> <br /><br /> Обратите внимание, что я не прописывал классы в самом информере из-за чего код становиться легче, поэтому со всеми элементами в основной ячейки <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->div<!--/uzc--></div></div><!--/uzcode--> стили будут работать именно через него, а именно через идентификатор <b>content_new_news.</b> <br /> На этом всё, спасибо за внимание!