Outra forma de instalar o menu em abas em seu Blogger.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
Vá até o HTML de seu blog e troque:
]]></b:skin>
pelo código abaixo(ajuste a largura indicado na cor vermelha)
Agora acima de:
<div id='sidebar-wrapper'>
Cole o código abaixo. (Note que para as abas funcionarem os elementos precisam corresponder a grafia no endereço, no id e no class. Fiz esse esqueminha de cores para vc entender)
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUIVá até o HTML de seu blog e troque:
]]></b:skin>
pelo código abaixo(ajuste a largura indicado na cor vermelha)
/* Tabs
----------------------------------------------- */
#tabs {
width: 370px !important;
height: auto !important;
margin: 2px 0px 6px 8px;
padding: 5px 9px 5px -2px;
border: 1px solid #ddd;
float: left;
display: block;
background: #eee;
}
#tabs h2 {
display: none;
}
.inside {
width: 348px !important;
padding: 5px 5px 10px 5px!important;
border: 1px solid #ddd !important;
margin: 5px 4px 10px !important;
background: #FFF;
}
ul.wooTabs {
width: 100%;
padding: 0 0 20px 6px;
}
ul.wooTabs li {
float: left;
display: inline;
font-size: 11px;
line-height: 14px;
background: #fff;
color: #000;
border: 1px solid #ddd;
font-weight: bold;
margin: 0 2px 0 0px !important;
cursor: pointer;
}
ul.wooTabs li a {
line-height: 31px;
color: #000 !important;
display: block;
float: left;
padding: 0 6px;
}
ul.wooTabs li a.selected, ul.wooTabs li a:hover {
text-decoration: none;
color: #fff !important;
background: #C00;
}
#tagcloud {
padding: 10px;
}
#sub img {
float: right;
margin: 0 0 8px 8px;
}
.inside li {
background: ;
border-bottom: 1px solid #EEE;
padding: 8px 0 0 2px;
margin: 0 0 0 -30px;
list-style-type: none;
}
.inside li img.avatar, .inside li img.thumbnail {
border: 1px solid #ddd;
padding: 3px;
float: left;
margin: 0 8px 0 0;
background: #fff;
}
]]></b:skin>
<!-- tabs -->
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
// UL = .wooTabs
// Tab contents = .inside
var tag_cloud_class = '#tagcloud';
//Fix for tag clouds - unexpected height before .hide()
var tag_cloud_height = jQuery('#tagcloud').height();
jQuery('.inside ul li:last-child').css('border-bottom','0px') // remove last border-bottom from list in tab conten
jQuery('.wooTabs').each(function(){
jQuery(this).children('li').children('a:first').addClass('selected'); // Add .selected class to first tab on load
});
jQuery('.inside > *').hide();
jQuery('.inside > *:first-child').show();
jQuery('.wooTabs li a').click(function(evt){ // Init Click funtion on Tabs
var clicked_tab_ref = jQuery(this).attr('href'); // Strore Href value jQuery(this).parent().parent().children('li').children('a').removeClass('selected'); //Remove selected from all tabs
jQuery(this).addClass('selected');
jQuery(this).parent().parent().parent().children('.inside').children('*').hide();
/*
if(clicked_tab_ref === tag_cloud_class) // Initiate tab fix (+20 for padding fix)
{
clicked_tab_ref_height = tag_cloud_height + 20;
}
else // Other height calculations
{
clicked_tab_ref_height = jQuery('.inside ' + clicked_tab_ref).height();
}
*/
//jQuery('.inside').stop().animate({
// height: clicked_tab_ref_height
// },400,"linear",function(){
//Callback after new tab content's height animation
jQuery('.inside ' + clicked_tab_ref).fadeIn(500);
// })
evt.preventDefault();
})
})
//]]>
</script>
----------------------------------------------- */
#tabs {
width: 370px !important;
height: auto !important;
margin: 2px 0px 6px 8px;
padding: 5px 9px 5px -2px;
border: 1px solid #ddd;
float: left;
display: block;
background: #eee;
}
#tabs h2 {
display: none;
}
.inside {
width: 348px !important;
padding: 5px 5px 10px 5px!important;
border: 1px solid #ddd !important;
margin: 5px 4px 10px !important;
background: #FFF;
}
ul.wooTabs {
width: 100%;
padding: 0 0 20px 6px;
}
ul.wooTabs li {
float: left;
display: inline;
font-size: 11px;
line-height: 14px;
background: #fff;
color: #000;
border: 1px solid #ddd;
font-weight: bold;
margin: 0 2px 0 0px !important;
cursor: pointer;
}
ul.wooTabs li a {
line-height: 31px;
color: #000 !important;
display: block;
float: left;
padding: 0 6px;
}
ul.wooTabs li a.selected, ul.wooTabs li a:hover {
text-decoration: none;
color: #fff !important;
background: #C00;
}
#tagcloud {
padding: 10px;
}
#sub img {
float: right;
margin: 0 0 8px 8px;
}
.inside li {
background: ;
border-bottom: 1px solid #EEE;
padding: 8px 0 0 2px;
margin: 0 0 0 -30px;
list-style-type: none;
}
.inside li img.avatar, .inside li img.thumbnail {
border: 1px solid #ddd;
padding: 3px;
float: left;
margin: 0 8px 0 0;
background: #fff;
}
]]></b:skin>
<!-- tabs -->
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
// UL = .wooTabs
// Tab contents = .inside
var tag_cloud_class = '#tagcloud';
//Fix for tag clouds - unexpected height before .hide()
var tag_cloud_height = jQuery('#tagcloud').height();
jQuery('.inside ul li:last-child').css('border-bottom','0px') // remove last border-bottom from list in tab conten
jQuery('.wooTabs').each(function(){
jQuery(this).children('li').children('a:first').addClass('selected'); // Add .selected class to first tab on load
});
jQuery('.inside > *').hide();
jQuery('.inside > *:first-child').show();
jQuery('.wooTabs li a').click(function(evt){ // Init Click funtion on Tabs
var clicked_tab_ref = jQuery(this).attr('href'); // Strore Href value jQuery(this).parent().parent().children('li').children('a').removeClass('selected'); //Remove selected from all tabs
jQuery(this).addClass('selected');
jQuery(this).parent().parent().parent().children('.inside').children('*').hide();
/*
if(clicked_tab_ref === tag_cloud_class) // Initiate tab fix (+20 for padding fix)
{
clicked_tab_ref_height = tag_cloud_height + 20;
}
else // Other height calculations
{
clicked_tab_ref_height = jQuery('.inside ' + clicked_tab_ref).height();
}
*/
//jQuery('.inside').stop().animate({
// height: clicked_tab_ref_height
// },400,"linear",function(){
//Callback after new tab content's height animation
jQuery('.inside ' + clicked_tab_ref).fadeIn(500);
// })
evt.preventDefault();
})
})
//]]>
</script>
Agora acima de:
<div id='sidebar-wrapper'>
Cole o código abaixo. (Note que para as abas funcionarem os elementos precisam corresponder a grafia no endereço, no id e no class. Fiz esse esqueminha de cores para vc entender)
<div id='tabs'>
<ul class='wooTabs tabs'>
<li><a href='#pop'>Popular </a></li>
<li><a href='#perfil'>Perfil </a></li>
<li><a href='#feed'>Feed </a></li>
<li><a href='#marcadores'>Marcadores </a></li>
<li><a href='#seguidores'>Seguir </a></li>
</ul>
<div class='fix'/>
<div class='inside'>
<div id='pop'>
<b:section class='pop' id='pop' maxwidgets='1'>
<b:widget id='PopularPosts2' locked='true' title='Postagens populares' type='PopularPosts'/>
</b:section></div>
<div id='perfil'>
<b:section class='perfil' id='perfil' maxwidgets='1'>
<b:widget id='Profile1' locked='true' title='Quem sou eu' type='Profile'/>
</b:section></div>
<div id='feed'>
<b:section class='feed' id='feed' maxwidgets='1'>
<b:widget id='Subscribe1' locked='true' title='Inscrever-se' type='Subscribe'/>
</b:section></div>
<div id='marcadores'>
<b:section class='marcadores' id='marcadores' maxwidgets='1'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
<div id='seguidores'>
<b:section class='seguidores' id='seguidores' maxwidgets='1'>
<b:widget id='Followers1' locked='true' title='Seguir' type='Followers'/>
</b:section>
</div>
</div></div>
<div class='fix' style='height:15px !important;'/>
<!-- TABS END -->
<ul class='wooTabs tabs'>
<li><a href='#pop'>Popular </a></li>
<li><a href='#perfil'>Perfil </a></li>
<li><a href='#feed'>Feed </a></li>
<li><a href='#marcadores'>Marcadores </a></li>
<li><a href='#seguidores'>Seguir </a></li>
</ul>
<div class='fix'/>
<div class='inside'>
<div id='pop'>
<b:section class='pop' id='pop' maxwidgets='1'>
<b:widget id='PopularPosts2' locked='true' title='Postagens populares' type='PopularPosts'/>
</b:section></div>
<div id='perfil'>
<b:section class='perfil' id='perfil' maxwidgets='1'>
<b:widget id='Profile1' locked='true' title='Quem sou eu' type='Profile'/>
</b:section></div>
<div id='feed'>
<b:section class='feed' id='feed' maxwidgets='1'>
<b:widget id='Subscribe1' locked='true' title='Inscrever-se' type='Subscribe'/>
</b:section></div>
<div id='marcadores'>
<b:section class='marcadores' id='marcadores' maxwidgets='1'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
<div id='seguidores'>
<b:section class='seguidores' id='seguidores' maxwidgets='1'>
<b:widget id='Followers1' locked='true' title='Seguir' type='Followers'/>
</b:section>
</div>
</div></div>
<div class='fix' style='height:15px !important;'/>
<!-- TABS END -->
