Приветствую Вас Прохожий | RSS Понедельник, 05.12.2016, 15:28
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 23
Гостей: 23
Пользователей: 0



Главная » Файлы » Скрипты для uCoz » Скрипты Вид новостей

Стильный вид новостей с hover эффектами для ваших новотей



Хочешь красочно оформить новости, но не знаете какой скрипт и какой вид новостей будет лучше смотреться для ваших новотей? Тогда, к вашему внимаю представляю пять готовых решении этих проблем:
Данные решения помогут ваш красочно отобразить и показать все своим новости на вашем сайте.

Установка CSS
Код
<link rel="stylesheet" href="/example/10/HoverNews/hovernews.css"/>


Установка JS
вставить данный код перед
Код
</body>


Код
<script type="text/javascript" src="/example/10/HoverNews/hovernews.js"></script>




Вариант первый
Смысл в том, что когда наводишь на картинку в правой стороне выскакивает блог с иконками, иконки как и ссылку - туда можно вставить все что угодно. Эффекты на иконки разные.

Код
<div class="he-wrap tpl1">
  <img src="HoverNews/1.jpg" alt=""/>
  <div class="he-view">
  <div class="sider-right a0" data-animate="fadeInRight">
  <a href="#" class="a1 zoom" data-animate="fadeInRight"></a>
  <a href="#" class="a2 undo" data-animate="fadeInRight"></a>
  <a href="#" class="a3 check" data-animate="fadeInRight"></a>
  <a href="#" class="a4 close" data-animate="fadeInRight"></a>
  </div>
  </div>
</div>


Второй эффект
Код
<div class="he-wrap tpl1">
<img src="HoverNews/2.jpg" alt="">
<div class="he-view">
<div class="sider-right a0" data-animate="fadeInRight">
  <a href="#" class="a1 zoom" data-animate="rotateIn"></a>
  <a href="#" class="a2 undo" data-animate="rotateIn"></a>
  <a href="#" class="a3 check" data-animate="rotateIn"></a>
  <a href="#" class="a4 close" data-animate="rotateIn"></a>
</div>
</div>
</div>


Третий эффект
Код
<div class="he-wrap tpl1">
<img src="HoverNews/3.jpg" alt="">
<div class="he-view">
<div class="sider-right a0" data-animate="fadeInRight">
  <a href="#" class="a1 zoom" data-animate="pendulum"></a>
  <a href="#" class="a1 undo" data-animate="pendulum"></a>
  <a href="#" class="a1 check" data-animate="pendulum"></a>
  <a href="#" class="a1 close" data-animate="pendulum"></a>
</div>
</div>
</div>




Вариант два
Код
<div class="he-wrap tpl2">
<img src="HoverNews/4.jpg" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<div class="center-bar">
  <a href="#" class="twitter a0" data-animate="elasticInDown"></a>
  <a href="#" class="facebook a1" data-animate="elasticInDown"></a>
  <a href="#" class="google a2" data-animate="elasticInDown"></a>
  <a href="#" class="in a3" data-animate="elasticInDown"></a>
</div>
</div>
</div>
</div>


Второй эффект
Код
<div class="he-wrap tpl2">
<img src="HoverNews/5.jpg" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<div class="center-bar">
  <a href="#" class="twitter a0" data-animate="fadeInUp"></a>
  <a href="#" class="facebook a1" data-animate="fadeInUp"></a>
  <a href="#" class="google a2" data-animate="fadeInUp"></a>
  <a href="#" class="in a3" data-animate="fadeInUp"></a>
</div>
</div>
</div>
</div>


Третий эффект
Код
<div class="he-wrap tpl2">
<img src="HoverNews/6.jpg" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<div class="center-bar">
  <a href="#" class="twitter a0" data-animate="rotateInLeft"></a>
  <a href="#" class="facebook a1" data-animate="rotateInLeft"></a>
  <a href="#" class="google a2" data-animate="rotateInLeft"></a>
  <a href="#" class="in a3" data-animate="rotateInLeft"></a>
</div>
</div>
</div>
</div>



