Отличный информер для uCoz, а главное очень полезный. Работа скрипта uCoz очень проста: при наведении на нужную ссылку новости появляется окошко с его изображением. Но как по мне, это не самое главное преимущество данного скрипта для uCoz. Меня впечатлил вид оформления и простота скрипта uCoz. Размещать информер будем на странице контента.
Следует создать информер популярных новостей, для этого идём в П.У. - Инструменты - Информеры
И создаём информер со следующими параметрами:
Раздел: Новости сайта
Тип данных: Материалы
Способ сортировки: Количество просмотров
Количество материалов: 7
Количество колонок: 1
Изменяем дизайн информера. Удаляем старый дизайн и вставляем новый:
Код </font><font class="code" style="color: blue; font-size: 11px; font-family: verdana, arial, helvetica;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"><li> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> <div class="menu_n"> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> <a href="$ENTRY_URL$" class="drop">$TITLE$</a> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> <div class="dd_menu"> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> <span class="dd_ugol1"></span> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> <div class="dd_menu_os"> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> <?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?endif?><?endif?> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> </div> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> </div> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> </div> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> <span class="inews_data">$DATE$ | <strong>Комментарий: $COMMENTS_NUM$</strong></span> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> </li> </span>
Теперь размещаем наш информер на странице с контентом, для этого идём в П.У. - Дизайн - Управление дизайном - и выбираем нужный модуль, в который после контента устанавливаем нижеописанный html код:
Код </font><font class="code" style="color: blue; font-size: 11px; font-family: verdana, arial, helvetica;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"><div id="news_top"> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> <div id="nt_title"><strong>Обрати внимания:</strong></div> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> <ul> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> $MYINF_1$ </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> </ul> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> </div> </span>
Шаг 3 - Установка CSS
Теперь добавим стили нашему информеру uCoz, для этого заходим в П.У. - Дизайн - Управление дизайном(CSS), и в самый низ вставляем код:
Код </font><font class="code" style="color: blue; font-size: 11px; font-family: verdana, arial, helvetica;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);">/* Информер обрати внимания на странице контента -------*/ </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> #news_top { </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> width:600px; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> } </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> #news_top ul { </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> margin: 5px 0px 0px 0px; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> padding:0; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> } </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> #news_top li { </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> border-top: 1px solid #D6D6D6; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> padding: 5px 0px 5px 0px; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> } </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> .menu_n { </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> float:left; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> display:block; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> position:relative; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> } </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> .dd_ugol1, </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> .dd_menu { </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> width:252px; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> } </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> .dd_menu { </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> float:left; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> padding:4px; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> left:-999em; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> z-index:998; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> background:#777; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> margin:0px auto; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> position:absolute; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> -moz-border-radius:5px 5px 5px ; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> -webkit-border-radius:5px 5px 5px ; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> border-radius:5px 5px 5px ; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> box-shadow: 0px 0px 3px #999; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> } </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> .menu_n:hover .dd_menu{ </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> right:auto; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> left:0px; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> bottom:25px; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> } </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> .dd_ugol1 { </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> height:25px; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> float:left; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> position:absolute; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> bottom:-9px; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> background:url('http://webo4ka.ru/Ucoz7/ygol.png') no-repeat; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> background-position: center bottom; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> } </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> .dd_menu_os { </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> margin:0; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> padding:0; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> width:250px; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> height:90px; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> background:#fff; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> overflow:hidden; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> border: 1px solid #666; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> } </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> .inews_data { </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> color:#999; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> float:right; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> } </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> #nt_title { </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> color:#DE4727; </span><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"> } </span><br style="color: rgb(136, 117, 106); font-size: 10px;">
Учтите, за отображение картинки новости, отвечает данный системный код uCoz:
Код </font><font class="code" style="color: blue; font-size: 11px; font-family: verdana, arial, helvetica;"><br style="color: rgb(136, 117, 106); font-size: 10px;"><span style="color: rgb(136, 117, 106); font-size: 10px; background-color: rgb(255, 255, 255);"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?endif?><?endif?> </span>
который будет работать в том случае, если при добавлении контента на ваш сайт, вы используете Краткое описание и Полный текст материала, в противном случае вам стоит использовать дополнительное поле, в которое вы помещаете ссылку на изображение новости и прописываете его в данном информере.
|
