» »

Создать информер на популярные файлы uCoz

Создать информер на популярные файлы uCoz

Здесь рассмотрим как создать информер на сайте на популярные файлы или материалы, но и сам код и стили будут предоставлены в посте. Просто в нашем случай можно создать как самые популярные, а это означает, где больше просмотров, тот материал и будет выведен на главной странице. Но можно сделать и под разные модули и настроить его как на статьи, также и на каталог блога. Так как на интернет площадке может просто подключен один модуль и несколько. Что некоторые веб мастера, делают на форуме контейнер и там выставляют большинство информации с других каталогах.

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

Этот материал (информер) создал пользователь Angerfist, где можно сказать, что он отлично адаптивный под мобильные аппараты.

Но и сама установка, у каждого она может быть своя, но после как поставите и он станет работать, то при наведении на изображение, появиться его название.

Будем выводит популярные файлы:

Адаптивный информер для сайта uCoz

Идем в админ панель и в раздел создание информер и нажимаем в правом верхнем углу, создать по таким данным.

[ Каталог файлов · Материалы · Количество просмотров D · Материалы: 6 · Колонки: 2 ]



И потом все оттуда убираем и ставим этот код.

Код
<div style="width:100%;">  
<div class="vidnews">  
<div class="imgbigload" style="background-image: url('$IMG_URL1$');">  
<a href="$ENTRY_URL$"> <div class="brief">  
<p class="name-title">$TITLE$</p>  
<p class="name-reads">Просмотры: $READS$</p>  
</div>  
</div></div></div>


Осталось стили в CSS поставит:

Код
.name-title {  
color:#CCCCCC;  
font-weight: bold;  
text-shadow: black 0.1em 0.1em 0.1em;  
margin: 2px 5px;  
}  
.name-reads {  
color:#CCCCCC;  
font-weight: bold;  
text-shadow: black 0.1em 0.1em 0.1em;  
position: absolute;  
left: 5px;  
bottom: 0;  
}  
.vidnews {  
  margin: 3px 3px;  
}  
.imgbigload {  
  z-index: 1;  
  border-radius:3px;  
  border: 1px solid #EEEEEE;  
  display: block;  
  position: relative;  
  padding-bottom: 65%;  
  overflow: hidden;  
  background-size: 100% 100%;  
  -moz-background-size: 100% 100%;  
  box-shadow:0 5px 5px #000;  
-moz-box-shadow:0 5px 5px #000;  
-webkit-box-shadow:0 5px 5px #000;  
}  
.imgbigload:hover {  
  opacity: 1;  
}  
  .brief {  
  opacity: 0;  
  position: absolute;  
  background-color: rgba(0,0,0,0.7);  
  -webkit-transition: all 0.7s ease;  
  -moz-transition: all 0.7s ease;  
  -o-transition: all 0.7s ease;  
  -ms-transition: all 0.7s ease;  
  transition: all 0.7s ease;  
  top:0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
}  
.brief:hover {  
  opacity: 1;  
}  
.brief a {  
  color: #FFFFFF;  
}

Как заметили, что здесь при вуалируют тени, что на темный фон не поставишь, но все можно изменить в стилях и выстроить визуально, совершенно по другому.
27.03.2017 Просмотров: 438 Комментарий: (5)

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

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

Комментарий: 5
Сафрон
Сафрон 27.03.2017 19:391
0
Сейчас таких информер много и они не чем почти не отличаются друг от друга, вот бы найти информер, который вид материала и комментариев к нему показывал схожие материалы.
Tergran
Tergran 27.03.2017 19:412
0
Этот не поставить на схожие материалы, здесь совершенно другой формат.
Kosten
Kosten 27.03.2017 20:143
0
Под схожий материал нужно правильно теги выставлять, так как на них также выводить будет.
Марковичь
Марковичь 27.03.2017 21:004
0
Один из многих материалов с создание сайта, который понравился и установив не редактировал.
FeStemBer
FeStemBer 27.03.2017 21:065
0
Попробую настроить его под темный, здесь так, просто тени на светлые изменить и на темный фон установить, но и меньше сделать, то они слишком заметны.
avatar