« Информер "Рекомендуем посмотреть" v 1.0 для uCoz »

Описание материала:

Здравствуйте Гости и Пользователи нашего сайта. В данном материале я решил выложить, отличный информер "Рекомендуем посмотреть" версии 1.0. Данный информер ставить в материал, в любое место, где его вы хотите видеть, сделан информер под сайты, созданные в бесплатном конструкторе uCoz.
При установке информера на свой сайта, Вы увидите блок как на изображение к данному материалу. В информере есть и изображение и название материала. Название материала находится на темно-сером фоне, а при наведение курсором на изображение, его накроет темным фоном и на нем появится две иконки, с левой стороны иконка увеличивает изображение, а с правой переводит Вас к материалу.

Установка:
1. Скачиваем архив с нашего сайта, далее загружаем папку ie_rekpos в корень своего сайта
2. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:

Код
/* Информер Рекомендуем посмотреть v 1.0 для uCoz */
.ie {
  width: 240px;
  display: block;
  float: left;
  margin: 0px 0px 15px 16px;
  padding: 0;
  position: relative;
  z-index: 1;
  border: 2px solid #D5A137;
  border-radius: 2px;
}
.ie_c {
  height: 151px;
  z-index: 2;
  overflow: hidden;
  position: relative;
}
.ie_c .mask {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  display:none;
  opacity: 1;
  background-color: rgba(0,0,0, 0.77);
  width:100%;
  height:100%;
}
.ie_c:hover .mask, .mask:hover{
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100) !important;
  opacity: 1;
  display:block;
}
.ie_c .mask a.show, .ie_c .mask .full {
  width: 28px;
  display: block;
  float: left;
  text-indent: -9999px;
  height: 28px !important;
  overflow: hidden;
  top: 65px;
  position: absolute;
  background: url("/ie_rekpos/ie_img.png") no-repeat;
}
.ie_c .mask a.show {
  background-position: 0 0;
  left: 93px;
}
.ie_c .mask a.show:hover {
  background-position: 0 -28px;
}
.ie_c .mask .full {
  right: 91px;
  background-position: -28px 0;
}
.ie_c .mask .full:hover {
  background-position: -28px -28px;
}
.ie_c img {
  width: 240px;
  height: 151px;
  display: block;
}
.ie_b {
  background: #393939;
  height: 29px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.ie_b_bg {
  background: url("/ie_rekpos/ie_b_bg.png") repeat-x center top;
  position: absolute;
  height: 5px;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 6;
}
.ie_b .file {
  color: #fff;
  display: block;
  font-size: 11px;
  line-height: 28px;
  height: 29px;
  text-align: center;
}
.ie_b .file a {
  color: #FFA134;
}
.ie_b .file a:hover {
  color: #fff;
  text-decoration: none;
}
.file_ie {
  text-transform: uppercase;
  background-color: #3C3C3C;
  color: #F2A136;
  border-radius: 2px;
  height: 20px;
  padding-top: 3px;
  margin: 4px;  
}
/* InternetEmpire.Ru */

3. Заходим в ПУ - Информеры - Создать информер и создаем информер с такими параметрами Каталог файлов · Материалы · В случайном порядке · Материалы: 3 · Колонки: 1, далее заходим Шаблон информера и заменяем имеющий код на этот:
Код
<div class="ie">
<div class="ie_c">
<img src="$IMG_URL1$" alt="$TITLE$"/>
<div class="mask">
<a href="$IMG_URL1$" onclick="return hs.expand(this)" class="show ulightbox">Увеличить</a>
<a href="$ENTRY_URL$" class="full">Перейти</a>
</div></div>
<div class="ie_b">
<span class="file"><a href="$ENTRY_URL$"><?if(len($TITLE$)>32)?><?substr($TITLE$,0,32)?>....<?else?>$TITLE$<?endif?></a></span>
<div class="ie_b_bg"></div>
</div>
</div>

4. Заходим в ПУ - Управление дизайном - модуль Каталог файлов - Страница материала и комментариев к нему и в то место, где хотите видеть информер, ставим данный код:
Код
<div class="file_ie"><center>Так же рекомендуем посмотреть:</center></div>
$MYINF_X$


  • Находим в выше указанном коде $MYINF_X$ и заменяем X на номер своего информера.


Готово! Если у Вас возникнут какие-то проблема с данным материалом, Вы пишите на форум и мы обязательно Вам поможем.


Скачать ( Размер архива 105.2 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Источник

Материал взят со стороннего ресурса и был проверен нами


Добавил: YaVi | Категория: Информеры для uCoz | Просмотров: 826 | Загрузок: 52


Поделиться в соц. сетях:
Комментариев к материалу: 4
Не, я думал ты сразу сделаешь, сейчас на тестовом тестю этот информер.
0
Виктор Ягодин 06.03.2016 в 13:01
Да нее, я не во всем люблю закруглять, вот в этом материале я подумал, что так будет лучше)
0
А можно закруглить как углы и изображение темное?
0
Виктор Ягодин 27.02.2016 в 21:43
Не понял, что закруглить? Вроде ты отлично в этом разбираешься)
0
avatar