Код
<div class="he-wrap tpl3">
<img src="HoverNews/1_1.jpg" alt="">
<div class="he-view">
<div class="info-bottom a0" data-animate="fadeInUp">
  Квантовая механика — раздел теоретической физики
</div>
</div>
</div>


Второй эффект
Код
<div class="he-wrap tpl3">
<img src="HoverNews/1_2.jpg" alt="">
<div class="he-view">
<div class="info-top a0" data-animate="fadeInDown">
  Квантовая механика — раздел теоретической физики
</div>
</div>
</div>


Третий эффект
Код
<div class="he-wrap tpl3">
<img src="HoverNews/1_3.jpg" alt="">
<div class="he-view">
<div class="info-fly a0" data-animate="flipInV">
  Квантовая механика — раздел теоретической физики
</div>
</div>
</div>
Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 15.6Kb

Дополнительные скрины:
Стильный вид новостей с hover эффектами для ваших новотей

Стильный вид новостей с hover эффектами для ваших новотей

Просмотров: 5098 | Комментарии: 14 | Рейтинг: 2.7/6 | |Категория: Скрипты Вид новостей | Добавил: Snaik | Дата: 23.03.2013 | Скачали: 7 | Теги: эффектами, новотей, ваших, новостей, стильный, hover
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 14
7 Red555   Дата: 03.05.2013  Время: 10:10   [№ 14676]
скажите пожалуйста куда вставлять сами эффекты, я перепробовал все у меня ничего не получается

+1   Спам
8 SlowMotion   Дата: 04.05.2013  Время: 00:08   1 [№ 14678]
сначала скачиваете архив, за тем заливаете его себе на сайт, и подключаете (ставим перед тегом </body>):
<script type="text/javascript" src="/путь_к_файлу с кодом"></script>
за тем берем код, который нужно, меняем слова и картинку на свои, и ставим на свой сайт в нужное место.

9 Red555   Дата: 04.05.2013  Время: 00:54   2 [№ 14679]
все делаю так как пишет и не работает, такое ощющение что css не правильно поставил

10 SlowMotion   Дата: 04.05.2013  Время: 16:02   3 [№ 14681]
а куда, позвольте узнать, вы поставили css ? где подключили?

11 Red555   Дата: 04.05.2013  Время: 16:27   4 [№ 14682]
ну я это засунул в таблицу стилей
<link rel="stylesheet" href="/путь к файлу css"/>

12 SlowMotion   Дата: 04.05.2013  Время: 16:59   5 [№ 14683]
хах... ну даете))
поставьте код возле <title></title>

13 Red555   Дата: 04.05.2013  Время: 17:20   6 [№ 14684]
Большое спасибо все работает, я с такие кодом первый раз встретился зато и не знал))

14 SlowMotion   Дата: 04.05.2013  Время: 22:34   7 [№ 14686]
будешь знать теперь)

+1   Спам
6 tmb   Дата: 25.03.2013  Время: 18:42   [№ 14560]
Валера, по-моему ваше время еще не настало! :-D

+2   Спам
2 smart4on   Дата: 24.03.2013  Время: 18:29   [№ 14552]
для ваших новотей, исправьте

3 Snaik   Дата: 25.03.2013  Время: 09:16   1 [№ 14554]
исправил.

+1   Спам
1 mdbaner   Дата: 24.03.2013  Время: 05:20   [№ 14551]
1000 символов описание а не символы кода. материал не рассматривается в рамках.

4 Snaik   Дата: 25.03.2013  Время: 09:19   1 [№ 14555]
я понимаю, виноват. Но если мне удастся написать описание для материала на 1000 символом - то этот материал будет защитан ну или на ваше рассмотрение. А так, стараюсь писать уникальное описание. Хотя не сильное длинное.

Ответ: Это условия описание к материалу не менее 750 символов уникального текста. Как можно защитать то что не по условаиям. так и я могу , закидывать непонятный контент писать 2-34 слова к нему и создавать таких тем по 10 шт.
Полезность скрипта должна быть и текс размерами 750 и уникальный.

+1   Спам
5 Dr-WebWorker   Дата: 25.03.2013  Время: 12:21   1 [№ 14556]


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

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru