Весь процесс займет очень не много времени и произойдет просто и быстро.
Вообще-то я уже писал про один хороший 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$(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)
/*скрываем секции в блоке вкладок*/
.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 код вкладок в блок боковой панели. Тут тоже, ничего сверхсложного не будет..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;
}
Стандартный шаблон Blogger-блога содержит изначально код обеих боковых колонок - левой и правой, не зависимо от того какую именно вы используете.
Блок левой панели:
Тут же в коде шаблона, находим блок нужной колонки (Ctrl + F в помощь), и добавляем код блока вкладок как показано в примере ниже.Блок левой панели:
<div class='column-left-outer'>
<div class='column-left-inner'>
<!-- внутренний код -->
</div>
</div>
Блок правой панели:<div class='column-left-inner'>
<!-- внутренний код -->
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<!-- внутренний код -->
</div>
</div>
<div class='column-right-inner'>
<!-- внутренний код -->
</div>
</div>
<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='sidebarvisible' 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>
...
Сохраняем, закрываем, идем в раздел "Дизайн" и смотрим. Должно получится так:<div class='column-right-inner'>
<div class="tabs-block"><!-- весь блок вкладок -->
<!-- секция меню-->
<b:section class='tabs-menu' id='right-tabs' showaddelement='yes'/>
<!--секции вкладок, количество не ограничено -->
<b:section class='sidebar
<b:section class='sidebar' id='right-content-2' showaddelement='yes'/> <!-- Вкладка №2 -->
<b:section class='sidebar' id='right-content-3' showaddelement='yes'/> <!-- Вкладка №3-->
</div><!-- конец -->
<!--остальной код-->
<aside>
...
Теперь, когда все самое страшное позади, в самую первую, верхнюю секцию добавляем гаджет 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>
Таким образом возможно добавлять неограниченное количество как вкладок, так и блоков с вкладками и использовать их одновременно.<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> Это удобно и позволит, в случае необходимости быстро внести изменения.
Стили оформления произвольные, подбираются по вкусу.<!--...
здесь jQuery
...-->
<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;
}
- количество кнопок в меню одного блока, соответствует количеству вкладок.display: block;
}
.tabs-block .sidebar {
display: none;
}
Немного подумав, решил дополнить выше изложенное. Блок с вкладками сбоку, это конечно хорошо, но боковая панель из вкладок значительно лучше!
Размещение происходит непосредственно в стандартном блоке боковой колонки - <aside>, вне его пределов, дополнительно ничего добавлять не нужно.
Пример для правой колонки.
!Изменения выделены:
CSS
В итого получается так:
Ну вот и все. Мнения, пожелания и т. п. вносим в форму ниже.Размещение происходит непосредственно в стандартном блоке боковой колонки - <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>
Но необходимо лишь немного подкорректировать коды стиля и скрипта исходя из новых обстоятельств.<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.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;
(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. $(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)
В итого получается так:
©http://magentawave.com
А вот за это спасибо, давно "охочусь" за аналогичным виджетом! Статью в закладки!
ОтветитьУдалитьСпасибо! Так все заманчиво, но начинать что-то менять страшно))
ОтветитьУдалитьОпять здравствуйте. Мне эта идея очень нравится, но я хочу добавить кнопки выбора гаджетов не сверху боковой панели, а чуть ниже. http://edodina.blogspot.ru/ - поиск и обе подписки хотелось бы оставить на месте, а уже под ними размещать оставшиеся гаджеты по средствам переключения кнопок. В каком месте и что надо вставлять в шаблон в таком случае? Спасибо.
ОтветитьУдалитьВсе просто. Вы можете просто ниже этой секции, где поиск и подписки, в коде, разместить блок вкладок (первый вариант). А насчет меню переключения, так для него не важно где оно расположено, вверху секции с вкладками или внизу, где на ваш взгляд лучше там и расположите, главное чтобы вкладки и меню были в одном, общем, блоке.
УдалитьА ещё скажите, пожалуйста, (не знаю, как к Вам обращаться))), сейчас обновленный редактор html, там нет "Расширить шаблоны виджета". Это ничего страшного. не повлияет. И ещё некоторые части кода спрятаны в треугольнички. Надо их всех развернуть в начале?
УдалитьМоё имя Александр, это обозначено в "подвале", сразу за корайтом :) Да в новом редакторе уже нет "Расширить шаблоны виджета", так как весь код доступен сразу, а виджеты и некоторый другой код, например стили (CSS) просто свернуты за "треугольничками". Всех их открывать не нужно, только те части которые вам нужны для внесения изменений.
УдалитьОго, Вы себя вниз-то как загнали. Обычно я привыкла имя наверху страницы наблюдать, так что даже не подумала туда глянуть))
УдалитьСкромничаю и работаю под псевдонимом ))
УдалитьБольшое спасибо за панельку. Очень удобно. Поставила первый вариант. =)
ОтветитьУдалить