Боковые колонки с вкладками на Blogger(Blogspot)

Опавшая ярко желтая листва Сейчас, уважаемые, члены издательского дома Blogger, мы с вами будем делать блок вкладок(табов) в боковой панели нашего блога, при помощи простейшего CSS и очень маленького jQuery скрипта. Это позволит удобно и красиво разместить больше понравившихся виджетов, а посетителей избавит от долгой прокрутки страницы, чтобы увидеть нужный. Нам потребуется всего один раз дополнить необходимыми кодами шаблон, и в дальнейшем спокойно добавлять гаджеты в нужную вкладку как обычно из админ-панели.
 Весь процесс займет очень не много времени и произойдет просто и быстро.
  Вообще-то я уже писал про один хороший jQuery скрипт от Dimox-а и о том как добавить блок с вкладками на страницу. Собственно его и будем использовать для реализации вкладок в сайдбаре на Blogger.
Если вы уже используете этот скрипт, повторно добавлять его не нужно, как и CSS. Достаточно просто присвоить соответствующие классы размещаемым блокам.
  Для благополучного завершения процесса у вас в блоге должен быть подключен фреймворк jQuery. У многих так и есть, но если вы недавно проснулись, то вам его нужно подключить.
DEMO
  Итак, открываем код шаблона, НЕ ставим галочку на "Расширить шаблоны виджета", добавляем там до закрывающего </head>тот самый скрипт JQuery:
(function($) {
 $(function() {
  $('ul.my-tabs').delegate('li:not(.current)', 'click', function() {
   $(this).addClass('current').siblings().removeClass('current')
   .parents('div.tabs-block').find('div.sidebar').eq($(this).index()).fadeIn(150).siblings('div.sidebar').hide();
  })
 })
})(jQuery)
  Далее, перед строкой ]]></b:skin> добавляем немного CSS
/*скрываем секции в блоке вкладок*/
.tabs-block .sidebar {
 display: none;
}
/*указываем что блок с классом visible будет виден*/
.tabs-block .sidebar.visible {
 display: block;
}
/*стиль для блока меню вкладок*/
.my-tabs {
 background: #ccf;
 border: 1px solid #666;
 text-align: center;
 list-style: none;
 padding: 0 !important;
 margin: 0 !important;
 width: auto;
}
/*стиль кнопок меню*/
.my-tabs > li {
 display: inline-block;
 *float: left; /*IE7*/
 background: #96f;
 border: 2px groove #CC80FF;
 color: #fff;
 text-align: center;
 text-shadow: 1px 1px 2px #000;
 font: normal 500 14px/20px Tahoma, sans-serif;
 cursor: pointer;
 padding: 3px 5px;
 margin: 1px;
 height: 20px;
 width: auto;
}
/*стиль кнопок при наведении и кнопки активной вкладки*/
.my-tabs > li.current,
.my-tabs > li:hover {
 background: #ccf;
 border: 2px ridge #7A29CC;
 color: #60c;
 text-shadow: 1px 1px 2px #fff;
}
  Вот и весь функционал, теперь остается только добавить небольшой HTML код вкладок в блок боковой панели. Тут тоже, ничего сверхсложного не будет.

Стандартный шаблон Blogger-блога содержит изначально код обеих боковых колонок - левой и правой, не зависимо от того какую именно вы используете.
Блок левой панели:
 <div class='column-left-outer'>
 <div class='column-left-inner'>
   <!-- внутренний код -->
 </div>
 </div>
Блок правой панели:
  <div class='column-right-outer'>
  <div class='column-right-inner'>
   <!-- внутренний код -->
 </div>
 </div>
  Тут же в коде шаблона, находим блок нужной колонки (Ctrl + F в помощь), и добавляем код блока вкладок как показано в примере ниже.
<div class='column-right-outer'>
<div class='column-right-inner'>
  <div class="tabs-block"><!-- весь блок вкладок -->
<!-- секция меню-->
  <b:section class='tabs-menu' id='right-tabs' showaddelement='yes'/>
<!--секции вкладок, количество не ограничено -->
  <b:section class='sidebar visible' id='right-content-1' showaddelement='yes'/> <!-- Вкладка №1-->
  <b:section class='sidebar' id='right-content-2' showaddelement='yes'/> <!-- Вкладка №2 -->
  <b:section class='sidebar' id='right-content-3' showaddelement='yes'/> <!-- Вкладка №3-->
  </div><!-- конец -->
   <!--остальной код-->
  <aside>
...
  Сохраняем, закрываем, идем в раздел "Дизайн" и смотрим. Должно получится так:
Скриншот админ-панели Blogger
 Теперь, когда все самое страшное позади, в самую первую, верхнюю секцию добавляем гаджет HTML/JavaScript, а в него код меню для переключения вкладок, приведенный ниже:
<ul class='my-tabs'>
  <li class='current'>Вкладка №1</li> <!-- покажет right-content-1 -->
  <li>Вкладка №2</li> <!-- покажет right-content-2 -->
  <li>Вкладка №3</li> <!-- покажет right-content-3 -->
<br clear='all'/>
</ul>
  Таким образом возможно добавлять неограниченное количество как вкладок, так и блоков с вкладками и использовать их одновременно.
Если вы хотите сделать только один блок с вкладками, то добавлять стили и скрипт, непосредственно в код шаблона не обязательно. Их можно разместить вместе с меню, в гаджете HTML/JavaScript следующим образом:
<script>
 <!--...
  здесь jQuery
 ...-->

