Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Баннерообмен с SVK Portal (2)
Hibernation Evil - Эпизод... (0)
Народная Солянка 2016 [OG... (0)
У костра (193)
Вступить в группировку (40)
У костра (193)
Анекдоты (145)
Города (94)
Обновление сайта (68)
Создание НПС (63)
StraNNik (1366)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
Aleksandr04071963 (22.09.2020)
ppippitto79 (12.09.2020)
oksanakisulka (04.09.2020)
frost154medium (12.08.2020)
jeri (11.08.2020)
  • Страница 1 из 1
  • 1
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Информеры » Делаем информер последних новостей для uCoz
Делаем информер последних новостей для uCoz
Бармен
Бармен
Пропуск №: 63
Регистрация: 12.04.2014
Ранг: Познающий
Сообщений: 74
Карма: 1 | Хабар: 8
stalkers
Дата: Вторник, 04.08.2015, 17:07/ Сообщение №: 1

Описание скрипта:
  • Очередная реализация информера на MobilySlider.
  • Информер сделан под темные дизайны.
  • Также не забывайте, что сделать можно не только, информер "Последних новостей"
  • Но и последних файлов, лучших новостей или популярных материалов.

    Слайдер становится на паузу и не движется, при наводке мышкой, убираете мышку и слайдер снова движется, что очень удобно для чтения заголовков новостей, если не успел)

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

  • Новости сайта (можно и каталог файлов, смотря для чего создаете)
  • Материалы
  • Дата добавления материала A (это последние материалы)
  • Материалы: 7 (желательно 7, это для того, чтобы выглядело как на демо, 7 пунктов под картинкой)
  • Колонки: 1 (обязательно)

    Теперь в шаблон информера вставим данный код:
    Код
    <div class="item">     
    <div id="cont">     
    <img id="newsimage" src="$IMG_URL1$">     
    <div id="text">     
    <h2>$TITLE$</h2>     
    $MESSAGE$     
    <a href="$ENTRY_URL$" id="readmore">Читать дальше...</a></div></div>     
    </div>

    Сохраняем, идем в таблицу стилей CSS и ставим стилизацию для информера:
    Код
    .slider {     
    float:left;     
    width:600px;     
    height:200px;     
    position:relative;     
    padding:0px;     
    }     

    .sliderContent {     
    float:left;     
    width:600px;     
    height:200px;     
    clear:both;     
    position:relative;     
    overflow:hidden;     
    border:2px solid #333;     
    }     

    .sliderArrows a {     
    display:none;     
    }     

    .prev {     
    display:none;     
    }     

    .next {     
    display:none;     
    }     

    .sliderContent .item {     
    position:absolute;     
    width:600px;     
    height:200px;     
    background: #333;     
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));     
    background-image: -webkit-linear-gradient(top, #444, #222);     
    background-image: -moz-linear-gradient(top, #444, #222);     
    background-image: -ms-linear-gradient(top, #444, #222);     
    background-image: -o-linear-gradient(top, #444, #222);     
    background-image: linear-gradient(top, #444, #222);     
    }     

    .sliderBullets {     
    position:absolute;     
    bottom:15px;     
    left:10px;     
    z-index:50;     
    margin-left:10px;     
    }     

    .sliderBullets a {     
    display:block;     
    float:left;     
    text-indent:-9999px;     
    outline:none;     
    margin-left:5px;     
    width:20px;     
    height:20px;     
    background:url(http://webmaster-ucoz.ru/ucoz/1/img/bullets.png) no-repeat;     
    background-position:right;     
    }     

    .sliderBullets .active {     
    background-position:left;     
    }     

    .sliderContent a {     
    outline:none;     
    }     

    a {     
    color:yellowgreen;     
    text-decoration:none;     
    }     

    a img {     
    border:none;     
    }     
    .sliderContent #cont{padding:10px 10px 10px 20px;display:block;}     

    #text{text-align:left;float:right;width:360px;height:128px;color:#ccc;font-size:12px;overflow:hidden;}     
    #text h2{font-size:13px;color:#999;color:#c69d33;}     
    #readmore{     
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#333));     
    background-image: -webkit-linear-gradient(top, #444, #333);     
    background-image: -moz-linear-gradient(top, #444, #333);     
    background-image: -ms-linear-gradient(top, #444, #333);     
    background-image: -ms-linear-gradient(top, #444, #333);     
    background-image: -o-linear-gradient(top, #444, #333);     
    background-image: linear-gradient(top, #444, #333);     
    -webkit-border-radius:1px;     
    -moz-border-radius:1px;     
    border-radius:1px;     
    -webkit-box-shadow: 0 0px 2px #666;     
    -moz-box-shadow: 0 0px 2px #666;     
    box-shadow: 0 0px 2px #666;     
    color:#c69d33;     
    float:right;     
    display:inline-block;     
    font-size:11px;     
    font-weight:bold;     
    padding:4px;     
    position:absolute;     
    bottom:20px;     
    right:20px;     
    }     
    #readmore:hover{color:#999;}     
    #newsimage{float:left;border:4px solid #222;width:180px;height:120px;margin:10px 10px 0px 0px;}

    В нижней части сайта или в глобальном блоке подключим скрипт:
    Код
    <script src="http://webmaster-ucoz.ru/ucoz/1/js/mobilyslider.js" type="text/javascript"></script>     
    <script type="text/javascript">     
    $(function(){     
         $('.news').mobilyslider({     
         transition: 'horizontal',     
         animationSpeed:300,     
         bullets: true,     
         autoplay: true,     
         pauseOnHover: true,     
         arrows: false,     
         });     
    });     
    </script>

    Идем на страницу, где хотите видеть информер

    И вставляем код информера предварительно скопировав его:
    Код
    <div class="slider news">     
    <div class="sliderContent">$MYINF_1$</div>     
    </div>

    $MYINF_1$ - это нужно поменять на свой номер информера.

    Все, "информер последних новостей" готов.




-Мольфар™-
-Мольфар™-
Пропуск №: 25
Регистрация: 07.01.2014
Ранг: Новичок
Сообщений: 51
Карма: 2 | Хабар: 8
Freedom
Дата: Среда, 05.08.2015, 05:03/ Сообщение №: 2
Бармен, Ошибка на скриншоте, Чтать дальше



StraNNik
StraNNik
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1366
Карма: 28 | Хабар: 10
Слышу гимн зашитых ртов
Дата: Среда, 05.08.2015, 09:33/ Сообщение №: 3
-Мольфар™-, на скриншоте не важно, в коде правильно прописано


Тихо на улице, пусто в квартире..Спасибо реактору №4
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Информеры » Делаем информер последних новостей для uCoz
  • Страница 1 из 1
  • 1
Поиск:
Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Yandex.Browser
Powered by StraNNik | Поддержка сайта Near Bet | Рекомендуем AdGuard
© 20.11.2013-22.09.2020