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

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

Как добавить jquery tabs в блог blogger

1. Шаблон –> изменить 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;
   }

2. Теперь найдите отрезок кода <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] -->

3. Перейдите во вкладку “Дизайн”. Вы увидите новые элементы в сайдбаре:
   
4. Добавьте гаджеты и наслаждайтесь результатом!

Перевод статьи