Widget multi nova com guias para o Blogger - Tabs editáveis!
Autor: Cesar Nunes | Publicado: 2013-03-27T14:46:00-07:00




Apenas lança uma nova versão de um&nbsp;widget de separadores de menu para blogger&nbsp;, totalmente personalizável e editável.&nbsp;Este elemento é uma cópia exata de nosso código&nbsp;Widget Tab Menu de Wordpress&nbsp;que criamos para blogs do Blogger.&nbsp;A única diferença é a concepção deste tempo e com um tutorial mais fácil.&nbsp;Eu só espero que você goste.&nbsp;Vamos começar a trabalhar agora!









Demonstração ao vivo 1




Demonstração ao vivo 2

Adicionando Widget Tabs Menu para Novo Blogger

Por favor, siga estas etapas,

Ir para o Blogger&gt; Design&gt; Editar HTML
Backup de seu modelo
Procure por&nbsp;]]&gt; &lt;/ b: skin&gt;
Logo abaixo cole o seguinte código -&gt;&nbsp;Menu de MBT Tabs JavaScript
E logo acima&nbsp;]]&gt; &lt;/ b: skin&gt;&nbsp;cole este código,



/ * ----- MBT Widget multi Tabbed ---- * /&nbsp;
guias-widget {list-style: none; list-style-type:.; margem none: 0 0 10px 0; padding: 0; height: 40px }&nbsp;
guias-widget li {list-style: none; list-style-type:. none; margin: 0 0 0 4px; padding: 0; float: left}&nbsp;
. margem de primeiro-criança {:: guias-widget li 0}&nbsp;
. guias-widget li&nbsp;estofamento; topo repetição x-left: 14px 12px; display: block; text-decoration: none; font: bold 11px Arial, Helvetica, sans-serif; text-transform: uppercase}&nbsp;
. guias-widget. li a: hover, guias -widget li&nbsp;esquerda 140px&nbsp;




&nbsp;&nbsp;&nbsp;&nbsp; 6.&nbsp;Agora cuidadosamente seguir este passo, pois envolve a posição do widget no seu modelo.&nbsp;Como a maioria dos modelos tem codificação diferentes, assim se você não poderia encontrar um código de combinação abaixo, então não se preocupe e deixe-me saber por postar seu blog URL no&nbsp;formulário de comentários

Procure por esse código se você estiver usando desenhos novo modelo blogger,


&nbsp;&lt;div class='column-right-inner'&gt;


ou isso se você usar qualquer outro modelo,


&lt;div id='sidebar-wrapper'&gt;


e logo abaixo o código que você encontrar, cole o código a seguir,


&lt;div class='tabviewsection'&gt;

&lt;Script&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; li: em primeiro lugar&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; li a "). click (function () {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $ ("ul.tabs-widget-widget-themater_tabs-1432447472-id li a"). removeClass ("guias-widget-corrente&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeTab = $ ​​(this) attr ("href");. $&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (activeTab) fadeIn ();.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return false;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ script&gt;




&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;









&lt;ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'&gt;&nbsp;
&lt;li&gt; &lt;a href='#widget-themater_tabs-1432447472-id1'&gt;&nbsp;Sobre&nbsp;&lt;/ a&gt; &lt;/ li&gt;&nbsp;
&lt;li &gt; &lt;a href='#widget-themater_tabs-1432447472-id2'&gt;&nbsp;Tag&nbsp;&lt;/ a&gt; &lt;/ li&gt;&nbsp;
&lt;li&gt; &lt;a href='#widget-themater_tabs-1432447472-id3'&gt;&nbsp;Arquivos&nbsp;&lt;/ a&gt; &lt;/ li&gt;&nbsp;
&lt;/ ul&gt;

class='tabs-widget-content &lt;div tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'&gt;&nbsp;
&lt;b: classe section = 'sidebar' id = 'sidebartab1' preferido = 'yes'&gt;&nbsp;
&lt;/ b: section&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&lt;/ div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class = id 'abas-widget-content guias-widget-content-widget-themater_tabs-1432447472-id' = 'widget-themater_tabs-1432447472-id2 '&gt;&nbsp;id='sidebartab2' class='sidebar' &lt;b:section preferred='yes'&gt;&nbsp;&lt;/ b: section&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class = 'abas-widget conteúdo das guias-widget-content-widget- themater_tabs-1432447472-id 'id =' widget-themater_tabs-1432447472-id3 '&gt;&nbsp;&lt;b:section class='sidebar' id='sidebartab3' preferred='yes'&gt;&nbsp;&lt;/ b: section&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;




&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



&lt;/ Div&gt;

&lt;div style='height:5px;clear:both;'/&gt;


Por favor, substitua&nbsp;Sobre&nbsp;,&nbsp;Etiquetas&nbsp;e&nbsp;Arquivo&nbsp;com seus títulos de Widget que você estará acrescentando.&nbsp;Manter o título curto.

&nbsp;&nbsp;&nbsp;&nbsp; 7.&nbsp;Agora vá para elementos da página.&nbsp;Você vai ver algo como isso,





&nbsp;&nbsp;&nbsp; 8.&nbsp;E agora vem o passo mais difícil ...&nbsp;Comece Adicionando Widgets!&nbsp;Divirta-se =)