sexta-feira, 9 de dezembro de 2016

Sidebar Multi tab widget Blogger

Tags

sidebar multi tabb widget blogger

Esse widget é realmente muito bom elaborado com Jquery Isso é friendly seo as pessoas perguntam qual a razão para instalar multi tab widget... bem isso serve para economizar espaço no Blogger bem como manter isso organizado criando maior interação com o usuário então se deseja adicionar no template do seu blogger siga os passos abaixo:

Adicionando multi tab widget blogger 

Faça login no Blogger va em menu modelo então editar/Html  com as teclas combinadas CTRL+F busque por ]]></b:skin> ou </style> e antes disso copie e cole o seguinte código:

* Multi Tab Sidebar */
#sidebar-tab h2{display:none}#select-ted{margin:0 auto 10px}#select-ted,#select-ted li{padding:0;margin:0;list-style:none;overflow:hidden}#select-ted li{float:left;width:33.3%;text-align:center}#select-ted a{line-height:42px;display:block;background-color:#333;color:#fff;font-weight:bold;text-decoration:none}#select-ted .selectab a,#select-ted a:hover{background-color:#f44243}#sidebar-main .widget1{background-color:#fafafa;width:100%;float:left;padding:5px 0}#sidebar-main{overflow:hidden}


Em seguida adicione o seguinte código abaixo de <aside id='sidebar-wrapper'> ou <div id='sidebar-wrapper'>  

<div id='sidebar-tab'>
  <div id='tab'>
    <div class='tab-widget-menu clear'>
      <ul id='select-ted'>
        <li class='tabs1'><a href='#tab1'>Popular</a></li>
        <li class='tabs2'><a href='#tab2'>Comments</a></li>
        <li class='tabs3'><a href='#tab3'>Archive</a></li>
      </ul>
    </div>
    <div id='sidebar-main'>
      <div class='widget1' id='tabs1'>
        <b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'/>
      </div>
      <div class='widget1' id='tabs2'>
        <b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'/>
      </div>
      <div class='widget1' id='tabs3'>
        <b:section class='sidebar' id='tab4-srchive' showaddelement='yes'/>
      </div>
    </div>
  </div>
  </div>

Em seguida adicione o seguinte código logo acima de </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-ted li:first").addClass("selectab"),$("#sidebar-main > div").hide(),$("#sidebar-main > div:first").show(),$("#select-ted a").click(function(){$("#select-ted li").removeClass("selectab"),$(this).parent().addClass("selectab");var e=$(this).attr("href");return $("#sidebar-main > div:visible").hide(),$(e).fadeToggle(1e3),!1})});
//]]>
</script>

Salve e pronto.

Blogger
Disqus
Escolha o Sistem de Comentario

Nenhum comentário