Главная » 2012 » Июнь » 1

Информер случайные материалы со скриншотами (видеоурок)

Тэги: UCOZ, html, информеры, css Категория: uCoz
01.06.2012
Комментариев: 0| Просмотров: 8565
uCoz: Информер случайные материалы со скриншотами (видеоурок) | showmehow.ru


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

Для реализации данного информера средствами uCoz необходимо соблюсти одно главное условие - к материалам должны быть прикреплены изображения через поле "Изображение" или "снимок экрана" как например в модуле каталог файлов!

Если у какого-то материала не будет прикреплённого изображения, то в информере будет отображаться стандартная картинка.

Итак первое что нужно сделать - создать информер, выбрать модуль с которым работать, затем указать количество выводимых материалов, и вывод в случайном порядке. После этого отредактировать шаблон информера используя за основу следующий код:
Code

<div class="tumb">
<center>
<a href="$ENTRY_URL$">

<img src="$SCREEN_URL$" width="150" height="150"><img src="http://freeware.showmehow.ru/img/icon-download.png" width="150" height="150">

$TITLE$</a>
</center>
</div>


Обратите внимание: url http://freeware.showmehow.ru/img/icon-download.png - это адрес картинки отображаемой если у поста нет своей картинки, её необходимо предварительно загрузит с помощью файлового менеджера, после загрузки кликнуть по ней и получить url, скопировать его в буфер обмена и вставить в шаблон информера.

Как загружать файлы с помощью файлового менеджера я показывал в следующих видеоуроках:
Установка стороннего шаблона uCoz
Установка иконки сайта uCoz

Код $SCREEN_URL$ присутствует не во всех модулях, в данном примере я использовал модуль Каталог файлов. Поэтому если вы используете другой модуль, а картинки прикрепляете и вставляете с помощью кода IMAGE1$ то код $SCREEN_URL$ необходимо заменить на $IMG_URL1$

Следующее что необходимо сделать это добавить в шаблон CSS код для красивого вывод элементов информера с миниатюрами.
Code

.tumb {
float:left;  
width:150;  
margin:10px;  
height:150;  
text-align:center;  
padding:5px;  
border:1px solid #E6E6E6;
border-radius: 5px;
}

.tumb:hover {
float:left;  
width:150;  
margin:10px;  
height:150;  
text-align:center;  
background:#E6E6E6;  
padding:5px;  
border:1px solid grey;
border-radius: 5px;
}


И в завершении добавить код отображения информера в шаблон отображения материала и комментариев к нему. Но конечно же вы можете изменить всё это по своему усмотрению, например выводить всего пару метериалов в боковую панель на все страницы сайта, для этого просто создайте блок боковой панели с помощью конструктора и вставьте туда код информера (на вкладку HTML).

Как создать блок боковой панели я показывал например в видеоуроке Создание дополнительного меню uCoz


Посмотреть видеоурок (откроется в новом окне)

Ценителям CMS joomla предлагаю страницу на разработчика отличного модуля счётчика под joomla


Предлагаю вам так же ознакомится: с моим бесплатным видео-курсом по uCoz


Оцените статью Комментариев: 0

При полном или частичном копировании материалов сайта, установка ссылки на сайт источник: http://www.showmehow.ru обязательна!