</script>
<style>
 <!--...
  здесь CSS
 ...-->

</style>
<ul class='my-tabs'>
  <li class='current'>Вкладка №1</li>
  <li>Вкладка №2</li>
  <li>Вкладка №3</li>
<br clear='all'/>
</ul>
  Это удобно и позволит, в случае необходимости быстро внести изменения.
  Стили оформления произвольные, подбираются по вкусу.
Но не забываем что:
- идентификатор каждой секции в шаблоне должен быть уникален, т.е. не повторятся;
<b:section class='sidebar' id='ОДИН-ЕДИНСТВЕННЫЙ' showaddelement='yes'/>
- обязательный CSS для блока:
.tabs-block .sidebar.visible {
  display: block;
}
.tabs-block .sidebar {
  display: none;
}
- количество кнопок в меню одного блока, соответствует количеству вкладок.
Немного подумав, решил дополнить выше изложенное. Блок с вкладками сбоку, это конечно хорошо, но боковая панель из вкладок значительно лучше!
  Размещение происходит непосредственно в стандартном блоке боковой колонки - <aside>, вне его пределов, дополнительно ничего добавлять не нужно.
  Пример для правой колонки.
<div class='column-right-outer'>
<div class='column-right-inner'>
 <aside> <!-- стандартный блок -->
<!--секция для размещения меню -->
   <b:section class='tabs-menu' id='right-tabs' showaddelement='yes'/>
<!--секции вкладок, количество не ограничено -->
   <b:section class='sidebar visible' id='right-content-1' showaddelement='yes'/>
   <b:section class='sidebar' id='right-content-2' showaddelement='yes'/>
   <b:section class='sidebar' id='right-content-3' showaddelement='yes'/>
    <macro:include id='main-column-right-sections' name='sections'> <!-- Стандартная секция, вкладки №4 и №5 -->
     <macro:param default='2' name='num' value='2'/>
     <macro:param default='sidebar-right' name='idPrefix'/>
     <macro:param default='sidebar' name='class'/>
     <macro:param default='true' name='includeBottom'/>
    </macro:include>
 </aside>
</div>
</div>
  Но необходимо лишь немного подкорректировать коды стиля и скрипта исходя из новых обстоятельств.
   !Изменения выделены:
  CSS
/*скрываем секции в блоке вкладок*/
.column-right-inner .sidebar,
.section-columns {
 display: none;
}
/*указываем что блок с классом visible будет виден*/
.column-right-inner .sidebar.visible,
.section-columns .sidebar {
 display: block;
}
/*стиль для блока меню вкладок*/
.my-tabs {
 background: #ccf;
 border: 1px solid #666;
  jQuery
(function($) {
 $(function() {
   $('ul.my-tabs').delegate('li:not(.current)', 'click', function() {
     $(this).addClass('current').siblings().removeClass('current')

       .parents('aside').find('div.sidebar, .section-columns').eq($(this).index()).fadeIn(150).siblings('div.sidebar, .section-columns').hide();
   })
 })
})(jQuery)
  Меню для переключения между вкладками, как и прежде, размещаем из админки в гаджете HTML/Javascript.
 В итого получается так:
Скриншот админ-панели Blogger. Боковая панель из вкладок
 Ну вот и все. Мнения, пожелания и т. п. вносим в форму ниже.
©http://magentawave.com

9 комментариев:

  1. А вот за это спасибо, давно "охочусь" за аналогичным виджетом! Статью в закладки!

    ОтветитьУдалить
  2. Спасибо! Так все заманчиво, но начинать что-то менять страшно))

    ОтветитьУдалить
  3. Опять здравствуйте. Мне эта идея очень нравится, но я хочу добавить кнопки выбора гаджетов не сверху боковой панели, а чуть ниже. http://edodina.blogspot.ru/ - поиск и обе подписки хотелось бы оставить на месте, а уже под ними размещать оставшиеся гаджеты по средствам переключения кнопок. В каком месте и что надо вставлять в шаблон в таком случае? Спасибо.

    ОтветитьУдалить
    Ответы
    1. Все просто. Вы можете просто ниже этой секции, где поиск и подписки, в коде, разместить блок вкладок (первый вариант). А насчет меню переключения, так для него не важно где оно расположено, вверху секции с вкладками или внизу, где на ваш взгляд лучше там и расположите, главное чтобы вкладки и меню были в одном, общем, блоке.

      Удалить
    2. А ещё скажите, пожалуйста, (не знаю, как к Вам обращаться))), сейчас обновленный редактор html, там нет "Расширить шаблоны виджета". Это ничего страшного. не повлияет. И ещё некоторые части кода спрятаны в треугольнички. Надо их всех развернуть в начале?

      Удалить
    3. Моё имя Александр, это обозначено в "подвале", сразу за корайтом :) Да в новом редакторе уже нет "Расширить шаблоны виджета", так как весь код доступен сразу, а виджеты и некоторый другой код, например стили (CSS) просто свернуты за "треугольничками". Всех их открывать не нужно, только те части которые вам нужны для внесения изменений.

      Удалить
    4. Ого, Вы себя вниз-то как загнали. Обычно я привыкла имя наверху страницы наблюдать, так что даже не подумала туда глянуть))

      Удалить
    5. Скромничаю и работаю под псевдонимом ))

      Удалить
  4. Большое спасибо за панельку. Очень удобно. Поставила первый вариант. =)

    ОтветитьУдалить

Следующее Предыдущее

BestProject