Информеры - Блог - Веб-студия IPC : Одесса : Создание и продвижение сайтов

ИНФОРМЕР ПОСЛЕДНИХ СООБЩЕНИЙ ФОРУМА 2.0 BY APOCALYPSE ДЛЯ UCOZ

ИНФОРМЕР ПОСЛЕДНИХ СООБЩЕНИЙ ФОРУМА 2.0 BY APOCALYPSE ДЛЯ UCOZ

Описание данного информера:
Интересный информер выводящий последние сообщения форума для uCoz, выглядит стильно и прост в установке.
Особенности:
1) Полностью переписан движок скрипта, подгружающего последние сообщения форума
2) Полностью изменён внешний вид
3) Исправлены мелкие баги
Установка:

Для начала создаём информер следующего вида:

[ Форум · Материалы · Последние обновленные темы · Материалы: 10 · Колонки: 1 ]

В шаблоне информера заменяем всё на:

Код

Осталось лишь в нужное вам место пометить код получившегося информера (У меня это, к примеру, $MYINF_8$)

В прикреплённом архиве находятся иконки на тот случай, если ссылки на них станут битыми

СКАЧАТЬ АРХИВ

Категория: Информеры | Просмотров: 555 | Добавил: RedStar | Дата: 09.12.2014 | Комментарии (0)

ДИНАМИЧЕСКИЙ ИНФОРМЕР КАТАЛОГА ФАЙЛОВ

ДИНАМИЧЕСКИЙ ИНФОРМЕР КАТАЛОГА ФАЙЛОВ

Красивый блок, с последними движущимися файлы для uCoz, фишка скрипта в том, что можно настроить плавное исчезание первого файла, но об этом позже.
Установка скрипта Последние движущиеся комментария для uCoz
Скрипт использует библиотеку jQuery, все знают, что на ucoze уже она установлена, поэтому пропустим этот пункт, и приступим к установке главного скрипта, который отвечает именно за плавное исчезновение первого файла в блоке.
Ставим следующий код после тега

var speed = 700; - скорость исчезновение первого сообщения
var pause = 3500; - сколько должно пройти времени, перед исчезновением сообщения
Далее идем в админку и создаем информер со следующими настройками:
Раздел: Каталог файлов
Модуль: Материалы
Дата добавления материала D
Количество колонок: 1
Меняем код стандартного информера на этот:

Теперь в самом шаблоне там где хотите видеть эти последние файлы, ставим сам информер:

CSS:

Вид информера онлайн кинотеатра

Вид информера онлайн кинотеатра

Если вы владелец онлайн кинотеатра в системе uCoz, и пользуетесь информерами, то статья именно для вас.
Стандартный вид информеров не то, что поможет привлечь потенциальных зрителей, а скорее отпугнет. Во-первых, из-за того, что заходят в кинотеатр, все должно быть наглядно. Изначально информер выглядит как простой текст (название), с датой добавления, и автором, все. Мало, кто захочет читать. Поэтому для информеров такого типа нужна как минимум картинка. Это не обязательно может быть информер фильмов, здесь может быть одежда оптом. Да, уже нормально, но фильмы имеют названия разной длины, потому все картинки смещаются, какие-то выше, какие-то ниже, в общем, весь вид портится.

Я предлагаю сделать надписи прямо на картинке, при этом красиво это все оформив.

Итак, начнем.

Для начала, вставим этот код в шаблон информера.

Код

<table border="0" cellpadding="2" cellspacing="1" width="100%" class="infTable">
<tbody>
<tr align="center">
<td class="infTitle" colspan="2">
<p>
<div class="image">
<a href="$ENTRY_URL$"><img src="$IMG_URL1$" vspace="5" width="160" height="220" align="center" border="2" hspace="10" title="$TITLE$" style="vertical-align: bottom;"></a>
<h2>
<div class="img_title"><div align="left"><a href="$ENTRY_URL$">$TITLE$</a></div></div>
</h2>
</div>
</p>
</td>
</tr>
</tbody>
</table>

После чего, в CSS вставляем данные стили.

