Конечно,что уж тут говорить, и клип попсовый да и лабутены обувь довольно приличная,но тематика блога несколько не соответствует формату новостей шоу-биза и поэтому приступим к основной теме.А тема сегодня установка модуля вкладок табов для оптимизации места на странице и донесения большего объёма информации до посетителя.
Установка модуля вкладок.
Модуль открывающихся вкладок работает на Query и следовательно следует установить код в шаблон,если его ещё нет. Затем перед закрывающимся тегом </body> устанавливаем приведённый ниже скрипт
<script>
(function($) {
$(function() {
$('div.intabs').delegate('div:not(.current)', 'click', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('div.allsection').find('div.pagebox').eq($(this).index()).fadeIn(150).siblings('div.pagebox').hide();
})
})
})(jQuery)
</script>
(function($) {
$(function() {
$('div.intabs').delegate('div:not(.current)', 'click', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('div.allsection').find('div.pagebox').eq($(this).index()).fadeIn(150).siblings('div.pagebox').hide();
})
})
})(jQuery)
</script>
Остаются лишь настройки блога показа,которые находятся в файле CSS и подписаны для удобства для настройки под дизайн оформления страниц блога. Его следует добавить в раздел для стилей,предварительно подогнав под свой дизайн в онлайн-отладчике для кодов.
<style> /*вкладки-табы v-gol.ru */
.allsection {
width: 600px; /*ширина блока*/
margin: 0;
text-align: left;
}
.intabs {
margin: 0;
padding: 0;
}
.intabs div {
float:left;
cursor: pointer;
text-align: center;
font: normal normal 16px Tahoma, sens serif;
color:#000; /*цвет текста и размер*/
padding: 7px 10px;
margin: 0 3px 0 0;
border-radius: 3px 3px 0 0;
background: #ccc; /*цвет фона меню */
border: 1px solid #836FFF; /*цвет рамки*/
} /*нажатая вкладка цвет*/
.intabs div:hover {
border: 1px solid #A08BED;
color:#000;
background: #dbd5ef;
}
.intabs div.current {
background: #eceaf2;
border: 1px solid #C4C4C4;
border-bottom: 1px solid transparent;
} /*Настройки скрытого блока*/
.pagebox {
display: none;
padding: 10px;
color: #000;
background: #fff; border: 1px solid #ddd;
}
.pagebox.visible {
display: block;
border-top: 0;
}
.pagebox img {width: 150px; float: left; border: none; margin: 0 5px 5px 0;}
</style>
.allsection {
width: 600px; /*ширина блока*/
margin: 0;
text-align: left;
}
.intabs {
margin: 0;
padding: 0;
}
.intabs div {
float:left;
cursor: pointer;
text-align: center;
font: normal normal 16px Tahoma, sens serif;
color:#000; /*цвет текста и размер*/
padding: 7px 10px;
margin: 0 3px 0 0;
border-radius: 3px 3px 0 0;
background: #ccc; /*цвет фона меню */
border: 1px solid #836FFF; /*цвет рамки*/
} /*нажатая вкладка цвет*/
.intabs div:hover {
border: 1px solid #A08BED;
color:#000;
background: #dbd5ef;
}
.intabs div.current {
background: #eceaf2;
border: 1px solid #C4C4C4;
border-bottom: 1px solid transparent;
} /*Настройки скрытого блока*/
.pagebox {
display: none;
padding: 10px;
color: #000;
background: #fff; border: 1px solid #ddd;
}
.pagebox.visible {
display: block;
border-top: 0;
}
.pagebox img {width: 150px; float: left; border: none; margin: 0 5px 5px 0;}
</style>
Ну и последняя часть данного кода НТМЛ,куда и следует добавить весь текст,фото и видео согласно подписанным параметрам.
<div class="allsection"> <div class="intabs"> <div class="current">Дата выхода клипа</div> <div>Лабутены</div> <div>Экспонат клип Ленинград</div> <div>Лабутен мен</div> </div> <div style="clear: left;"> </div> <div class="pagebox visible">Текст первое окно</div> <div class="pagebox">Текст2</div> <div class="pagebox">Текст3</div> <div class="pagebox">Текст4</div> </div> | Смотреть ещёКак добавить форум на блогСлайдер- ротатор для блога Ротатор для баннеров Эффекты для фото на CSS. Оформление блоков для кода |
Если все манипуляции с кодом были проведены правильно,то в результате на странице появиться такая вкладка-таб,где будут спрятаны два видео и описание к ним.Ну вот и всё,смотрите видео группы Ленинград "Экспонат-лабутены" приятного просмотра.
Дата выхода клипа
Лабутены
Экспонат клип Ленинград
Лабутен мен
Группа «Ленинград» представила первый в 2016 году видеоклип. Ролик под названием «Экспонат» был опубликован 13.01.2016 на официальном канале коллектива на портале Youtube. Главная героиня клипа группы «Ленинград» «Экспонат» – молодая девушка, добившаяся приглашения на выставку от человека, который вызывает у неё симпатию. Основное действие ролика разворачивается уже после получения приглашения. Зрителю предлагается наблюдать за драматическими сборами героини на свидание, ключевым моментом которых является выпрашивание у подруги лабутенов. 
Лабутены – это дизайнерская модель обуви, названная по фамилии её создателя – Кристиана Лубутена. Отличительной особенностью этой обуви является подошва красного цвета. Сами туфли изготавливаются из экзотических пород кожи с использованием страз Сваровски и ручного кружева. Клип «Экспонат» группы «Ленинград» снят студией Fancy Shot. Режиссёр клипа – Анна Пармас, оператор-постановщик – Антон Жабин, арт-директор – Пётр Бондаренко, продюсер – Дмитрий Муравьёв. Роль главной героини исполнила Юлия Топольницкая. Песню исполняет Алиса Вокс-Бурмистрова.
Отправить комментарий