• Страница 1 из 1
  • 1
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Делаем информер последних новостей для uCoz
Делаем информер последних новостей для uCoz
XemorDioДата: Понедельник, 04.04.2016, 13:28 | Сообщение # 1
Генерал-полковник
Группа: Пользователи
Сообщений: 897
Награды: 7
Репутация: 8
Статус: Offline

Описание скрипта:
  • Очередная реализация информера на 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$ - это нужно поменять на свой номер информера.

    Все, "информер последних новостей" готов.
  •  
    Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Делаем информер последних новостей для uCoz
    • Страница 1 из 1
    • 1
    Поиск:
    Поделись с другими сталкерами
    Меню сайта
    Гость
    Статистика
    Рейтинг@Mail.ru