Como colocar Abas nos Comentários

Muitas pessoas já me perguntaram como fiz para colocar as abas nos comentários, então resolvi ensinar como fazê-lo. Considero este tutorial uma versão beta, onde fui fazendo e escrevendo o que fiz, o que não impede que possa ser melhorado...

Estou utilizando como base o Template: Minima Lefty, Designer: Douglas Bowman que é disponibilizado pelo blogger.

Porém a essência é a mesma para vários templates, então basta estudar um pouco e ter MUITA ATENÇÃO ao fazer este procedimento.

Antes de tudo salve uma cópia do seu template dentro do seu computador ► Vá em Layout » Editar HTML e clique em Baixar modelo completo. Sugiro que você tente em um blog de testes para que não saia nada errado e que este blog de testes tenha posts e comentários que você mesmo fez para testar.

Vamos lá:
1ª Parte:
Você deve instalar o menu em abas no seu template. É muito simples:

1º Passo - Colocando o Javascript
» Salve este arquivo Javascript Tabber em seu computador;
» Hospede-o na internet ou hospede no blogger
» Copie o endereço do seu arquivo Java, cole onde está indicado no código abaixo;
<!-- JavaScript Tabber-->
<script src='Endereço do Arquivo Javascript' type='text/javascript'/>
» Copie este código e cole logo acima da tag </head> do seu template.

►Obs: Você tem a opção de colocar o código javascript incorporado ao seu template, ou seja, Hospedar no próprio Blogger, para que não corra o risco do site de hospedagem dar problemas.
Para isso coloque este código acima da linha </head>
<!-- JavaScript Tabber-->
<script type='text/javascript'>
//<![CDATA[
/* Copyright (c) 2006 Patrick Fitzgerald */
function tabberObj(argsObj)
{var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg];}
this.REclassMain=new RegExp('\b'+this.classMain+'\b','gi');this.REclassMainLive=new RegExp('\b'+this.classMainLive+'\b','gi');this.REclassTab=new RegExp('\b'+this.classTab+'\b','gi');this.REclassTabDefault=new RegExp('\b'+this.classTabDefault+'\b','gi');this.REclassTabHide=new RegExp('\b'+this.classTabHide+'\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}
tabberObj.prototype.init=function(e)
{var
childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false;}
if(e.id){this.id=e.id;}
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}
DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title='';}
if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"");}
break;}}}
if(!t.headingText){t.headingText=i+1;}
DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9-]/gi,''));DOM_a.id=aId;}
DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}
e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this});}
return this;};tabberObj.prototype.navClick=function(event)
{var
rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}
self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event;}
rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};tabberObj.prototype.tabHide=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide;}
this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex});}
return this;};tabberObj.prototype.navSetActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=this.classNavActive;return this;};tabberObj.prototype.navClearActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className='';return this;};function tabberAutomatic(tabberArgs)
{var
tempObj,divs,i;if(!tabberArgs){tabberArgs={};}
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}
return this;}
function tabberAutomaticOnLoad(tabberArgs)
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}
oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad();}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions);}}  //]]>
</script>

