ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Новый вид для модуля новостей сайта ucoz

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

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

Установка CSS

Между тега

Код

на стр Главная страница дневника ( Блог) Страница архива материала ( БЛОГ ИЛИ Новости )

Код

Установка JS

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

Код

КОД 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 Июля 2014 Просмотров: 2163 Комментариев: (3)

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

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

Admin2129