Стильный информер для новостей сайта Ucoz
Стильный информер для новостей сайта Ucoz-при наведении на такой информер в нижней его части всплывает полупрозрачная черная лента где белыми буквами написан название материала
Создаем информер с такими показателями
Раздел: Новости сайта
Тип данных: Материал
Способ сортировки: Количество просмотров A
Количество материалов: 7
Количество колонок: 1
В код шаблона удаляем старый и вставляем новый код
Теперь создадим основной контейнер div и поместим в него выше созданный информер:
Наш с вами информер популярных новостей готов, пропишем ему основные css стили
Создаем информер с такими показателями
Раздел: Новости сайта
Тип данных: Материал
Способ сортировки: Количество просмотров A
Количество материалов: 7
Количество колонок: 1
В код шаблона удаляем старый и вставляем новый код
Код
<div class="news_top$NUMBER$">
<a href="$ENTRY_URL$" title="$TITLE$">
<?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?endif?><?endif?>
<span>
<?if(len($TITLE$)>28)?><?substr($TITLE$,0,27)?>...<?else?>$TITLE$<?endif?>
</span>
</a>
</div>
<a href="$ENTRY_URL$" title="$TITLE$">
<?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?endif?><?endif?>
<span>
<?if(len($TITLE$)>28)?><?substr($TITLE$,0,27)?>...<?else?>$TITLE$<?endif?>
</span>
</a>
</div>
Теперь создадим основной контейнер div и поместим в него выше созданный информер:
Код
<div id="content_new_news"> $MYINF_1$</div>
Наш с вами информер популярных новостей готов, пропишем ему основные css стили
Код
/* Новый вид информера популярных новостей
------------------------------------------*/
#content_new_news {
width:240px;
overflow:hidden;
padding: 10px 0px 10px 0px;
}
#content_new_news a:link,
#content_new_news a:visited {color:#bababa;}
#content_new_news a:hover {color:#60a62c;}
#content_new_news div {
float:left;
width:110px;
height:90px;
overflow:hidden;
position:relative;
margin: 5px 5px 5px 5px;
}
#content_new_news span {
float:left;
width:100%;
left: 0px;
bottom: 0px;
position:absolute;
background: url(http://www.center-dm.ru/ucoz/informer/news1/pix_title.png) repeat;
padding: 2px 5px 2px 5px;
font: 9px Verdana,Arial,Helvetica, sans-serif;
}
.news_top7 {
float:left;
text-align:center;
width:230px!important;
height:85px!important;
}
------------------------------------------*/
#content_new_news {
width:240px;
overflow:hidden;
padding: 10px 0px 10px 0px;
}
#content_new_news a:link,
#content_new_news a:visited {color:#bababa;}
#content_new_news a:hover {color:#60a62c;}
#content_new_news div {
float:left;
width:110px;
height:90px;
overflow:hidden;
position:relative;
margin: 5px 5px 5px 5px;
}
#content_new_news span {
float:left;
width:100%;
left: 0px;
bottom: 0px;
position:absolute;
background: url(http://www.center-dm.ru/ucoz/informer/news1/pix_title.png) repeat;
padding: 2px 5px 2px 5px;
font: 9px Verdana,Arial,Helvetica, sans-serif;
}
.news_top7 {
float:left;
text-align:center;
width:230px!important;
height:85px!important;
}
Файлы для скачивания отсутствуют.
Поблагодарить автора
Автор: Turbo
Комментарии (0)