2º Passo - Colocando o Comando CSS das Abas
» Copie e cole o código CSS acima da tag ]]></b:skin>
/*--------Tabber ---------------------------------*/
.tabberlive .tabbertabhide { display:none; }
.tabberlive {margin-top:8px;}
/*------------ Tabernav=Navegação -------------------*/
ul.tabbernav{ margin:0;
padding: 6px 0;
border-bottom: 1px solid $bordercolor;/*Variável bordercolor pode ser alterada por um código de cor*/
font: bold 12px Verdana, sans-serif;
padding:6px 0; }
ul.tabbernav li{ list-style: none; margin: 0; display: inline; }
/*--- Abas Inativas ---*/
ul.tabbernav li a{
padding: 6px 0.5em;
margin-left:3px;
border: 1px solid $bordercolor;
border-bottom: none;
background:#D5DFE8; /*Cor do fundo das abas inativas*/
text-decoration: none; }
ul.tabbernav li a:link { color: #333; } /*Cor do texto das abas inativas*/
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover{ color:#B30000; /*Cor do texto coloca o mouse sobre a aba*/
background: #dedede; /*Cor do fundo quando coloca o mouse sobre a aba*/
border-color: #dedede;
}
/*--- Abas Ativas ---*/
ul.tabbernav li.tabberactive a{
background-color: #fff; /*Cor do fundo da aba ativa »Deve ser igual a cor do conteúdo da aba*/
color:#B30000; /*Cor das letras da aba ativa*/
border-bottom: 1px solid #fff; /*Deve ser igual a cor do conteúdo da aba*/
}
ul.tabbernav li.tabberactive a:hover {
color: $linkcolor; /*Cor do texto coloca o mouse sobre a aba*/
background: white; /*Cor do fundo coloca o mouse sobre a aba*/
border-bottom: 1px solid white;
}
/*------ Tabbertab = Conteúdo da Tab/Abaixo das Abas -----------*/
.tabberlive .tabbertab {
background:#fff; /*Cor do fundo abaixo »Deve ser igual ao da aba ativa*/
padding:5px;
border:1px solid $bordercolor;
border-top:0; font-size:100%;
}
.tabbertab ul {
list-style:none;
margin:0 0 0;
padding:0 0 0 0px;
}
/*----- Links Internos -----*/
.tabbertab ul li{/*Estilo para os links*/
background:url("http://i8.tinypic.com/6lip3c7.gif") no-repeat; /*Seta para os links*/
background-position:0 5px;
border-bottom:1px dotted #B30000;/*Cor da borda inferior dos links*/
text-indent:10px;
color:$linkcolor;/*Cor do link*/
list-style:none; margin:0; padding:2px 0 3px 2px;
}
/*-----Tabberlive-----*/
.tabberlive .tabbertab h2,.tabberlive .tabbertab h3{display:none;}
.tabberlive#tab1 .tabbertab,.tabberlive#tab2 .tabbertab{height:;overflow:auto;}

3º Passo - Comando HTML das Abas
» Você irá usá-los quando for aplicar as abas.
<div class='tabber' id='tab1'>
<div class='tabbertab'>

</div><!-- fim tabbertab -->
</div><!-- fim tab1 -->
2ª Parte
» Marque a caixinha Expandir modelos de widgets;

» Preste bastante atenção porque você terá que DESLOCAR BLOCOS DE CÓDIGOS dentro do seu HTML para que fiquem dentro do menu em abas.

1º Passo - Encontre a linha:
<div class='post-footer-line post-footer-line-3'/>
OBS: Você não precisa procurar a linha inteira que pode ter p no lugar de div. Identifique a linha do post-footer-line-3. Se o seu template não tiver esta linha aplique o hack abaixo da linha post-footer-line-2 abaixo dos recursos que já tiverem na line-2 ou crie a line-3.Será abaixo desta linha onde você vai colocar os códigos para os comentários em abas.

2º Passo - Colocando a Aba dos Posts Relacionados (Se você quiser!)
» Aplique o tutorial dos Posts Relacionados no fim do Post.
» Notou que o comando dos posts relacionados fica logo abaixo da linha <div class='post-footer-line post-footer-line-3'/>?
» Coloque as linhas:
<b:if cond='data:blog.pageType == "item"'> <!-- Exibir apenas nos posts -->
<div class='tabber' id='tab1'>
<div class='tabbertab'>


</div><!-- fim 1ªtabbertab -->
<div class='tabbertab'>


</div><!-- fim 2ªtabbertab -->
<div class='tabbertab'>


</div><!-- fim 3ªtabbertab -->
</div><!-- fim tab1 -->
</b:if>
LOGO ABAIXO da linha: <div class='post-footer-line post-footer-line-3'/> ANTES do comando dos posts relacionados.
******************************************

» RECORTE o comando dos Posts Relacionados e COLE entre as linhas abaixo que correspondem à 1ªAba:
<div class='tabbertab'>

</div><!-- fim 1ªtabbertab -->
» De forma que fique assim:
<div class='post-footer-line post-footer-line-3'/>
<b:if cond='data:blog.pageType == "item"'> <!-- Exibir apenas nos posts -->
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>Posts Relacionados</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div><!-- fim 1ªtabbertab -->
<div class='tabbertab'>


</div><!-- fim 2ªtabbertab -->
<div class='tabbertab'>


</div><!-- fim 3ªtabbertab -->
</div><!-- fim tab1 -->
</b:if>
OBS: Você fará uma modificação:
»Substitua a linha: <b:if cond='data:blog.url != data:blog.homepageUrl'>Posts Relacionados</b:if>
por: <h3>Posts Relacionados</h3>
Lembrando que você pode substituir as palavras Posts Relacionados por Leia Também ou apenas Relacionados etc...

► Clique em VISUALIZAR para ver se não deu nada errado e então
► Clique em SALVAR MODELO. Visualize o template e clique em um post para ver sua 1ª aba no rodapé do post.

3º Passo - Colocando a Aba do Formulário de Comentários
Mantenha a caixinha Expandir modelos de widgets marcada;
» Encontre o bloco de códigos que representa o Formulário de Comentários no seu HTML:
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
Lembre-se: Este bloco de códigos refere-se ao Template Minima Lefty original do Blogger. E os comentários incorporados abaixo do post já devem estar habilitados no seu blog.

» RECORTE este bloco de códigos;
» Encontre as linhas:
</div><!-- fim 1ªtabbertab -->
<div class='tabbertab'>

</div><!-- fim 2ªtabbertab --> 
» COLE o código do Formulário de Comentários entre as linhas:
<div class='tabbertab'>

</div><!-- fim 2ªtabbertab -->
» De forma que fique assim:
<div class='tabbertab'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</div><!-- fim 2ªtabbertab -->
► Clique em VISUALIZAR para ver se não deu nada errado e então...
► Clique em SALVAR MODELO. Visualize o template e clique em um post para ver sua 2ª aba no rodapé do post.

4º Passo - Colocando a Aba dos Comentários
» Encontre o bloco de códigos que representa os Comentários no seu HTML:
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
» RECORTE
» Encontre as linhas:
</div><!-- fim 2ªtabbertab -->
<div class='tabbertab'>

</div><!-- fim 3ªtabbertab -->
» COLE todo o bloco de códigos que representa os Comentários entre as linhas
<div class='tabbertab'>

</div><!-- fim 3ªtabbertab -->
» De forma que fique assim:
<div class='tabbertab'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</div><!-- fim 3ªtabbertab -->
► Clique em VISUALIZAR para ver se não deu nada errado e então
► Clique em SALVAR MODELO. Visualize o template e clique em um post para ver sua 3ª aba no rodapé do post.
OBSERVAÇÃO IMPORTANTE:
Note que TODAS as 3 abas DEVEM FICAR entre os códigos:
<b:if cond='data:blog.pageType == "item"'> <!-- Exibir apenas nos posts -->
<div class='tabber' id='tab1'>
e
</div><!-- fim tab1 -->
</b:if>
Pronto! Você acrescentou as principais abas para os comentários nos seus posts.
Logo publico o complemento deste post com a aba dos Bookmarks(Favoritos), senão este ficaria extenso demais. Mais do que já é.

POR FAVOR NÃO SE ESQUEÇA DE:
♥ Sempre tentar qualquer hack num blogue de testes antes de aplicar no seu principal.
♥ Salvar o seu template antes de começar, clicando em Baixar modelo completo.
♥ Ler o tutorial até o fim e ter certeza de ter entendido.
♥ E, se não entendeu alguma coisa... Estude, pesquise, procure tente entender o hack.
Se sua dúvida for pertinente terei prazer em responder, mas se eu ver que foi preguiça de procurar, não conte com a minha resposta.

PARA COMPLEMENTAR O CONTEÚDO:
Como colocar Abas nos Comentários Como colocar Abas nos Comentários Reviewed by Áurea on 4/01/2009 Rating: 5

13 comentários:

  1. Áurea, infelizmente não consegui fazer este tutorial, mais eu queria pedir um, já que não achei :( Eu queria saber como fazer widgets expansíveis como você usa no AUKIMIA e aqui. ;) Beijos.

    ResponderExcluir
  2. Olá, Áurea...!Acompanho seu blog há muito tempo e acho ótimo...até já usei templates e muitas de suas dicas...hoje coloquei o link dele em meu blog...! eu não uso comentários em meus blogs, mas li todo o post e vou fazer um blog experimental só para ir aprendendo...abraços e obrigada!!

    ResponderExcluir
  3. Querido Jonathan Aqui no TPV já temos 2 tutoriais sobre como expandir os gadgets.
    »Gadget da Lista de Links Expansível
    »Gadget dos Marcadores Expansível.
    Pretendo fazer mais tutoriais com o recurso accordion. Por enquanto são estes. Grande abraço.
    Auricélia Fico muito feliz por você querer aprender. É assim que se faz. Obrigada por seu carinho.

    ResponderExcluir
  4. oiiee adorei seu post da semana passada estou seguindo seu blog da uma forçinha pro meu tb bjUU T++

    ResponderExcluir
  5. Aninha Infelizmente não tenho tempo para mandar email ensinando como fazer os templates. Faço o que posso para aqui no TPV.
    Lilian Sua força já está sendo dada aqui no comentário. Um abraço.

    ResponderExcluir
  6. no meu novo template eu consegui colocar abas nos comentários. Ficou bem legal ;)

    ResponderExcluir
  7. Meu Problema:
    Não to entendendo as duas primeiras partes :D~

    ResponderExcluir
  8. Ihhh :/
    é mto lgw! mas esse eu nao consegui :(
    não aparecem as abas...
    vou estudar um pouco em cima disso!
    mesmo assim, mto obrigado pelo tuto! ;)

    ResponderExcluir
  9. Oi, olha tive fazendo uns texts nos navegadores com esse seu hack e percebi que muitos deles não lêm de forma certa os scripts, ou seja, os navegadores não estão reconhecendo os codigos, o ie 6 não consegue interpreta o js, passa despercebido por ele talvez seja por isso que muitos que comentaram que não estão conseguindo, então qual seria a solução? Vc atualiza esse teu tuto ou todos antes de aplicar esse hack no blog tem que atualizar seus navegadores para as versões mais recentes, pois ele é 100% compatível com as novas versões de navegadores: Opera 10; IE 8(LEMBRANDO QUE AS VEZES ELE PASSA DESPERCEBIDO NO IE8); Firox 3.5 etc... enfim as versões antigas de navegadores estão com prblemas com esse seu hack, espero ter ajudado você e os demais que não obtiveram exito com seu tutatorial!! BEIJÃO BEM GRANDE EM VC TE ONHO(te amo)!

    ResponderExcluir
  10. Seria muito bom um demo do menu, nao achas?

    ResponderExcluir
  11. Este comentário foi removido pelo autor.

    ResponderExcluir
  12. Este comentário foi removido pelo autor.

    ResponderExcluir
  13. @JCM

    Já tenho este hack funcionando em um blog de testes.
    Visite o http://www.demoplate.blogspot.com
    Clique em um post e veja como os comentários estão dispostos em tabela.

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.