ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Инфомер для сайта "Будь в курсе" в картинках

Инфомер для сайта "Будь в курсе" в картинках

Очень нужный информер для вашего сайта. Он идет в картинках, как остальные основном идут надписью.
И так начнем, для чего он основном нужен?
Но это больше информации на одной страницы, что явно задержит пользователя или гостя на вашем интернет ресурсе.
Но безусловно эта страница станет намного эффективней и функциональной. И по дизайну будет смотреться очень красиво что думаю не мало важно для портала.
И так давайте начнем его устанавливать. Но что первое надпись вы можете сменить и написать свою.
Идем в информеры и создаем там новый информет с такими параметрами.
Раздел: Новости сайта а также можете предложить свой модуль.
Тип данных: Материалы
Способ сортировки: В случайном порядке
Количество материалов: 1-й и 3-й вариант = 3, а 2-й вариант = 6 - будет так смотреться.
Количество колонок: 1

Что появилось в информере то пока не трогаем

Теперь куда вы решили поставить, туда нужно прописать этот код:

Код

<div class="cell_recommend_1 left">
  <h3>Рекомендую к прочтению</h3>
  $MYINF_1$
  </div>

Теперь наша задача на этой же страницы прописать JavaScript и обязательно перед

Код

Но а теперь возвращаемся обратно в информер где мы не чего не трогали и настало все от туда убрать и прописать этот скрипт.

Код

Теперь нам остается привести код чтоб был красивый и ровный, ему надо прописать стили в CSS

Код

/* Рекомендую к прочтению - v 1.0
------------------------------------------*/
.cell_recommend_1 {
  width:620px;
  background:#fff;
  margin-bottom:20px;
  border: 1px solid #CAD1DB;
  padding: 0px 0px 10px 30px;
}

.cell_recommend_1 h3 {
  font:115% Verdana,Arial,Helvetica, sans-serif!important;
  font-weight:700!important;
  color:#666;
}

.capty-caption {
  color: #fff;
  padding:5px;
  background: #000;
  font: bold 11px verdana;
  text-shadow: 1px 1px 0 #222;
}

.cell_recommend_1 img{
  width:180px;
  height:100px;
}

.cell_recommend_1 p{
  float:left;
  margin: 0px 25px 10px 0px;
}
.left {float:left;}

Все мы установили!

02 Февраля 2014 Просмотров: 1823 Комментариев: (0)

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

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

Kosten

Комментарии: 0