» »

Новый вид для модуля новостей сайта ucoz


Новый вид для модуля новостей сайта ucoz

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

Установка CSS

Между тега
Код
<head></head>
на стр Главная страница дневника ( Блог) Страница архива материала ( БЛОГ ИЛИ Новости )
Код
<link rel="stylesheet" href="http://zornet.ru/CSS-ZORNET/sat/hovernews.css"/>

Установка JS

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

Код
<script type="text/javascript" src="http://zornet.ru/CSS-ZORNET/sat/hovernews.js"></script>

КОД 1-Й ВИД Вставить Вид материалов Новостей или Блога
Код
<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;
Длина текста новости меняться здесь
30.07.2014 Просмотров: 896 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
Kosten
Kosten 04.08.2014 02:271
0
Отлично подойдет на игровой ресурс в категорий новости.
Admin2129
Admin2129 10.08.2014 16:032
0
кому будет интересен информер в таком стиле пишите в личку тут больше не чо выкладывать не буду! попахивает воровством админов!
Kosten
Kosten 10.08.2014 16:093
0
Admin2129, не нужно такие предьявы кидать. Если это ваш материал.. я поставлю активную ссылку на ресурс.
avatar