Правила форума Подписки Ленточный
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Ловец снов (ОБТ) (0)
Контракт: Выходец с того ... (0)
Prosectors Project 1.7 (0)
Тайна Кордона (0)
История Джона 2 (ОБТ) (0)
У костра (193)
Анекдоты (145)
Города (94)
Обновления сайта (77)
Свалка (68)
StraNNik (1416)
RamzeS (513)
Каратель (170)
Narkostalker (121)
Кракен (93)
nikbal888 (05.12.2023)
Fugaz56 (09.08.2023)
Пряня (22.06.2023)
yaroslavcohevis80 (16.11.2022)
61373872 (12.08.2022)
  • Страница 1 из 1
  • 1
Форум [HoC] | Развлекательный форум » Мастерская портала » Скрипты » Информеры » Делаем информер последних новостей для uCoz
Делаем информер последних новостей для uCoz
Бармен
Группа: Бывалые
Ранг: Отмычка
Сообщений: 74
Карма: 19
Сообщение # 1
Дата: 04.08.2015 в 17:07

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

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



  • -Мольфар™-
    Группа: Бывалые
    Ранг: Отмычка
    Сообщений: 51
    Карма: 2
    Сообщение # 2
    Дата: 05.08.2015 в 05:03
    Бармен, Ошибка на скриншоте, Чтать дальше



    Слышу гимн зашитых ртов
    StraNNik
    Группа: Администратор
    Ранг: Опытный
    Сообщений: 1416
    Карма: 33
    Сообщение # 3
    Дата: 05.08.2015 в 09:33
    -Мольфар™-, на скриншоте не важно, в коде правильно прописано

    Форум [HoC] | Развлекательный форум » Мастерская портала » Скрипты » Информеры » Делаем информер последних новостей для uCoz
    • Страница 1 из 1
    • 1
    Поиск:

    Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
    Любое использование материалов сайта возможно только с разрешения его администрации!
    Для корректного отображения сайта, рекомендуем использовать обновленный Microsoft Edge
    Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
    © 20.11.2013-09.12.2023