Создание виджета с табами (вкладками) на blogger

jquery tabs (табы, вкладки) очень популярны, они позволяют экономить место в блоге. Кроме того, выглядят такие вкладки стильно.
Посмотреть пример табов:

Как добавить jquery tabs в блог blogger
- Шаблон –> изменить html. Найдите отрезок кода ]]></b:skin> и вставьте перед ним:
/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 2px;
padding-left: 2px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
} - Теперь найдите отрезок кода <div id='sidebar-wrapper'> и сразу после него вставьте:
<!-- Tab Widget [start] -->
<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>Обо мне</a></li>
<li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Теги</a></li>
<li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Популярное</a></li>
</ul>
<!-- Tab Widget 1 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div><!-- Tab Widget 2 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'></b:section>
</div><div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<!-- Tab Widget 3 -->
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<!-- Tab Widget [endt] --> - Перейдите во вкладку “Дизайн”. Вы увидите новые элементы в сайдбаре:
- Добавьте гаджеты и наслаждайтесь результатом!
Перевод статьи
Не получается 🙁 "div id='sidebar-wrapper'" у меня вообще нет, второй код я попробовала поместить после "div class='column-right-outer'", в результате он отображается только под виджетом.
Александра, если вы хотите вставить вкладки в самой верхней части сайдбара, то в вашем шаблоне нужно найти код <div class="tabs-menu section" id="right-tabs"><div class="widget HTML" id="HTML2"> и вставить код вкладок выше найденного кода.
Речь идет о блоге http://alexgonzojournal.blogspot.ru/ (я правильно поняла?)