На главную Блог проекта +9 Сообщество +13 Новые посты Мини-новости Люди
Купить ссылку здесь
(Цена: 5 руб)


Поставить к себе на сайт
Всем доброго дня, сегодня мы будем создавать информер популярных новостей uCoz в стили минимализма, ничего в нём особенного нету, но я уверен, что он подойдёт для тех администраторов сайта, которые отдают дань традициям не перегружать свой сайт лишними элементами дизайна. Демо

Установка Шаг 1 - Установим HTML:
И так как полагается для начала нам следует создать нужный нам информер новостей, для этого заходим

в Админ панель => Инструменты => Информеры => Создать информер

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

удаляем в нём старый html код и устанавливаем новый:

Код
<li><strong>$NUMBER$</strong><a href="$ENTRY_URL$" title="$CATEGORY_URL$" target="_blank">$TITLE$</a></li>

А на страницу сайта в нужное место устанавливаем сам информер:

Код
<ul class="top_news">  
$MYINF_1$  
  </ul>


Не забывайте, что $MYINF_1$ является номером вашего информера и его стоит прописывать именно системной переменной, а не отдельной ссылкой на js.

Шаг 2 - Установим CSS:
Теперь когда наш информер новостей готов, стоит прописать следующие css стили:

Код
/* Информер популярных новостей для uCoz №5  
------------------------------------------*/  
.top_news{  
  float:left;  
  padding:0;  
  width:230px;  
  margin: 10px 15px 10px 15px;  
}  

.top_news li {  
  list-style:none;  
  margin-bottom: 0px;  
  padding: 8px 0px 8px 0px;  
  border-bottom: 1px solid #CAD3DA;  
}  

.top_news li a:link,  
.top_news li a:visited {color:#555;}  
.top_news li a:hover {color:#2C68A6;;}  

.top_news li strong {  
  float:left;  
  color:#fff;  
  text-shadow: 1px 1px 1px #777;  
  margin: 0px 10px 5px 0px;  
  padding:2px 5px;  
  background: #CBCBCB;  
  border-radius:3px;  
}


Примечание:
Если ваши заголовки новостей являются слишком длинными и они портят внешний дизайн данного информера, а вы хотите чтобы заголовок выглядел красивым и аккуратным, к примеру в одну строку, то следует использовать следующий html код:

Код
<li><strong>$NUMBER$</strong><a href="$ENTRY_URL$" title="$CATEGORY_URL$" target="_blank"><?if(len($TITLE$)>28)?><?substr($TITLE$,0,26)?>...<?else?>$TITLE$<?endif?></a></li>

На этом всё, спасибо за внимание!



Всего 0 комментариев и 310 просмотров
Готовые решения по Графика, JavaScript, (x)HTML, CSS, PHP советы и ошибки при создании сайта или блога, партфолио и других сайтов узнать, что такое юзабилити и как его применять на своём сайте, и просто интересный материал для вашего сайта, уни собраны самые уникальные материалы и разработки от многих известных авторов