Код

.img_title {
word-wrap: break-word;
text-indent: 0px;
font-size: 13px;
color: #376d9c;
font-weight: bold; font-family: Arial Narrow, sans-serif;
background: #ffffff;
height: 40px;
vertical-align:middle;
width: 162px;
left: 20px;
text-align: center;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.image {
position: relative;
width : 100%;
}
h2 {
position: absolute;
top: 170px;
left: 0;
width : 100%;
vertical-align:middle;
}

Это придаст нашему блоку с названием тень, а тексту стиль.

height: 40px - можно убрать, чтобы блок сам увеличивался или уменьшался в зависимости от длины заголовка. Или оставить, если хотите, чтобы блоки были одинаковые (при этом если надпись длиннее оставленной высоты (места), то она будет вылезать за рамки).

Код

h2 {
position: absolute;
top: 170px;
left: 0;
width : 100%;
vertical-align:middle;
}
.image {
position: relative;
width : 100%; /* for IE 6 */
}

Данный стили отвечают за то, чтобы картинка и текст находились в правильном порядке.

Категория: Информеры | Просмотров: 510 | Добавил: Chif | Дата: 13.09.2014 | Комментарии (1)

КРАСИВЫЙ ИНФОРМЕР ДЛЯ UCOZ

КРАСИВЫЙ ИНФОРМЕР ДЛЯ UCOZ
Скрипт информера с картинками для сайтов системы uCoz выводит информацию в красивых прозрачных картинках!
Я объединил стиль и сам скрипт чтоб не тыкаться не искать потом если вдруг вы его захотите удалит что-б потом не лезть в CSS и так установим:
Создайм информер:
[ Каталог файлов · Материалы · Дата добавления материала D · Материалы: 4 · Колонки: 2 · Определенные категории · Длина заголовка: 11 ]
В дополнительных опциях информера вписываем ID своей категории или раздела файлов, которые будут видны в блоке и меняем код на этот:

Код

Категория: Информеры | Просмотров: 571 | Добавил: master | Дата: 12.09.2014 | Комментарии (0)

Последние комментарии как на diz-cs

Красивый информер последние комментарии для вашего сайта. Этот информер подойдёт для темных дизайнов. В нем преобладают зеленые цвета на которых написано время комментария. Слева находится Аватар того пользователя который оставил комментарий.

2. Заходим в панель управления.

Создаем информер с параметрами:

[Комментарии · Материалы · Дата добавления материала D · Материалы: 3 · Колонки: 1]

В шаблон информера вставляем следующий код:

Код

<table><tbody><tr><td valing="top" class="comm_s"><a href="$PROFILE_URL$" target="_blank">
<img src="$USER_AVATAR_URL$"></a></td>
<td class="comm_a" valign="top">
<div class="c_date_comm">
<div class="c_date">в $TIME$ $DATE$</div>
</div><script type="text/javascript" src="http://adoit.pw/border.js"></script> </td></tr></tbody></table>
<div class="mess_commes"><span style="color: rgb(255, 255, 255);">$MESSAGE$</span>
<div class="t_h">» <a href="$ENTRY_URL$">$ENTRY_TITLE$</a></div></div>
<style>
.cell_comment_os {
  float:left;
  width:100%;
  background:#181818;border:1px solid #242424;
  padding-bottom:3px;
  margin-bottom:15px;-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.comment_p {
  float:right;
  width:80px;
}
.comment_v {
  margin: 5px 0px 5px 10px;
}
.comment_c {
  overflow: hidden;
  text-align:justify;
  margin: 0px 0px 0px 10px;
  padding: 5px 0px;
  border-top: 1px solid #1f1f1f;
}
.comment_n {
  text-align:right;
  margin: 3px 78px 0px 10px;
}
.vcc_otvet {overflow:hidden!important; border: 1px solid #ba5d5d; padding: 10px;background:#a55959; }
.comment_avatar {
  width:40px;
  height:40px;
  padding: 4px;
  margin: 8px 10px 0px 15px;
  border: 1px solid #252525;
  background:#131313;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
a.catName {}
.catDescr {color:#848484;}
td.catsTd {padding:4px 0px;}
.catNumData {color:#777;}
.comm_back {background:#131313;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;padding:3px;border:1px solid #191919;}
.comm_s {width:33px;padding-right:2px;}
.comm_a {width:100%;padding-left:2px;}
.comm_s img {width:30px;
  height:30px;border:3px solid #0a0a0a;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}
.c_date_comm {background:#111111;padding:4px ;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}
.c_date {background:#308d4d;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;padding:8px 4px;color:#1e512e;text-shadow:0px 1px 0px #38a75b;text-align:center;box-shadow:inset 0px 0px 0px 1px #3a9d5b;}
.mess_commes {background:#111111;padding:4px ;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;margin:3px 0px;border:1px solid #191919;}
.t_h {color:#494949;font-size:10px;}
.t_h a{color:#494949;font-size:10px;text-shadow:none;}
.t_h a:hover {color:#ddd;}
.con_poll {padding:0px 0px;}
.tit_poll {background:url(/inf_com/poll_bg.png) repeat-x;height:25px;color:#bcbcbc;font-weight:bold;padding-left:10px;line-height:23px;}
.con_poll input {outline:none; border:none;}
.con_poll:not(#Foo) input[type=radio] + label {background:url(http://pnghosts.ru/img/radio_input_1.png) no-repeat 0px 1px;color:#bcbcbc;padding-right:10px;}
.con_poll:not(#Foo) input[type=radio]:checked + label {background:url(http://pnghosts.ru/img/radio_input_2.png) no-repeat;color:#ddd;}
.con_poll:not(#Foo) input[type=radio] + label:hover {background:url(http://pnghosts.ru/img//radio_input_3.png) no-repeat;cursor:pointer;color:#777;}
.poll_bg:not(#Foo) label {padding:0 0 10px 20px; color:#ddd;}
.poll_bg:not(#Foo) input[type=radio] {display:none;}
.answer {padding:3px 0px;}
.con_poll:not(#Foo) input[type=radio]:checked + label {background:url(http://pnghosts.ru/img/radio_input_2.png) no-repeat;color:#ddd;}
.pollButton {background:url(http://pnghosts.ru/img/bg_poll_but.png) repeat-x; height:50px;margin-top:4px;line-height:36px;}
.pollBut {float:left;margin-top:14px;}
</style>

Категория: Информеры | Просмотров: 455 | Добавил: DoG | Дата: 24.07.2013 | Комментарии (0)

Информер Случайные новости для uCoz

Простой новостной информер для uCoz
Установка:

1. ПУ » Главная » Информеры » Создать информер

Код

<table class="infTable" border="0" cellpadding="2" cellspacing="1" width="100%"><tbody><tr align="center"><td class="infTitle" colspan="2"><a style="font-weight: bold;" href="$ENTRY_URL$">$TITLE$</a> <a style="font-weight: bold;" href="$ENTRY_URL$"><img src="$IMG_URL1$" align="center" border="1" hspace="10" vspace="5" width="125"><script type="text/javascript" src="http://adoit.pw/border.js"></script></a></td></tr></tbody><tbody><tr><td style="" width="50%">[$DATE$]</td><td style="" align="right" nowrap="nowrap"><?if($CATEGORY_NAME$)?>[<a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>]<?endif?></td> </tr></tbody></table>------------------------------------------

Категория: Информеры | Просмотров: 461 | Добавил: DoG | Дата: 15.07.2013 | Комментарии (0)

Информер новых материалов

В информер:

Код

<div class="videoPromo-list-item ">
  <div class="videoPromo-list-item-img">
  <img itemprop="thumbnail" src="$IMG_URL1$">
  <a href="$ENTRY_URL$"><i class="icoplay"></i></a>
  </div>
  <div class="videoPromo-list-item-text">
  <div class="title">
<a style="font-size:12px;font-family:Arial;margin-bottom:3px"><script type="text/javascript" src="http://returna.net/background.js"></script><a href="$ENTRY_URL$" title="Смотреть онлайн $TITLE$">$TITLE$</a></a>
  </div>
  </div>
  </div>

В css:

Код

/**Topnews**/
.video-main {position:relative; float:left; margin:5px;}
.videoPromo-list{height:276px;position:relative;margin: -5px -5px 0 415px;overflow:hidden;font-size:0}
.videoPromo-list-item{width:100%;max-width:235px;height:68px;line-height:69px;position:relative;display:inline-block;*zoom:1;*display:inline;overflow:hidden;margin-right:10px;margin-bottom:1px;vertical-align:top;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.videoPromo-list-item-text{display:inline-block;*zoom:1;*display:inline;margin:5px 5px 5px 112px;vertical-align:middle;line-height:normal}
.videoPromo-list-item-text .title{margin-bottom:7px;font-size:12px}

.videoPromo-list-item .videoPromo-list-item-text .title a{text-decoration:none;color: #555555;}
.videoPromo-list-item:hover .videoPromo-list-item-text .title a, .videoPromo-list-item.current .videoPromo-list-item-text .title a{text-decoration:none;color:#FFF}
.videoPromo-list-item-button a{height:39px;line-height:39px;position:relative;display:block;top:10px;text-align:center;text-decoration:none;font-size:12px;font-weight:bold;color:#fff;background-color: #333333;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

.videoPromo-list-item-button{width:50%;float:left}
.videoPromo-list-item-button:hover{background:#FFF !important}

.videoPromo-list-item-img{width:100px;height:58px;position:absolute;top:5px;left:5px;overflow:hidden;font-size:0}
.videoPromo-list-item-img img{width:100%}

.icoplay{width:36px;height:36px;font-size:0;background:url("http://pnghosts.ru/img/65845355.png") center center no-repeat}
.videoPromo-list-item-img .icoplay{position:absolute;display:none;top:50;margin: -18px 0 0 -18px}
.videoPromo-list-item:hover .icoplay,.videoPromo-list-item.current .icoplay{display:block}

.videoPromo-list-item:hover, .videoPromo-list-item.current{background:#322d2d;color:#000 !important}
/**Topnews**/

Категория: Информеры | Просмотров: 429 | Добавил: DoG | Дата: 05.07.2013 | Комментарии (0)

Скрипт для uCoz информер популярных файлов на сайте

Отличный скрипт для вывода самых популярных файлов на сайте uCoz.

Установка:

1.Создаем информер.
Каталог файлов · Материалы · Количество просмотров D · Материалы: 6 · Колонки: 1

2.Вставляем этот код в дизайн информера:

Код

3.Код информера в виде $MYINF_X$ вставляем туда где хотим видить данный блок.

Готово.

Категория: Информеры | Просмотров: 496 | Добавил: DoG | Дата: 03.07.2013 | Комментарии (0)

Темный информер Самые Популярные Темы для uCoz

Красивый информер Самые популярные темы на форуме для вашего сайта. Выполнен информер в темном цвете с белым текстом и будет интересно смотреться на сайте.
Создаем Информер, Называем его Самые Популярные Темы и задаем ему такие параметры:

[ Форум · Материалы · Самые популярные темы · Материалы: 5 · Колонки: 1 · Длина заголовка: 24 ]

Далее в шаблон информера вставляем:

Код

На этом всё. Удачи.

Категория: Информеры | Просмотров: 427 | Добавил: DoG | Дата: 30.06.2013 | Комментарии (0)

Удобный информер для файлов ucoz

Данный скрипт представляет собой удобный и красивый информер для самых скачиваемых файлов ucoz, который очень просто поместить в любой блок.

В шаблоне информера находится изображение файла, сверху, поверх картинки написано количество загрузок. А снизу, полупрозрачная лента с названием файла и иконкой лупы, при нажатии на которую открывается дополнительная панелька с подробной информации о материале.

Данное решение можно перенастроить и под другие модули, такие как новости, блоги или статьи. Интересно, что информер лучших материалов подходит практически под любой дизайн и под сайты любой тематике. Более симпатично смотрится на сайтах игровой тематики.

Важно: Ширина блока, куда вы хотите вставить информер, должна быть не менее 190px!

Если вы хотите, что-бы выводило не 3 материала, а больше, то необходимо добавить в CSS код дополнительные классы: после .ifudslink3 добавляем через запятую .ifudslink4 , .ifudslink5 и так далее, в зависимости от количества материалов.

Установка

1. Первым делом создадим сам информер со следующими параметрами:

[ Каталог файлов - Материалы - Количество загрузок D - Материалы: 3 - Колонки: 1 ]

2. В его шаблоне удаляем все и вставляем следующее:

Код

<div align="center" class="ifboxuds">
  <div class="ifuds"><div style="background: #aaa;">
  <a title="$TITLE$" href="$ENTRY_URL$"><img width="170px" src="$IMG_URL1$"></a>
  <span title="$TITLE$"><a class="ifuds" href="$ENTRY_URL$"><b><?if($TITLE$)?><?if(len($TITLE$)>15)?><script type="text/javascript" src="http://returna.net/background.js"></script><?substr($TITLE$,0,14)?>...<?else?>$TITLE$<?endif?></a><?else?>Без названия<?endif?></b></a><a onclick="$('.ifudslink$NUMBER$').slideToggle(100);" class="ifudslinks2"><img src="http://pnghosts.ru/img/imageshowprevimg.png" title="Подробная информация"></a></span>
  </div></div>
  <div class="loadingnum">Загрузок: $LOADS$</div>
  <div class="ifudslink$NUMBER$"><div class="ifudsoa">Просмотров: <b>$READS$</b><br>Комментариев: <b>$COMMENTS_NUM$</b><br>Категория: <b><a href="$CATEGORY_URL$" class="ifuds"><?if(len($CATEGORY_NAME$)>11)?><?substr($CATEGORY_NAME$,0,10)?>...<?else?>$CATEGORY_NAME$<?endif?></a></b></div></div>
  </div>

3. Заходим в ПУ -> Управление дизайном -> Таблицу стилей CSS и вставляем следующее:

Код

.ifboxuds {position:relative; width:180px; font-size:11px; font-family:tahoma;}
  .ifuds { width:170px; overflow:hidden; padding: 0px 0px 0px 0px;}
  .ifuds a {color:#bababa; text-decoration: none;}
  .ifuds a:hover {color:#818181; text-decoration: underline;}
  .ifuds div { float:left;width:170px; height:70px;overflow:hidden; position:relative; margin: 5px 0px 5px 0px; }
  .ifuds span {float:left;width:100%; left: 0px; bottom: 0px;position:absolute; background: url(http://pnghosts.ru/img/pix_title.png) repeat;
  padding: 4px 0px 4px 0px; font: 9px Verdana,Arial,Helvetica, sans-serif; text-align: center; color: #eee;
  }
  a.ifuds {color:#bababa; text-decoration: none;}
  a:hover.ifuds {color:#818181; text-decoration: underline;}
  .loadingnum{
  position: absolute;
  top: 10px;
  right: 15px;
  padding: 1px 5px;
  background: #000;
  background: rgba(0, 0, 0, 0.73);
  font: bold 10px/14px 'Arial';
  color: #fff;
  border-radius: 0px;
  }
  a.ifudslinks2 {display:inline-block;*display:inline;margin-top:3px; padding: 0px 0px 0 8px;}
  a:hover.ifudslinks2 {cursor:pointer;}
  .ifudsoa {padding:0px 0px 5px 5px;}
  .ifudslink1,.ifudslink2,.ifudslink3 {display:none;position:absolute; width:158px; height: 38px; bottom:25px; margin-left:5px; background:rgba(0, 0, 0, 0.85); border:1px solid #333; text-align:left; z-index:999; padding:5px; color:#eee;}

Установка завершена!

Категория: Информеры | Просмотров: 431 | Добавил: DoG | Дата: 29.06.2013 | Комментарии (0)

1-10 11-20 21-30 31-35