Главная » 2012 » Сентябрь » 7 » Удобный информер новостей (Скрипты для ucoz)
07.09.2012, 20:45

Удобный информер новостей




Интересный вид информера новостей, который показывает картинку, прикрепленную к данной новости (через поле "Изображение"). Для того, чтобы понять, как именно это работает - посмотрите ДЕМО.
Установка:
1. Создаем информер новостей (популярные новости или по дате добавления - неважно, но желательно делать только 1 колонку) и вставляем в шаблон информера данный код:
Code
<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>


2. Там, где хотите видеть информер, поставьте:
Code
<div id="news_top">  
  <div id="nt_title"><strong>Обрати внимание:</strong></div>  
  <ul>
  $MYINF_1$
  </ul>  
  </div>

ID информера замените на свой.
3. В 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.center-dm.ru/ucoz/informer/news2/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;
}

На случай, если ссылка на картинку станет битой, она прикреплена к данной новости:

На этом всё, спасибо за внимание!
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: center-dm.ru
Категория: Скрипты uCoz | Просмотров: 1900 | Добавил: sold93 | Рейтинг: 5.0/2 |
Теги: удобны, информер, новостей
Всего комментариев: 3
0  
1 Cezar   (08.09.2012 19:46) [Материал]
Аватар пользователя
Зеленое вам спасибо. happy

+1  
2 sold93 -Infoscript Team-  (08.09.2012 20:58) [Материал]
Аватар пользователя
wacko а почему зеленое?

0  
3 Cezar   (09.09.2012 08:09) [Материал]
Аватар пользователя
Да так угараю biggrin biggrin

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]