quarta-feira, 27 de abril de 2016

sidebar widget multi tab menu

Multitab-sidebar-menbuat-untuk-friendly

Hoje vamos mostrar como adicionar esse widget composto 3 em um popular post comments e arquivo, isso da um ar mais profissional no seu Blogger além de influenciar na experiencia do usuario para adicionar isso a seu Blogger siga os passos abaixo.



Adicionando Sidebar multi tab menu no blogger 

Faça login no Blogger no menu modelo clique em Editar então >> HTML/JavaScript
com as teclas combinadas CTRL+F busque por ]]></b:skin>  e acima disso copie e cole o seguinte código.

#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#48d}
#sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0}


#sidebar-main{overflow:hidden}


HTML Código.

Agora procure por <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'> copie o seguinte código e cole abaixo 


<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Posts</a></li>
<li class='tab2'><a href='#tab2'>Latest Posts</a></li>
<li class='tab3'><a href='#tab3'>Labels</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'> 
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'> 
<b:section class='sidebar' id='tab2-latest-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'> 
<b:section class='sidebar' id='tab3-labels' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>

 Clique em salvar modelo 
Clique em layout aparecerá três tab1, tab2, Tab3. Se não aparecer, atualizar (F5). Por favor, preencha com widgets que são exibidos Créditos:Contoh















NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner