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

Template Gray Left




Logo que voltei a "blogar" prometi atualizar os templates que já tinha criado e criar novos.
Hoje estou atualizando o Template Gray Left trazendo várias novidades.

A primeira publicação do Template Gray Left foi em 2009.

Em 2013 foram feitas várias modificações, tais como:
-Mudei o hack de posts resumidos para outro com efeito hover na imagem, e com acesso ao conteúdo do post ao clicar na miniatura da imagem;
-Instalei um estilo CSS de imagens rotativas para os posts populares;
-Mudei o estilo CSS dos marcadores;
-Coloquei numeração de paginas nas paginas iniciais;
-Atualizei os comentários incorporando as respostas;
-Mantive os posts relacionados e os comentários em abas no final dos posts;
-Mantive o menu de navegação e os links para feeds e feeds por email já configurados para o endereço do blog que usá-lo e acrescentei outros ícones do Facebook e Twitter.

Ficou bem legal!
Veja o antes e o depois do Template Gray Left


Gray Left Novo
Gray Left Antigo

Orientações Sobre o Menu e Caixa de Pesquisas

Estas orientações se mantém para o Novo Gray Left. Só a interface do Blogger que está diferente mas não foge a imagem acima.

Hacks instalados:

  1. Marcadores parecendo Botões. Saiba como fazer aqui!

  2. Lista de Posts Relacionados no Fim do Post

  3. Paginas Numeradas no Blogger (Breve)

  4. Breadcrumb - Uma ferramenta de Usabilidade

  5. Link de Comentários Corrigido

  6. Personalizando a Data do seu Post

  7. Abas nos Comentários e Posts Relacionados
    » Para que Funcione corretamente Configure os comentários do seu blog em: Configurações » Comentários » Posição do formulário de comentários » Marque:Postagem abaixo incorporada.

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

Como configurar os Links Sociais

Encontre a linha: <div class='feed'> e proceda como mostra a imagem abaixo:

A Pasta de Download Contém

  • Código XML;
  • Imagens usadas no template;
  • Todos os códigos dos javascript usados estão hospedados no código XML do template.

Sugestões de hacks para você usar em seu template:


Aproveitem :)

Botões Expansíveis no Seu Blog




CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO
Este hack é bem fácil e antigo.
Acho útil porque não exige um código javascript muito longo nem a necessidade de usar o JQuery para ser aplicado, além de ser bem simples.

Eu já havia postado sobre este hack aqui no TPV em 2008 indicando um post da minha colega Elke do Templates e Acessórios.
Mas resolvi fazer um post ensinando-o com mais detalhes para você entender melhor o que está fazendo em seu blog.

Utilizo este hack na página Links Úteis do meu outro blog o Farmacêutico Digital

Mesmo assim sugiro que antes de aplicar qualquer hack em seu blog SEMPRE faça o teste em um Blog de Testes.

É fácil, rápido e grátis ter um blog de testes. Assim você não corre o risco de ter problemas em seu blog principal, nem perder visitas.

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
Leia o tutorial até o fim e tenha certeza de ter entendido.

1º Passo: Aplicar o Javascript dos Botões Expansíveis

Entre no seu blog: Vá em ModeloEditar HTML

Se não souber como fazer:»Leia:Como Acessar o Editor de HTML do Blog e Ativar o Search

Copie o código Javascript e cole abaixo da tag </head> do seu blog, ou seja, já deixe o código Java dentro do html do seu blog e quando quiser usar os botões expansíveis em gadgets HTML não precisará acrescentar esta parte dos códigos.
<!-- JavaScript Expandir --><style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

Como fazer?

Em Editar HTML » Encontre a tag </head> (Use Ctrl+F) » Cole o código Javascript logo abaixo desta tag » Clique em Salvar modelo

2º Passo: Criando o Menu Expansível em um Gadget HTML

Neste passo você tem 2 opções:

1- Criar o Menu Expansível usando Imagens como Botões

Vá em Layout » Clique em Adicionar um Gadget no Local onde deseja » Escolha o Gadget HTML e Cole o código abaixo:
<a href="javascript:void(0);" onclick="expandcollapse('Botao1')"><img border="0" src="URLImagemBotão"/></a>
<ul id="Botao1" class="texthidden">
<li><a href="Link1" target="_blank"> Titulo_Link1 </a></li>
<li><a href="Link2" target="_blank"> Titulo_Link2 </a></li>
<li><a href="Link3" target="_blank"> Titulo_Link3 </a></li>
</ul>
<br/>

Entendendo o Código:

♥ Veja a linha: [ <a href="javascript:void(0);" onclick="expandcollapse('Botao1')"><img border="0" src="URLImagemBotão"/></a> ]
  • Em "URLImagemBotão" você deverá colar URL da imagem do botão que criou para o seu menu expansível.
  • Em: [ <a href="javascript:void(0);" onclick="expandcollapse('Botao1')"> ] → O nome Botao1 deve corresponder ao mesmo na lista de links definida por: [ <ul id="Botao1" class="texthidden"> ]
♥ A tag <br/> significa o espaço de uma linha de uma imagem para outra, se você achar que os botões ficaram muito longe um do outro pode apagar esta tag.
» Assim, para cada botão deve-se colocar uma definição diferente veja o exemplo abaixo:



O Código do menu acima ficou assim:
<a href="javascript:void(0);" onclick="expandcollapse('Botao1')"><img border="0" src="http://i59.tinypic.com/2rw1dox.jpg"/>
</a>
<ul id="Botao1" class="texthidden">
<li><a href="Link1" target="_blank"> Link1 </a></li>
<li><a href="Link2" target="_blank"> Link2 </a></li>
<li><a href="Link3" target="_blank"> Link3 </a></li>
</ul>
<a href="javascript:void(0);" onclick="expandcollapse('IMV')"><img border="0" src="http://i62.tinypic.com/24or0vm.jpg"/>
</a>
<ul id="IMV" class="texthidden">
<li><a href="http://xuxxu.blogspot.com/2014/07/imagens-de-botoes-para-menus-e-banners-gratis-free.html" target="_blank"> 10 Links com Imagens de Botões para Menus e Banners Grátis </a></li>
<li><a href="http://xuxxu.blogspot.com.br/2008/06/botes-para-links.html" target="_blank"> Botões para Links </a></li>
<li><a href="http://xuxxu.blogspot.com/2008/04/alguns-buttons.html " target="_blank"> Alguns Buttons </a></li>
</ul>
<a href="javascript:void(0);" onclick="expandcollapse('TPV')"><img border="0" style="border:0" src="http://i57.tinypic.com/2m61p2d.jpg"/>
</a>
<ul id="TPV" class="texthidden">
<li><a href="http://www.templatesparavoce.com/2008/12/gadget-da-lista-de-links-expansivel.html" target="_blank"> Lista de Links Expansível </a></li>
<li><a href="http://www.templatesparavoce.com/2008/12/marcadores-que-expandem.html" target="_blank"> Marcadores que Expandem </a></li>
</ul>
♦ Veja que hospedei as imagens dos botões no site Tinypic e para cada botão expansível usei uma definição diferente Botao1, IMV e TPV. → É muito importante que você preste atenção a estes detalhes para que cada botão expanda a sua lista de links ou texto correspondente.

♦ Veja este menu expansível funcionando no Demoplate 2010-2

»Confira no post : [10 Links com Imagens de Botões para Menus e Banners Grátis] do Imagens para VOCÊ  9 links de imagens de botões para o seu Menu e um link com um Botão Expansível que tem sites onde você pode criar botões em CSS.

2- Criar o Menu Expansível usando CSS para os Botões.

Vá em Layout » Clique em Adicionar um Gadget no Local onde deseja » Escolha o Gadget HTML e Cole o código abaixo:
/*Codigo CSS*/ <style type="text/css">
.i2Style{
font:bold 12px Arial, Helvetica, sans-serif;
font-style:normal;
color:#fff;
background:#2288BB;/*Cor do fundo do Botão*/
border:0px solid #ffffff;
text-shadow:1px 1px 2px #333;
box-shadow:0px 0px 3px #000000;
-moz-box-shadow:0px 0px 3px #000000;
-webkit-box-shadow:0px 0px 3px #000000;
border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
-webkit-border-radius:8px 8px 8px 8px;
width:130px;
padding:8px 16px;
cursor:pointer;
margin:5px 5px 0px 5px;
}
.i2Style:active{
cursor:pointer;
position:relative;
top:2px;
}
.shown ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.shown li {
margin:5px 0; border-bottom:1px dotted #cccccc; 
padding:0 0 2px 23px;
line-height:1.0em; list-style:none;
}
.shown li a {color:#5588aa;}
</style>/*Fim codigo CSS*/

<a href="javascript:void(0);" onclick="expandcollapse('Botao1')">
<div class="i2Style">Título_Botão1</div></a>
<ul id="Botao1" class="texthidden">
<li><a href="Link1" target="_blank"> Titulo_Link1 </a></li>
<li><a href="Link2" target="_blank"> Titulo_Link2 </a></li>
<li><a href="Link3" target="_blank"> Titulo_Link3 </a></li>
</ul>
<br/>
<a href="javascript:void(0);" onclick="expandcollapse('Botao2')">
<div class="i2Style">Título_Botão2</div></a>
<ul id="Botao2" class="texthidden">
<li><a href="Link1" target="_blank"> Titulo_Link1 </a></li>
<li><a href="Link2" target="_blank"> Titulo_Link2 </a></li>
<li><a href="Link3" target="_blank"> Titulo_Link3 </a></li>
</ul>
<br/>
» Coloquei um botão expansível ▼ aqui no post para você ver como fica este estilo CSS acima.

» Veja o menu Expansível com os Botões em CSS funcionando no Demoplate 2006-2

OBSERVAÇÃO IMPORTANTE

O código CSS do botão que sugeri de exemplo foi criado no site i2style.
» Você pode entrar neste site ou em outros como sugiro aqui abaixo▼ e criar o seu modelo de botão CSS e substituir o /*Código CSS*/ do seu menu expansível pelo que quiser.

Gosto muito deste hack por ser de fácil implantação e ser uma ótima opção de economia de espaço no blog.
Espero que você goste e aplique em seu blog!

Lista de Links Expansível




CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO
Há muito tempo atrás aprendi como fazer para expandir os menus, aí comecei a fuçar e consegui fazer com que o Título da Sidebar funcionasse como o botão/link para expandir.

Revisando e Aprendendo como fazer funcionar este Recurso...

→Vá em Modelo » Editar HTML » encontre a tag </head>(Use o Ctrl+F) » Copie e cole este código Java Script no logo acima desta tag senão nenhum menu vai expandir.
<!-- JavaScript Expandir --><style type='text/css'>.texthidden {display:ipostnline}.shown {display:block}</style><script type='text/javascript'>document.write(&#39;<style>.texthidden {display:none} </style>&#39;);</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className==&quot;shown&quot;) {whichpost.className=&quot;texthidden&quot;;}else {whichpost.className=&quot;shown&quot;;}}</script>
→Clique em Salvar modelo

☺Para criar os botões expansíveis devemos sempre aplicar o código abaixo seja em uma gadget tipo HTML ou da forma que vou ensinar agora:
<a href="javascript:void(0);" onclick="expandcollapse('BT1')"><img border="0" src="URLImagemBotão"/></a>
<ul id="BT1" class="texthidden">
<li><a href="Link1" target="_blank"> Link1 </a></li>
<li><a href="Link2" target="_blank"> Link2 </a></li>
<li><a href="Link3" target="_blank"> Link3 </a></li>
</ul>
<br/>
»Podendo trocar a Imagem do Buttom/Menu <img border="0" src="URLImagemBotão"/> por Palavras ou Botões CSS

Para que o título da Lista de Links seja o botão expansível, você deve:

Criar a lista de links em seu blog

Vá em Layout » Clique em Adicionar um Gadget » Procure por Lista de Links e Clique para adicionar » Coloque os Links que Deseja e siga para o próximo passo
 

Agora Você vai configurar o Título da Lista de Links para Expandir
Você tem 2 opções:
1º - Título da lista de links como link expansível;
2º - Colocar uma Imagem no título da lista de links para expandir.

1º - Título da lista de links como link expansível

Vá em Modelo → Editar HTML → Clique na caixinha Expandir Widgets.
Para que apenas o TÍTULO da LISTA DE LINKS seja um botão expansível encontre a linha com a palavra [linklist], use Ctrl+F para encontrar mais rápido, veja o código abaixo:
<b:widget id='LinkList2' locked='false' title='Hacks Blogger do TPV' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

→Observe que no código do exemplo acima a lista de links que escolhi é a [LinkList2] porque já tinha outra lista de links no blog e eu pretendo expandir somente esta com o Título: 'Hacks Blogger no TPV [+/-]' → Veja no Demoplate
FIQUE ATENTO A ESTE DETALHE!
Continuando...
1 - Na linha:
<h2><data:title/></h2>
A tag <data:title/> deve ser substituída por:
<a href='javascript:void(0);' onclick='expandcollapse("hacks")'><data:title/></a>

2 - A linha <ul> deve ser substituída por:

<ul id="hacks" class="texthidden">

3 - Clique em Salvar modelo.

MUITO IMPORTANTE:

► A palavra 'hacks' deve ser alterada para o nome da lista de links ou uma palavra do título da lista de links como fiz no exemplo.
E sempre corresponder nas duas linhas a 1ª e a 2ª.

Na tag <ul id="_____" class="texthidden">► [id] É a identidade do seu botão expansível e deve ser igual para as duas partes do código senão seu botão não expandirá.

►Cada botão Expansível deve ter a sua Identidade.
Exemplo - Clique na figura para ampliar

Você pode colocar no título da sua lista de links o símbolo [▼] mostrando que esta gadget é expansível. Veja→ Símbolos - Atalhos do Teclado

Configurando o CSS do Título da Sidebar:

Se você não deseja que o título da sidebar seja uma imagem deve configurar para que ele se comporte como um link.
→Encontre a linha [ .sidebar h2 { ] cole as linhas abaixo acima desta linha do sidebar h2:
.sidebar h2 a{
color:$sidebarcolor;/*cor do link*/
text-decoration:none;
}
.sidebar h2 a:hover{
color:$visitedlinkcolor;
text-decoration:underline;
}
→ Estes códigos vão configurar o Título da sidebar como um link para expandir.
3 - Clique em Salvar modelo.

Observações Importantes:
1ª- color:$sidebarcolor;→ Se seu template não tem a variável $sidebarcolor pode colocar uma cor, ex #000000=preta, de preferência a cor definida no grupo de códigos do [ .sidebar h2 { ] para ficar igual aos outros títulos das sidebars, porém este vai ser um link.
[Veja: »Como identificar cores]
2ª- color:$visitedlinkcolor;→ Se seu template não tem a variável $visitedcolor pode colocar uma cor, ex #018101=verde.

2º - Colocar uma Imagem no título da lista de links para expandir

O procedimento é o mesmo que o 1º passo:
Vá em Modelo → Editar HTML → Clique na caixinha Expandir Widgets.
Encontre a linha com o título da linklist que você criou usando o Ctrl+F.
Neste caso minha lista de links tinha o título de Blogs. Estas são as linhas da widget da linklist:
<b:widget id='LinkList1' locked='false' title='Blogs' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target' rel='nofollow=' target='_blank'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

→Observe que no código do exemplo acima a lista de links que escolhi é a [LinkList1]

1 - Na linha:
<h2><data:title/></h2>
A tag <data:title/> deve ser substituída por:
<a href='javascript:void(0);' onclick='expandcollapse("Blogs")'><img border="0" src="URL da Imagem que vai servir como botão" /></a>

2 - A linha <ul> deve ser substituída por:

<ul id="Blogs" class="texthidden">
O seu código ficará assim:
<b:widget id='LinkList1' locked='false' title='Blogs' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'>
<h2><a href='javascript:void(0);' onclick='expandcollapse("Blogs")'><img border="0" src="URL da Imagem que vai servir como botão" /></a></h2>
</b:if>
 <div class='widget-content'>
   <ul id="Blogs" class="texthidden">
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target' rel='nofollow=' target='_blank'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

3 - Clique em Salvar modelo.

Importante:

Na tag <ul id="_____" class="texthidden">► [id] É a identidade do seu botão expansível e deve ser igual para as duas partes do código senão seu botão não expandirá.
» No Exemplo acima usei a id="Blogs" e a imagem no Site de Demonstração: Demoplate é esta:


Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Post Atualizado em 06/07/2014
NÃO Retire os Créditos!
NÃO é Permitido redistribuir os templates ou os tutoriais/hacks do TPV sem a prévia autorização de sua Autora.
Observação: Este hack se aplica aos templates da plataforma Blogger 2006. Ainda não testei nos templates do Blogger a partir de 2010. Assim que testar e conseguir fazer funcionar prometo postar aqui no TPV.

Motivos da Minha Ausência




Queridos Leitores,

Imagem: Reprodução / smogawoo.com
Estou um pouco sumida né! Já faz um tempo que não publico tutoriais novos e nem estou conseguindo responder aos comentários.
Peço desculpas a vocês fiéis leitores que gostam de personalizar seus blogs!

Sempre fico muito feliz de receber comentários que me ajudam a melhorar os tutoriais.

Quando tem algum comentário que relata um erro em algum tutorial, na maioria das vezes, reviso o post, refaço o tutorial em um blog de testes para ver se o erro relatado está acontecendo. Se estiver mesmo com erro, corrijo o tutorial e atualizo o post.
Mas quando não é um erro do post, infelizmente não posso e nem consigo corrigir todos os problemas particulares que acontecem. Sei que acontecem porque uma vírgula errada pode atrapalhar tudo, já aconteceu comigo várias vezes. Daí a necessidade de ler o post com bastante atenção, aplicar o hack num blog de testes e persistir sempre.
Gostaria muito de ajudar, mas não tenho tempo hábil para isso.

Nestes últimos dias não consegui nem ligar meu computador.

Estou arrumando algumas coisas em casa, mudando o escritório de lugar, organizando a casa e, com isso meu tempo está bastante escasso para trabalhar no TPV e nos meus outros blogs.

Mas nem tudo está perdido! Vou tirar férias neste mês de junho e pretendo me dedicar bastante ao TPV.
Tenho vários hacks e tutoriais salvos em rascunho, mas não posso publicá-los sem antes revisá-los e testá-los várias vezes. Por isso a demora em postar.

Todas as vezes que entro aqui, meu coração fica pequeno por não poder responder a todos como gostaria.

Peço um pouco de paciência. Assim que der estarei de volta a ativa com mais hacks e respondendo aos comentários que seguem as Regras do Blog com muito prazer!

Bjks a todos! :-*

Como Retirar a Frase "Tecnologia do Blogger" - Gadget Atribuição - do Template




Você já tentou retirar o gadget Atribuição do seu blog e não conseguiu né. Isso acontece porque não há a opção excluir.
Então para que você consiga retirar este gadget terá que tomar medidas mais extremas e ir ao HTML do seu template para conseguir esta façanha.

Mas antes:
Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
Vamos lá:

1º - Apague a widget Attribution do HTML do seu template

♦ Escolha o template que deseja retirar a frase "Tecnologia do Blogger" e clique em Modelo » Clique em Editar HTML » Clique em cima do código e Utilize as teclas Ctrl+F e Procure pela widget Attribution:
 <b:widget id='Attribution1' locked='true' title='' type='Attriution'>...</b:widget>

Apague esta widget » Clique em Salvar modelo


Visualize seu blog.

Sumiu? Ótimo. Deu certo de primeira e da forma mais fácil.

Mas este gadget é teimoso e há a possibilidade de não desaparecer com um procedimento tão simples.

2º - Outra maneira de tirar o gadget "Tecnologia do Blogger" do seu template

♦ Se o gadget "Tecnologia do Blogger" não tiver sido apagado. Você deve voltar em Modelo » Procurar pela widget Attribution novamente e apagar toda a <b:section>  em que ela estiver localizada.

A tá, mas você não quer perder a <b:section> onde o gadget Atribuição está.

Então você deverá primeiro excluir a widget Attribution no HTML do template (mais fácil), como ensinei no 1º passo » Salve o modelo.

»Depois selecione a seção <b:section> recorte e cole em um bloco de notas »  Clique em Salvar modelo » Visualize seu blog e certifique-se que conseguiu tirar o Gadget Atribuição.

Aí você copia a <b:section class='foot' id='footer-3' showaddelement='no'>...</b:section>
que tinha colado no bloco de notas e volta para o lugar de antes.

Observação:

Neste caso a seção é no rodapé do Template Simple e se você deixá-la como está não irá aparecer no Layout do seu blog, não permitindo que você coloque gadgets nela.

Então mude a palavra no em [showaddelement='no'] para yes ficando assim:
<b:section class='foot' id='footer-3' showaddelement='yes'> » Clique em Salvar modelo

Vá em Layout e certifique-se de que a seção está lá.
Caso não apareça, clique em F5 e atualize a página do layout do seu blogger que irá aparecer.



Acredito que existam situações em que este gadget não se aplica ao template nem ao tema do blog. Por isso acho que deveria ter a opção de retirá-lo sem ter que recorrer a recursos mais avançados. Entendo a posição do blogger em não dar esta opção, mesmo assim nos permite que retire. Isso eu admiro nesta plataforma.


Espero que vocês tenham gostado.☺

Hack Leia Mais com Imagens Reduzidas




Existem várias formas de você colocar o hack leia mais em seu blog.
Algumas das quais eu já ensinei aqui no TPV.
Hack Leia mais com Posts Expansíveis → Neste hack os posts se expandem na página principal do blog como um efeito sanfona.
Hack Leia mais → Neste hack podemos escolher qual parte do post ficará oculta na página principal e qual ficará à mostra. Quando clicamos em "Leia mais" a página do post se abre saindo da página principal.

» Hoje vou ensinar como aplicar no seu blog o hack de Posts Resumidos Automaticamente com Thumbnails onde o próprio hack já define quantos caracteres irão aparecer na página principal do blog automaticamente sem que você defina qual parte do post irá aparecer na página principal.
» Além deste recurso este hack também apresenta a possibilidade de aparecer uma imagem reduzida (thumbnail) da imagem que você adicionou no post, também na página principal.
» Este hack é a Versão 4.1 Auto Readmore criada pelo Vietnamita Anhvo dono do blog VIETWEBGUIDE.COM
Principais Vantagens:
♥ Você não precisa se preocupar com qual parte vai se expandir ou não, tendo que aplicar o <span="fullpost">Conteúdo oculto < /span> no seu post, como acontece com os hacks anteriores;
♥ O post da página principal do seu blog aparece resumido automaticamente → Isso diminui o trabalho na hora de criar o post;
♥ Você pode configurar quantos caracteres podem aparecer na página inicial do post, qual o tamanho da imagem reduzida e de qual lado ela deve ficar no resumo do post;
♥ As miniaturas(thumbnails) das imagens não ficam deformadas nos resumos dos posts;
♥ Você tem a opção de limitar, no seu post, até onde quer que apareça o resumo usando apenas uma tag (<!-- more -->).
Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
Obs: Se você já tem o hack instalado em seu blog pode atualizá-lo para esta versão 4.1.

Vamos ao hack:
Clique em Modelo► Editar HTML

1º- Passo:

» Encontre a linha:
<data:post.body/>
Clique Ctrl+F para encontrá-la. ATENÇÃO → Será a segunda linha que você vai encontrar no HTML do blog.
Substitua-a pelo código:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>»»Leia mais...</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
</b:if>

Personalizando o [»»Leia mais....]

1- Você pode substituir as palavras »»Leia mais... Por Continue lendo..., Resto do Post, "...", etc.

2- Você também pode personalizar as palavras »»Leia mais... criando um comando CSS definido abaixo.
Copie e cole acima da linha ]]></b:skin> do HTML do seu blog o comando CSS abaixo:
♦ Para que fique apenas as palavras »»Leia mais... use o código abaixo:
/*---Readmore---*/
.rmlink {
font-size: 120%;
float: right;
margin-right: 30px;
font-weight: bold;}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps; /*Todas as letras maiúsculas*/
font-family: Arial,Sans-Serif;
color: #24618e; /*Cor do Link*/}
.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/
.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/

♦ Para que como um botão igual a este Leia Mais use o código abaixo:
/*---Readmore Button---*/
.rmlink a { display:inline-block;
background:#FF1D23;
background-image: -moz-linear-gradient(top,#FF1D23,#5C0002);
background-image: -webkit-gradient(linear,left top, left bottom, from(#FF1D23), to(#5C0002));
color:#FFF; font-size:12px; text-decoration:none; 
margin-left:5px;padding:5px 10px; -webkit-transition-duration: .90s; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor: pointer; font-weight: bold; text-shadow: 1px 1px 1px #333; -moz-box-shadow: 0 1px 1px #9c9c9c;
-webkit-box-shadow: 0 1px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;}
.rmlink a:hover { background:#5C0002;
background-image: -moz-linear-gradient(top,#5C0002,#FF1D23);
background-image: -webkit-gradient(linear,left top, left bottom,from(#5C0002),to(#FF1D23));}
3- Se você quiser colocar uma imagem no lugar de Leia Mais:
Veja a linha: <a expr:href='data:post.url'>Leia Mais</a> e substitua Leia Mais pelo código:
<img src='URL da Imagem' />
Assim você irá incluir uma imagem ao invés das palavras.

Obs: O hack já foi atualizado para não resumir os post das páginas estáticas do blogger.
♦ Clique em Visualizar para se certificar que está indo tudo certo.

2º- Passo:

» Encontre a tag: </head>

Cole abaixo desta tag o código abaixo:
<!-- JavaScript Posts Resumidos-->
<!--/*****************************************************
Auto-readmore link script, version 4.1 (for blogspot)
(C)2009 by Anhvo
Please dont remove this copyright or change it into your own
******************************************************/-->
<style type="text/css">
.thumbnailimg IMG {
   max-width:150px;
   width: expression(this.width > 150 ? 150: true);
   max-height:120px;
   height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
 float:left; 
 padding:10px 10px 0px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ; 
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script  type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}

function getSummaryImproved(post,max){
   var re = /<.*?>/gi
   var re2 = /<br.*?>/gi
   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
   
   post = post.replace(re4,'')
   post = post.replace(re3,'<br /> ').split(re2)
   
   for(var i=0; i<post.length; i++){
    post[i] = post[i].replace(re,'');
   }
 var post2 = new Array();
 for(var i in post) {
  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
 }
 
  var s = "";
 var indentBlank = "";
 for(var i=0;i<indent;i++){
  indentBlank += " ";
 }
 if(post2.join('<br/>').split(' ').length < max-1 ){
   s = post2.join(indentBlank +' <br/>');
 } else {
  var i = 0;
  while(s.split(' ').length < max){
   s += indentBlank + ' ' + post2[i]+'<br/>';
   i++;
  }
 }  
 return s;
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var content = div.innerHTML;
 if (/<!--\s*more\s*-->/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = "block";
 } 
 else {
 
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  if(thumbnail_mode == "float") {
   imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
   summ = summary_img;
  } else {
   imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
 }
 
 var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
 
 div.innerHTML = summary;
 div.style.display = "block";
 }
}
//]]>
</script><!-- Fim JavaScript Posts Resumidos-->
♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Vamos entender o código acima:

Veja a parte que está em vermelho. Nela você pode fazer alterações para personalizar os posts resumidos do seu blog.
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>

1º Configurando a parte em CSS:

.thumbnailimg IMG {
max-width:150px;
→Valor máx. da largura da miniatura da imagem do seu post
width: expression(this.width > 150 ? 150: true);
max-height:120px; →Valor máx. da altura da miniatura da imagem do seu post
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
→ Lado que a miniatura ficará flutuada no resumo do post
padding:0px 10px 5px 0px; → Margem interna da imagem
}

2º Configurando alguns pontos do Script:

var thumbnail_mode = "no-float"; → Para que a miniatura fique sempre à esquerda selecione "float". Determina a flutuabilidade variável à esquerda da imagem.
var classicMode = false ; → False para modo clássico desligado. É aconselhável deixar em "true " se a var thumbnail_mode for definida para "float".
» Sugiro que você faça testes e mantenha o que melhor lhe agradar. Eu, prefiro o modo "true".
var summary_noimg = 50; → Corresponde ao corte do resumo quando seu post NÃO tem imagem.
var summary_img = 40; → Corresponde ao corte do resumo quando seu post tem imagem.
» Respectivamente o valor 50 significa "50 palavras" e o valor 40 significa "40 palavras" para o classicMode definido como "true".
♦ Clique em Visualizar para ver suas alterações.
♦ Se estiver tudo OK»» Clique em Salvar modelo.

Veja como ficou nos templates modelo 2006 e 2010 do blogger.

3º Passo - Opcional

» Você pode definir até onde o seu post será exibido na página principal usando uma única tag.
<!-- more -->
Você pode usar esta tag no meio do seu post, por exemplo veja a imagem:


OBSERVAÇÃO IMPORTANTE: Quando você configurar até onde será o resumo do seu post e esta parte tiver uma imagem, esta imagem não irá aparecer como miniatura da forma que aparece no resumo automático .

Fonte: Tradução e adaptação do link Auto Readmore ver 4.1

►Post Atualizado em 04/03/2014
Qualquer problema encontrado por favor me avisar para que este post possa ser útil sempre.

NÃO Retire os Créditos!
NÃO é Permitido redistribuir os templates ou os tutoriais/hacks do TPV sem a prévia autorização de sua Autora.
Observação: Este hack pode ser utilizado nos templates da plataforma Blogger 2006  e 2010.

4 Maneiras de Colocar um Gadget das Fotos do Instagram no seu Blog e mais uma Dica Grátis




O Instagram é um aplicativo que já conta com mais de 150 milhões de usuários em todo o mundo. Ficou tão famoso que o Facebook comprou-o por aproximadamente U$1 bilhão de dólares.

É uma rede social de compartilhamento de imagens e acredito que uma das causas de seu sucesso se deu por ter várias opções de filtros para as fotos podendo ser melhoradas (ou não), além de seus usuários poderem curtir e comentar nas suas fotos. Há ainda o uso de hashtags (#) possibilitando encontrar imagens relacionadas a um mesmo tema.

Existe a possibilidade de colocarmos Gadgets com as imagens do Instagram em nossos blogs.
Se soubermos explorar o seu potencial pode ser uma ferramenta interessante para conseguir visitas em nossos blogs.

Achei legal a ideia de colocar um Gadget com as fotos do Instagram no blog. Principalmente se seu blog for pessoal ou tiver várias imagens legais para postar.
Aqui no TPV vou criar um gadget com fotos dos Templates daqui. Vai ser bem legal!
E, quem sabe posso colocar algumas fotos dos hacks...??? Não sei... Ainda é uma ferramenta que pretendo explorar mais.

Então, como gosto de ensinar o que aprendo aqui, resolvi trazer para vocês alternativas para criar Gadgets em seu blog com as fotos do seu Instagram e também tem algumas dicas para vocês explorarem melhor este aplicativo.

Os blogueiros antenados podem postar fotos relacionadas ao seu blog pelo seu celular, tablet ou PC e estas fotos serão visualizadas em seu Gadget do Instagram.

Vamos lá:

1º SnapWidget - http://snapwidget.com/#getstarted

Este site oferece uma versão gratuita e uma versão paga para o Widget do Instagram.
Instagram widget1
» Na versão gratuita você terá que preencher as caixinhas em “Customize your widget
▼ Para você entender o que ele pede a imagem abaixo está com as opções em português.
Instagram widget2
♦ Na caixinha em destaque (Hover Effect) sugiro que coloque Fade Out que é a imagem normal e quando você passa o mouse em cima fica opaca.
♦ Fade In é o inverso a imagem está opaca e quando passa o mouse fica normal.



» Depois que você preencher as opções pedidas para montar o seu widget.
» Clique em Preview » Veja se seu widget ficou da forma que queria então clique em Close » Clique em Get Widget » Copie o código gerado » Abra seu blog » Vá em Layout » Crie um Gadget tipo HTML e cole o Código das suas fotos do Instagram para o Gadget do seu blog.
Instagram widget3 Instagram widget4 Instagram widget5
→Veja como Ficou no Demoplate 2006-2

Algumas Vantagens

» Em Widget Type você tem 5 opções de visualização do seu widget. Neste exemplo escolhi Grade (Grid), mas você pode mudar e ver como fica cada tipo quando clica em Preview.
» Possui botões de compartilhamento para o Facebook, Twitter, G+ e Tumblr

Desvantagem

♦ Uma desvantagem que encontrei deste site é que quando você clica na foto para visualizar melhor abrirá outra aba com a foto maior onde terão anúncios na página. Isso acontece apenas para a versão gratuita.

2º Intagme - http://www.intagme.com/

Instagram widget
» Este site funciona de uma forma semelhante ao anterior.
» Você pode criar um Gadget em forma de SlideShow ou em Grade.

Algumas Vantagens:

» Tem uma interface simples e limpa.
» Se você clicar na imagem para visualizar melhor a página que será aberta terá a opção de você seguir a pessoa pelo Instagram e de curtir a foto.
» Ainda não possuem anúncios nem na página inicial nem na página das suas fotos como o SnapWidget.
» Possui botões de compartilhamento para o Facebook, Twitter e G+ .

»Para criar o widget com as suas fotos do Instagram você irá proceder da mesma forma que o site anterior, então copie o código gerado e cole em um Gadget HTML do seu Blogger.


3º Statigram - http://statigr.am/

Instagram_no_blog-01O Statigram não é somente um site que gera widgets com as suas fotos do instagram.
Este site é muito interessante pois é uma ferramenta importante para você gerenciar sua conta do Instagram, principalmente se seu Instagram for para uso profissional.
Nele você pode ver estatísticas sobre:
♥ Likes Recebidos;
♥ Comentários;
♥ Novos Seguidores;
♥ Seguidores Perdidos;
♥ Quais fotos tiveram maior aprovação;
♥ Os 5 filtros que você mais usou, etc…

E também pode criar um widget para colocar no seu blog do Blogger e tem também plugin para colocar no Wordpress.
Para criar o widget para o seu blog do blogger você deverá entrar no site com a sua conta do Instagram clicando no canto superior direito do site como mostra a figura acima.
Veja na sequência de imagens abaixo:

Logar com a sua conta do Instagram Autorizar o acesso do Statigram a sua conta do Instagram » Coloque seu país e o email que usa no instagram.
» Você irá entrar em uma página com o seu feed das imagens das pessoas que segue.
» Então irá clicar em PROMOTE no auto da página.
Instagram_no_blog-02 Instagram_no_blog-03, Instagram_no_blog-04


» Role a página para baixo até encontrar “On your blog & website”
PHOTO GALLERY WIDGET » Clique em GET YOUR WIDGET
» Preencha com os dados necessários e deixe da forma que desejar.
» Note que a visualização do seu widget está ao lado.
» Clique em GET CODE » Copie o código gerado e cole em um Gadget tipo HTML do seu blogger.
Instagram_no_blog-05 Instagram_no_blog-061

4º WEBSTAGRAM - http://web.stagram.com/


Webstagram01
O Webstagram é parecido com o Statigram, com a pequena diferença de que não possui a “ferramenta” de estatísticas do Statigram o que o torna mais completo.
Mas não deixa de ser um excelente gerenciador de conta do Instagram, onde podemos curtir as fotos dos nossos amigos, comentar e até compartilhar nas redes sociais.

As funcionalidades de o WebStagram apresenta estão representadas nesta imagem abaixo:
 Webstagram03

Para que você crie seu widget com suas fotos do Instagram no WEBSTAGRAM 1º deverá fazer LOGIN na página inicial depois clique em TOOLS como na imagem:
Webstagram02  Na página seguinte » Vá até Instagram Gallery for your Blog / Website
Webstagram04
Preencha da forma que você já sabe » Clique em Preview para ver se ficou do seu jeito » Clique em Generate code » Copie o código gerado e cole em um Gadget HTML do seu blog.

5º Como Postar as fotos do seu PC no Instagram sem ter que enviar para o Celular:

Como vocês sabem, só podemos postar fotos no Instagram pelo celular ou tablet, a partir de seu aplicativo. Mas vi uma dica no site TechTudo de um software o Gramblr que possibilita que você compartilhe as fotos do seu PC sem ter que enviá-las para o celular ou tablet.


Você pode aprender como utilizá-lo neste link: TechTudo - Como publicar fotos no Instagram direto do computador usando o Gramblr
E pode baixá-lo neste link: Download Gramblr

Pronto! Agora você já tem 4 Opções para Criar um Gadget com as fotos do Instagram em seu Blog e também uma opção de postar suas fotos pelo PC.

Espero que você tenha gostado das dicas e se souber de mais alguma dica relacionada a este post deixe seu comentário aqui no blog!


Para Complementar o Conteúdo

4 dicas para "bombar" seu Instagram
81 sites úteis para compartilhar e imprimir fotos do Instagram

Botões Sociais Abaixo do Título e no Final do Post Parte-01





Como colocar Botões Sociais nos Posts do seu Blog

Sabe os botões das redes sociais que ficam no final dos posts indicando para você curtir no Facebook, Twittar o post que gostou, recomendar no G+ e até pinar no Pinterest?

Pois é, existem vários sites que disponibilizam uma infinidade de modelos destes botões para você colocar em seu blog. Mas, para isso é necessário fazer um cadastro com seu email e senha para pegar o código dos botões.
Como é o caso dos sites:
Todos os 4 sites necessitam de login e senha para configurar o código dos Botões de Social Bookmarking.

Por falar nisso... »»» Você sabe o que é Social Bookmarking?

backup do template Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
Leia o tutorial até o fim e tenha certeza de ter entendido.

Há também uma forma de colocá-los sem que tenha que fazer cadastro nestes sites, que é esta que vou ensinar neste post:


Chamo-os de botões de compartilhamento automáticos.
Muito parecidos com os nativos do blogger:

Aqui no TPV uso-os na página inicial ao lado esquerdo dos posts e no interior uso os botões do Addthis - assunto para os próximos posts.

Em alguns templates que faço uso os botões sociais na horizontal no final dos posts como é o caso do Template Valentine.

Veja como fica em um post do Valentine


Estes botões na forma horizontal são ideais para colocar no final do post ou logo abaixo do título do post.

Então vamos lá:

1º Passo: Código dos Botões Sociais na Horizontal para Copiar e Colar

Este é o código dos Botões Sociais na horizontal como na imagem acima.
» Você irá copiar este código e colá-lo onde for indicado de acordo com o local onde deseja colocá-los.
<!-- Remover esta linha para Botões Sociais aparecerem na página inicial --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;http://connect.facebook.net/pt_BR/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<style type='text/css'>
#pin-wrapper &gt; a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
 <div class='clear'/>
<!-- Remover esta linha --></b:if>

Observações Importantes:

♦ Para que você coloque os botões sociais deverá desabilitar os botões nativos do blogger.
♦ Isso vale tanto para estes que estou ensinando agora quanto para os outros relacionados com os sites de botões de social bookmarking que vou ensinar.
Siga as instruções desta imagem:
►Clique em Layout » em Postagens no blog clique em Editar » Desmarque a caixinha Mostrar botões de compartilhamento.

♦ Você tem a opção dos botões sociais aparecerem na página inicial e ou somente nas páginas dos posts.
Para que apareça na página inicial também basta que tire estas 2 linhas indicadas no código dos botões sociais. (a 1ª e a última)
<!-- Remover esta linha para Botões Sociais aparecerem na página inicial --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- Remover esta linha --></b:if>

2º Passo: Instalando os botões sociais nos posts.

1- Como colocar os botões sociais abaixo do título do post.

► Vá em Modelo » Clique em Editar HTML » Utilize Crtl+F e Encontre as linhas:
    <div class='post-header'>
    <div class='post-header-line-1'/>
Obs: Se tiver dificuldades de encontrar as linhas leia→ Como Acessar o Editor de HTML do Blog e Ativar o Search

► Copie e cole o código dos botões sociais logo abaixo da linha ▼
    <div class='post-header-line-1'/>
► Clique em Salvar modelo
Obs: Você encontrará estas linhas 2 vezes no seu código HTML, deverá colar o código abaixo das linhas que estão contidas neste bloco de códigos:
<b:includable id='post' var='post'>  (Será a 2ª vez que aparecerão ao dar enter quando procura pelo Search do Editor de HTML do blogger)

☺ Veja como ficou no Demoplate 2010-2

♦ Neste caso tirei a linha condicional que define para que os botões sociais apareçam apenas quando clicamos no post e deixei visível na página inicial abaixo do título do post.
Obs: Percebeu que na página inicial o botão do Pinterest não aparece?
→Não se preocupe, quando o clicar no post este botão aparecerá.

» Quer Aprender sobre as Condicionais do Blogger?

Temos dois artigos aqui no TPV que explicam tudo sobre as condicionais:
♥ Condicionais no Blogger–Parte 01–Ocultando Elementos em Páginas Específicas
♥ Condicionais no Blogger–Parte 02–Exibindo Elementos em Páginas Específicas

2- Como colocar os botões sociais no final (rodapé) do post.

► Vá em Modelo » Clique em Editar HTML » Utilize Crtl+F e Encontre as linhas:
    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
► Copie e cole o código dos botões sociais logo abaixo da linha:
    <div class='post-footer-line post-footer-line-1'>
► Clique em Salvar modelo
Obs:
1- Você encontrará estas linhas 2 vezes no seu código HTML, deverá colar o código abaixo das linhas que estão contidas neste bloco de códigos:
<b:includable id='post' var='post'>  (Será a 2ª vez que aparecerão ao dar enter quando procura pelo Search do Editor de HTML do blogger)
2- Você pode colocar os botões sociais onde quiser no rodapé do post.
Neste exemplo coloquei na post-footer-line-1 acima da atribuição e marcadores.
Basta identificar os outros post-footer-line-2 e 3 e colar o código onde preferir.

☺ Veja como ficou no Demoplate 2006-2



Pronto! Agora é só colocar os botões sociais em seu blog para que as pessoas possam compartilhar seus artigos e imagens nas redes sociais mais utilizadas no Brasil!☺




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