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

Информер на 5 фильмов и файлов для uCoz

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

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

Так он реально выглядит, как произведете установочный процесс:

Вертикальный информер для вывода изображений сайта

Приступаем к установке:

Создаем информер по данным значениям:



HTML

Код
<div class="collections">
  <div class="collect">
  <a href="$ENTRY_URL$">
  <div class="posterc">
  <img itemprop="image" alt="$TITLE$" src="$IMG_URL1$">
  <div class="count">$ID$</div>
  <div class="namec"><?if(len($TITLE$)>20)?><?substr($TITLE$,0,20)?>...<?else?>$TITLE$<?endif?></div>
  </div>
  </a>
  </div>
</div>

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

А стили по месту:

CSS

Код
.collections{position:relative;display:inline-block;vertical-align:top;margin:15px;width:190px}.collect{width:190px;height:100px;padding:3px;position:relative;background:#fff;z-index:2;border-radius:20px}.collections:before{content:"";position:absolute;top:-3px;left:-3px;width:190px;height:100px;background:rgba(255,255,255,0.5);z-index:1;border-radius:20px}.collections:after{content:"";position:absolute;top:-6px;left:-6px;width:190px;height:100px;background:rgba(255,255,255,0.5);z-index:0;border-radius:20px}.posterc{width:184px;height:94px;display:block;overflow:hidden;position:relative;border-radius:16px}.posterc
img{opacity:0.90;-moz-opacity:0.90;filter:alpha(opacity=90)}.collections:hover
img{opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100)}.posterc
.count{position:absolute;top:5px;right:5px;background:rgb(33, 126, 209);padding:10px
13px;font-size:18px;color:#000000;font-weight:bold;border-radius:100px}.namec{text-align:center;padding:10px
0}.namec
a{color:#dcdcdc;text-decoration:none}.top_collections{text-align:center}.top_collections
.collections{position:relative;margin:5px}.top_collections .collections:before,.top_collections .collections::after{background:none}.top_collections
.collect{background-color:#232927;padding:2px;width:188px;height:98px}.top_collections
.count{font-size:14px;padding:8px}.top_collections
.namec{position:absolute;top:60px;background:rgba(46, 53, 78, 0.74) none repeat scroll 0 0;border-radius:0 0 20px 20px;color:#b4d772;display:block;padding-left:10px;width:184px}.top_collections .namec:first-letter {text-transform:capitalize}.collections:hover
a{color:#b4d772;text-decoration:underline}
.comment-item-block{padding:0 20px 0 24px} .comment-item-block{padding:0} .comment-item-blockhr{margin:10px0}

.title-left{padding:20px
20px 20px 52px;font-family:"LatoLight",Tahoma,Arial,sans-serif;font-size:24px;line-height:24px;color:#fff;position:relative}.title-left
b{color:#000000;font-family:"LatoBold",Tahoma,Arial,sans-serif}.title-left.first{padding:0
20px 20px 52px}.title-left
i{color:#000000;font-size:36px;position:absolute;top:12px;left:8px;margin:0
10px 0 0;opacity:0.3}.title-left.first
i{top:-8px}
.menuspn{color:#57a639;font-family:"LatoBold",Tahoma,Arial,sans-serif}.rtngspn{font-weight:bold;color:#000}@media only screen and (min-width: 1000px){.a-c{min-width:1000px;max-width:1000px;margin:0
auto}.wrapper{min-width:1000px}

И это пока еще не все.

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

Код
<div class="comment-item-block top_collections">$MYINF_номер созданного информера$</div>

На этом все, если это решение не сильно вписывается в дизайн сайта, то для этого можно задействовать стили. Ведь здесь нет не одной ссылки, что ранее можно было замечать в постройке дизайна, все создано на чистом CSS, которые можно изменить, как пример цветовая гамма.
2021-12-12 Просмотров: 352 Комментарий: (0)

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

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

Оставь свой отзыв

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