» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Conhecem o Dropbox?




Acabei de instalar em meu computador o .
Para quem não conhece, esta é uma ferramenta muito útil onde você pode hospedar arquivos Javascript, Php e outros, usando apenas o explorer do seu computador.
Muito fácil, prático e simples, sem ter que ficar entrando toda hora no site e fazendo upload.
Para hospedar seus arquivos Java você...

Simplesmente copia o arquivo e cola na pasta Public do Dropbox após instalado em seu computador.

1º - Você entra no site clicando na figura abaixo.


2º - Feito o download do arquivo .exe do Dropbox. Encontre-o em seu computador e clique 2 vezes nele para que seja instalado.

3º - Mesmo sendo em inglês é muito fácil de entender sua instalação. Você deverá fazer seu cadastro colocando o seu nome e um email para login alé da senha.

4º - Após a instalação irá abrir a pasta do Windows Explorer do seu computador:





Siga as imagens que você entenderá como fazer.
Não tem segredo é muito fácil.

Fonte: Esta dica eu vi no Blogger'SPhera.

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:

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger