Как сделать меню с вкладками - Tab (таб) меню ~ SEO простым языком

Как сделать меню с вкладками — Tab (таб) меню

[yandex2]

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

Здравствуйте, Катя! Меня заинтересовала статья про «Красивое оформление статей в блоге«, правда, я еще не определилась как лучше использовать это в своем блоге. Но вопрос не в этом. Дело в том, что я часто вставляю видео в свои сообщения (например, с youtube) и мне хотелось бы сэкономить место (можно, конечно, уменьшить размер самих видео, но мне не нравится смотреть видео в таких маленьких размерах, а переходить на другую страницу не хотелось бы). На некоторых сайтах я встречаю, когда видео вставляются в одно сообщение как бы на разных вкладках, например, как здесь

но как это делается я не знаю. Может быть поможете красиво решить этот вопрос?

Вообще подобные вкладки называются табами, от английского tab (tabs). Это слово имеет много значений, и какое из них послужило названию меню с вкладками мне не известно.

Таб-меню можно применять, как в главном горизонтальном меню блога, в сайдбаре (боковом меню) своего блога, так и непосредственно в теле сообщений. Все зависит от ваших личных задач и потребностей.

Признаюсь честно, я не стала сильно заморачиваться кодом для таб меню. Дело в том, что я по-тихоньку готовлю новый шаблон для этого блога, так вот в новом дизайне у меня будет именно такое меню. Код для него уже был придуман разработчиком шаблона.

Поэтому я просто разобрала его на составные части, разобралась, что для чего нужно, чтобы этот код функционировал и именно о нем сейчас и расскажу. Этот код проверен только для шаблонов для Blogger. На сколько код хорош с точки зрения программирования – сказать не могу. Главное работает:). Итак, приступим.

Еще по теме Ответы на вопросы читателей про Blogger

Подключаем библиотеку Jquery для таб меню

Первое, без чего такое меню не будет существовать – это без подключения специальной библиотеки Jquery.Прежде, чем подключать, проверьте, скорее всего у вас уже она подключена.

На Blogger, думаю, у всех подключена, ведь на этой платформе можно пользоваться JavaScript, и у нас ссылка на этот файл стоит по умолчанию. Открываем свой блог (не админку, а именно блог), кликаем правой кнопкой мыши в любом месте, выбираем команду (в зависимости от вашего браузера) — Исходный код страницы/Просмотр кода страницы/Просмотр HTML кода/Исходный код. Откроется новое окошко (или вкладка) и ближе к началу страницы, между тегами <head>тут</head> ищем вот такую строчку:

Цифры внутри ссылки могут быть разные, зависит от версии скрипта (если я правильно понимаю). Кто такую строчку не нашел, значит нужно вставить ее самостоятельно. Очень маловероятно, чтобы на Blogger не было такой строчки, но все же я на всякий случай опишу процесс.

Открываем Дизайн – Изменить HTML. Находим </head>. И выше него вставляем «мою» строчку.

Библиотеку подключили. Далее необходимо подключить ещё один скрипт, благодаря которому и функционирует меню с вкладками.

Устанавливаем скрипт для меню с вкладками

[yandex]

Открываем Дизайн – Изменить HTML. На всякий случай ставим галочку «Расширить шаблоны виджетов». Находим </body> и выше этого тега вставляем код:

Вообще этот код можно поместить абсолютно в любое место в шаблоне. Но я считаю, что чем ниже оно будет, тем лучше. Благодаря этому не будет происходить задержка с загрузкой страницы. Если у вас не получается его вставить в шаблон блога, можно вставить в гаджет 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; /*Рамка блока с содержимым*/
}

Я подписала основные элементы, которые скорее всего вы захотите изменить. Остальные отвечают в основном за расположение элементов. Менять можно, но мне кажется, ни к чему.

Вставка таб меню в блог

Теперь переходим непосредственно к нашему меню с вкладками. Как выше написала, меню может быть, как в сайдбаре блога, так и внутри сообщения.

Еще по теме Белое SEO или азы продвижения сайта в интернете

Если вы хотите установить меню в сайдбаре, открываем Дизайн – Элементы страницы – Добавить гаджет. Выбираем гаджет 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>

Не рекомендую менять class и id (кроме <div class=»video»>) в этом коде, т.к. он строго привязан к коду, который мы устанавливали в шаблон блога. Но присваивать новые class или id (там, где его нет) можно. Это может потребоваться, если вы захотите изменить внешний вид вкладок.

Надеюсь, понятно по моим комментариям, где что должно быть.

Принимайте работу.

Как работает меню вы можете увидеть по старому адресу блога в самом верху в правом сайдбаре.

[ads1]

Надеюсь, вам понравилось данное решение и вы с легкостью справитесь с его установкой. Если что-то не получится, спрашивайте в комментариях, постараюсь помочь. Кстати, для WordPress для этих случаев есть готовые плагины, но так же можно найти и скрипты, которые устанавливаются вручную. В будущих статьях расскажу и об этом. А для любителей DLE рекомендую позаботиться о безопасности своего сайта и узнать про заплатки на DLE. Хорошо, что для Blogger нам не нужно думать о таких вещах, как взлом. Конечно, можно взломать все, что угодно, но нас защищает сам Google, а это серьезная контора, так что спите спокойно жители Blogger.Удачи вам.

Еще по теме Как пользоваться документами Google

Екатерина Михайлова

Next Ответы на вопросы. Выпуск 10 »

Previous « Как поменять заголовки в Blogger

View Comments

Retliff says:

at

Всегда получаю удовольствие от подробности описания процесса и ясности стиля изложения! Спасибо, Катя! Блестяще, как всегда!
У меня к тебе тоже вопрос (или идея для нового поста)!-)
Часто бывает, что код, который публикуется в статье, не вмещается в габариты блока сообщений.Может быть ты знаешь, как сделать скроллинг?
Иван says:

at

Вот никто такого раньше подобное не писал!!! Круто Катя, круто, что бы без тебя русские блогеры делали!
SEO-Дилетант'ка says:

at

На сколько мне известно, формат видео на YouTube только один. Под окном видеоролика есть кнопка "Встроить" - выдается только один вид кода, и именно его полностью надо вставить. Можно только предварительно указать размер окна, цвет рамки, и ещё кой-какие настройки.
SEO-Дилетант'ка says:

at

Конечно же до меня писали, но согласна, что очень мало.
Спасибо:)
SEO-Дилетант'ка says:

at

Спасибо, Сергей.
Не пытаешься ли ты мне намекнуть, что мне стоит использовать скроллинг? ;) Я подумаю над этим...
Я напишу, как сделать скролл в ближайших ответах на вопросы.
Retliff says:

at

Никаких намёков, Катюша!-)
Просто это действительно актуально!
А ещё (кроме скролла) видел очень интересный вариант с кнопкой, где большущий код открывался на новой вкладке - это тоже было бы интересно реализовать!-)
SEO-Дилетант'ка says:

at

Вариант с кнопкой - я знаю про такой, знаю, где взять, но когда установила на тестовый блог, код очень глючил. Проблема была именно в том, что разработчик приложения не обновлял его. Буквально на днях все в том же тестовом блоге заметила, что бага вроде нет. Как только будет свободное время, я заново все просмотрю, и если проблемы нет, то расскажу, как это сделать.
SwaEgo says:

at

Спасибо за как всегда полезную информацию.С блоггера переезжаю,но пригодится по-любому)
Vlad Igolkin says:

at

Спасибо!
KinoBestia says:

at

Катюша, спасибо за замечательную статью, я нигде и не встречала такого интересного решения для видео - действительно удобно, что не нужно открывать отдельную страницу, плюс аккуратно и оригинально=)
У меня тут к вам вопрос - понимаю, что он не вписывается в рамки данного поста, но, думаю, эта тема станет вскоре очень актуальной: мы размещаем на страницах своих блогов видео-контент - из youtube, других видеохостингов, сами загружаем. Как можно добиться их индексации так, чтобы они попали в выдачу google video? Допустим, я разместила на youtube своё видео и встроила его на свой блог. На youtube оно быстро проиндексируется, но я хочу, чтобы проиндексировалось именно то видео (не страница, а видео), которое расположено на странице моего блога. Есть ли примеры какой-то рабочей схемы? Я читала документы google, даже составила в соответствии с рекомендациями и отправила в гугл вебмастерс video sitemap с данными встроенного у меня видео с ютьюб, однако эти видео так и не проиндексировались. Скажите, пожалуйста, интересовались ли вы темой индексации видео?=)