Доброго времени суток, уважаемые читатели. Этой статьи могло бы и не быть, если бы не одно письмо от читательницы, в котором она попросила рассказать, как красиво оформить видео в блоге, при этом сэкономив место в теле сообщения. Вот, кстати, и письмо:
Здравствуйте, Катя! Меня заинтересовала статья про "Красивое оформление статей в блоге", правда, я еще не определилась как лучше использовать это в своем блоге. Но вопрос не в этом. Дело в том, что я часто вставляю видео в свои сообщения (например, с youtube) и мне хотелось бы сэкономить место (можно, конечно, уменьшить размер самих видео, но мне не нравится смотреть видео в таких маленьких размерах, а переходить на другую страницу не хотелось бы). На некоторых сайтах я встречаю, когда видео вставляются в одно сообщение как бы на разных вкладках, например, как здесь
но как это делается я не знаю. Может быть поможете красиво решить этот вопрос?
но как это делается я не знаю. Может быть поможете красиво решить этот вопрос?
Вообще подобные вкладки называются табами, от английского tab (tabs). Это слово имеет много значений, и какое из них послужило названию меню с вкладками мне не известно.
Таб-меню можно применять, как в главном горизонтальном меню блога, в сайдбаре (боковом меню) своего блога, так и непосредственно в теле сообщений. Все зависит от ваших личных задач и потребностей.
Признаюсь честно, я не стала сильно заморачиваться кодом для таб меню. Дело в том, что я по-тихоньку готовлю новый шаблон для этого блога, так вот в новом дизайне у меня будет именно такое меню. Код для него уже был придуман разработчиком шаблона.
Поэтому я просто разобрала его на составные части, разобралась, что для чего нужно, чтобы этот код функционировал и именно о нем сейчас и расскажу. Этот код проверен только для шаблонов для Blogger. На сколько код хорош с точки зрения программирования – сказать не могу. Главное работает:). И так, приступим.
Таб-меню можно применять, как в главном горизонтальном меню блога, в сайдбаре (боковом меню) своего блога, так и непосредственно в теле сообщений. Все зависит от ваших личных задач и потребностей.
Признаюсь честно, я не стала сильно заморачиваться кодом для таб меню. Дело в том, что я по-тихоньку готовлю новый шаблон для этого блога, так вот в новом дизайне у меня будет именно такое меню. Код для него уже был придуман разработчиком шаблона.
Поэтому я просто разобрала его на составные части, разобралась, что для чего нужно, чтобы этот код функционировал и именно о нем сейчас и расскажу. Этот код проверен только для шаблонов для Blogger. На сколько код хорош с точки зрения программирования – сказать не могу. Главное работает:). И так, приступим.
Подключаем библиотеку Jquery для таб меню
Первое, без чего такое меню не будет существовать – это без подключения специальной библиотеки Jquery.
Прежде, чем подключать, проверьте, скорее всего у вас уже она подключена.
На Blogger, думаю, у всех подключена, ведь на этой платформе можно пользоваться JavaScript, и у нас ссылка на этот файл стоит по умолчанию. Открываем свой блог (не админку, а именно блог), кликаем правой кнопкой мыши в любом месте, выбираем команду (в зависимости от вашего браузера) - Исходный код страницы/Просмотр кода страницы/Просмотр HTML кода/Исходный код. Откроется новое окошко (или вкладка) и ближе к началу страницы, между тегами <head>тут</head> ищем вот такую строчку:
Прежде, чем подключать, проверьте, скорее всего у вас уже она подключена.
На Blogger, думаю, у всех подключена, ведь на этой платформе можно пользоваться JavaScript, и у нас ссылка на этот файл стоит по умолчанию. Открываем свой блог (не админку, а именно блог), кликаем правой кнопкой мыши в любом месте, выбираем команду (в зависимости от вашего браузера) - Исходный код страницы/Просмотр кода страницы/Просмотр HTML кода/Исходный код. Откроется новое окошко (или вкладка) и ближе к началу страницы, между тегами <head>тут</head> ищем вот такую строчку:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Цифры внутри ссылки могут быть разные, зависит от версии скрипта (если я правильно понимаю). Кто такую строчку не нашел, значит нужно вставить ее самостоятельно. Очень маловероятно, чтобы на Blogger не было такой строчки, но все же я на всякий случай опишу процесс.
Открываем Дизайн – Изменить HTML. Находим </head>. И выше него вставляем "мою" строчку.
Библиотеку подключили. Далее необходимо подключить ещё один скрипт, благодаря которому и функционирует меню с вкладками.
Открываем Дизайн – Изменить HTML. Находим </head>. И выше него вставляем "мою" строчку.
Библиотеку подключили. Далее необходимо подключить ещё один скрипт, благодаря которому и функционирует меню с вкладками.
Устанавливаем скрипт для меню с вкладками
Открываем Дизайн – Изменить HTML. На всякий случай ставим галочку "Расширить шаблоны виджетов". Находим </body> и выше этого тега вставляем код:
<script type='text/javascript'>
$(document).ready(function(){
$('#tab-sidebar .widget1').hide();
$('#tab-sidebar .widget1:first').show();
$('.tab-widget-menu ul li:first').addClass('selected');
$('.tab-widget-menu ul li').click(function(){
$('.tab-widget-menu ul li').removeClass('selected');
$(this).addClass('selected');
$('#tab-sidebar .widget1').hide();
$('#tab-sidebar .widget1').eq($('.tab-widget-menu ul li').index(this)).fadeIn(500);
});
});
</script>
$(document).ready(function(){
$('#tab-sidebar .widget1').hide();
$('#tab-sidebar .widget1:first').show();
$('.tab-widget-menu ul li:first').addClass('selected');
$('.tab-widget-menu ul li').click(function(){
$('.tab-widget-menu ul li').removeClass('selected');
$(this).addClass('selected');
$('#tab-sidebar .widget1').hide();
$('#tab-sidebar .widget1').eq($('.tab-widget-menu ul li').index(this)).fadeIn(500);
});
});
</script>
Вообще этот код можно поместить абсолютно в любое место в шаблоне. Но я считаю, что чем ниже оно будет, тем лучше. Благодаря этому не будет происходить задержка с загрузкой страницы. Если у вас не получается его вставить в шаблон блога, можно вставить в гаджет HTML/JavaScript, и поместить этот гаджет внизу страницы.
Определение стилей для меню
Чтобы наше меню красиво выглядело, к нему необходимо применить CSS. Я немного поколдовала, ниже увидите, как это может выглядеть. Вы же можете настроить внешний вид под свой вкус. И так, стили ставим сразу перед строкой ]]></b:skin>
#tab-sidebar, tab-widget-menu clear {
width: 500px; /*Ширина блока*/
}
.tab-widget-menu li.selected {
background: none repeat scroll 0 0 #FFFFCC; /*Цвет активной вкладки*/
bottom: -1px;
position: relative;
}
.tab-widget-menu li {
float:left; /*Горизонтальное положение вкладок */
display:block;
padding:0 12px;
border-right:1px solid #ECEDE8; /*Рамка у вкладок */
height:30px;
line-height:30px;
cursor:pointer;
color:#555; /*Цвет текста*/
text-align:center;
}
.video {
width: auto;
background-color: #006DFF; /*Цвет блока с содержимым*/
padding: 31px 5px 5px; /*Поля вокруг содержимого*/
border: 1px solid #ECEDE8; /*Рамка блока с содержимым*/
}
width: 500px; /*Ширина блока*/
}
.tab-widget-menu li.selected {
background: none repeat scroll 0 0 #FFFFCC; /*Цвет активной вкладки*/
bottom: -1px;
position: relative;
}
.tab-widget-menu li {
float:left; /*Горизонтальное положение вкладок */
display:block;
padding:0 12px;
border-right:1px solid #ECEDE8; /*Рамка у вкладок */
height:30px;
line-height:30px;
cursor:pointer;
color:#555; /*Цвет текста*/
text-align:center;
}
.video {
width: auto;
background-color: #006DFF; /*Цвет блока с содержимым*/
padding: 31px 5px 5px; /*Поля вокруг содержимого*/
border: 1px solid #ECEDE8; /*Рамка блока с содержимым*/
}
Я подписала основные элементы, которые скорее всего вы захотите изменить. Остальные отвечают в основном за расположение элементов. Менять можно, но мне кажется, ни к чему.
Вставка таб меню в блог
Теперь переходим непосредственно к нашему меню с вкладками. Как выше написала, меню может быть, как в сайдбаре блога, так и внутри сообщения.
Если вы хотите установить меню в сайдбаре, открываем Дизайн – Элементы страницы – Добавить гаджет. Выбираем гаджет HTML/JavaScript.
Если меню необходимо вставить внутрь сообщения блога, то в момент написания статьи, переходим на вкладку Изменить HTML и вставляем такой код:
Если вы хотите установить меню в сайдбаре, открываем Дизайн – Элементы страницы – Добавить гаджет. Выбираем гаджет HTML/JavaScript.
Если меню необходимо вставить внутрь сообщения блога, то в момент написания статьи, переходим на вкладку Изменить HTML и вставляем такой код:
<div id='tab-sidebar'>
<div class='tab-widget-menu clear'>
<ul>
<li class='tab1'>Название первой вкладки</li>
<li class='tab2'>Название второй вкладки</li>
<li class='tab3'>Название третьей вкладки</li>
</ul>
</div>
<div class='widget1'>
<div class="video">
Содержимое первой вкладки
</div>
</div>
<div class='widget1'>
<div class="video">
Содержимое второй вкладки
</div>
</div>
<div class='widget1'>
<div class="video">
Содержимое третьей вкладки
</div>
</div>
</div>
<div class='tab-widget-menu clear'>
<ul>
<li class='tab1'>Название первой вкладки</li>
<li class='tab2'>Название второй вкладки</li>
<li class='tab3'>Название третьей вкладки</li>
</ul>
</div>
<div class='widget1'>
<div class="video">
Содержимое первой вкладки
</div>
</div>
<div class='widget1'>
<div class="video">
Содержимое второй вкладки
</div>
</div>
<div class='widget1'>
<div class="video">
Содержимое третьей вкладки
</div>
</div>
</div>
Не рекомендую менять class и id (кроме <div class="video">) в этом коде, т.к. он строго привязан к коду, который мы устанавливали в шаблон блога. Но присваивать новые class или id (там, где его нет) можно. Это может потребоваться, если вы захотите изменить внешний вид вкладок.
Надеюсь, понятно по моим комментариям, где что должно быть.
Принимайте работу.
Надеюсь, понятно по моим комментариям, где что должно быть.
Принимайте работу.
Обновление от 10,02,2011. Как работает меню вы можете увидеть в самом верху в правом сайдбаре.
Надеюсь, вам понравилось данное решение и вы с легкостью справитесь с его установкой. Если что-то не получится, спрашивайте в комментариях, постараюсь помочь. Кстати, для WordPress для этих случаев есть готовые плагины, но так же можно найти и скрипты, которые устанавливаются вручную. В будущих статьях расскажу и об этом. А для любителей DLE рекомендую позаботиться о безопасности своего сайта и узнать про заплатки на DLE. Хорошо, что для Blogger нам не нужно думать о таких вещах, как взлом. Конечно, можно взломать все, что угодно, но нас защищает сам Google, а это серьезная контора, так что спите спокойно жители Blogger.
Удачи вам.
Удачи вам.
