Вы просматриваете материал Новый вид новостей. Думаю вам понравился материал Новый вид новостей и вы воспользуетесь им! :)

Новый вид новостей

Автор: yaros7777 Скрипты для ucoz 31.07.2014
Новый вид новостей
Данные решения вы можете применить для отображения новостей своего сайта, где будет выводиться постерная картинка, а при наведении будет появляться определенная информация, перейдем к разбору.
Установка CSS

Между тега <head> </head> на стр Главная страница дневника ( Блог) Страница архива материала ( БЛОГ ИЛИ Новости )

<link rel="stylesheet" href="http://vipbiguteriya.at.ua/news1/hovernews.css"/>

Установка JS

вставить данный код перед тегом </body> на стр Главная страница дневника ( Блог) Страница архива материала ( БЛОГ ИЛИ Новости )

<script type="text/javascript" src="http://vipbiguteriya.at.ua/news1/hovernews.js"></script>

Сам код

<div style = "width: 50%; float:left;">
<div class="he-wrap tpl4">
<img src="$IMG_URL1$" style="margin: 10px; float: left; width: 380px; height: 280px;" alt="">
<div class="he-view">
<div class="bg">
<div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div>
</div>
<div class="content">
<h3 class="info-title a2" data-animate="fadeInDown">$TITLE$</h3>
<div class="detail a2" data-animate="fadeInUp"><?if(len($MESSAGE$)>360)?><?substr($MESSAGE$,0,350)?> <a href="$ENTRY_URL$">Читать далее...</a><?else?>$MESSAGE$<?endif?>
<a href="$ENTRY_URL$" class="more a2" data-animate="fadeInRight">Читать далее...</a></div>
</div>
</div>
</div>
</div>

КОД 2-Й ВИД Вставить Вид материалов Новостей или Блога
Сам код

<div style = "width: 50%; float:left;">
<div class="he-wrap tpl6">
<img src="$IMG_URL1$" style="margin: 10px; float: left; width: 380px; height: 280px;" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">$TITLE$</h3>
<a href="$ENTRY_URL$" class="btn a2" data-animate="rotateInLeft"><span>Читать...</span></a>
</div>
</div>
</div></div>
В данном коде расчитано на 2 колонки новостей, но можно переделать на 3-4 колонки изменив в коде значение "width: 50%;( 2 колонки) на "width: 33%;( 3 колонки ) "width: 25%; ( 4 колонки )
так-же размеры картинок изменяються здесь width: 380px; height: 280px;
Длина текста новости менюеться здесь <?if(len($MESSAGE$)>360)?><?substr($MESSAGE$,0,350)?>


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