2014-04-10

jquery tabs (вкладки) на blogger

jquery tabs

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. Перейдите во вкладку “Дизайн”. Вы увидите новые элементы в сайдбаре:
    jquery tabs 
  4. Добавьте гаджеты и наслаждайтесь результатом!

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

2 комментария :

Александра Шеповалова комментирует...

Не получается :( "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/ (я правильно поняла?)

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML