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

Gadget das Redes Sociais em Estilo Metro - Versão 2




Já publiquei um post aqui explicando o que é o Estilo Metro e como colocar um Gadget das Redes Sociais em Estilo Metro como mostra a figura abaixo.


Porém eram apenas 3 redes sociais, o Facebook o G+ e o Twitter além do link de Feeds para o seu blog.


Atendendo a pedidos alterei este gadget acrescentando mais duas redes sociais o Pinterest e o Instagram e deu um resultado bem legal!



Como colocar um Gadget das Redes Sociais no Estilo Metro

O procedimento é o mesmo do post anterior com a diferença de ter mais dois links de redes sociais.
→ Vá em Layout» Escolha a Coluna que deseja colocar o Gadget » Clique em Adicionar um gadget » Escolha um gadget tipo HTML

►Cole o código abaixo no espaço reservado para isto:

<div class="MBD2B-social">
<li><a class="fb2" href="URL_Facebook"></a></li>
<li><a class="tw2" href="URL_Twitter"></a></li>
<li><a class="gp2" href="URL_Google+"></a></li>
<li><a class="fd2" href="URL_Feedburner"></a></li>
<li><a class="in2" href="URL_Instagram"></a></li>
<li><a class="pi2" href="URL_Pinterest"></a></li>
</div>

<style type='text/css'>
.MBD2B-social {width: 285px}
 .MBD2B-social li { position: relative; cursor: pointer; padding: 0; list-style: none }
 .MBD2B-social .fb2,.tw2,.gp2,.fd2,.in2,.pi2 { z-index: 7; float: left; margin: 1px; position: relative; display: block }
 .MBD2B-social .fb2 { background: url(http://3.bp.blogspot.com/-5uDzuzPa4ao/UqOnGZYpiKI/AAAAAAAAAEo/8CyoMUABc3U/s1600/Facebook1.png) no-repeat center center #1f69b3; width: 140px; height: 205px }
 .MBD2B-social .tw2 { background: url(http://3.bp.blogspot.com/-vopcCiP-PjM/UqOnHTMd-2I/AAAAAAAAAFM/eG9JJ2MY6qM/s1600/twitter1.png) no-repeat center center #43b3e5; width: 140px; height: 70px }
 .MBD2B-social .gp2 { background: url(http://4.bp.blogspot.com/-A13Rw_xfZag/UqOnG6-bqBI/AAAAAAAAAFE/hhmC9iKB9LQ/s1600/g+1.png) no-repeat center center #da4a38; width: 140px; height: 133px }
 .MBD2B-social .fd2 { background: url(http://1.bp.blogspot.com/-cVOxJstBcBg/UqOnGdwpRsI/AAAAAAAAAEs/Yy_SbDLWwFA/s1600/Feed1.png) no-repeat center center #e9a01c; width: 140px; height: 77px }
 .MBD2B-social .in2 { background: url(http://1.bp.blogspot.com/-Px9UJWkw78U/VMZ2DQatmbI/AAAAAAAAAKc/aRBQVEofjkA/s1600/instagram1.png) no-repeat center center #3D739C; width: 140px; height: 77px }
 .MBD2B-social .pi2 { background: url(http://4.bp.blogspot.com/-rCIENnwBn8w/VMZ2DWDuwxI/AAAAAAAAAKY/PMP0M8K-Ge8/s1600/pinterest1.png) no-repeat center center #B93936; width: 282px; height: 70px }
 .MBD2B-social li:hover .fb2 {background: url(http://4.bp.blogspot.com/-JwHnPN5lgb4/UqOnGYRa93I/AAAAAAAAAEw/Fjw0lBlnOmk/s1600/Facebook2.png) no-repeat center center #1f69b3}
 .MBD2B-social li:hover .tw2 {background: url(http://1.bp.blogspot.com/-osuN0bVZ80o/UqOnH8ldX9I/AAAAAAAAAFU/FZ40AYwTUTA/s1600/twitter2.png) no-repeat center center #43b3e5}
 .MBD2B-social li:hover .gp2 {background: url(http://3.bp.blogspot.com/-4fYQ1zi5K8o/UqOnHMOQqyI/AAAAAAAAAE8/CiF2XMqeYjo/s1600/g+2.png) no-repeat center center #da4a38}
 .MBD2B-social li:hover .fd2 {background: url(http://2.bp.blogspot.com/-HEQHhVN6PIw/UqOnG9F_HiI/AAAAAAAAAFc/idsaUJrCaN8/s1600/Feed2.png) no-repeat center center #e9a01c}
 .MBD2B-social li:hover .in2 {background: url(http://3.bp.blogspot.com/--uW6lsaYNec/VMZ2DWfl3dI/AAAAAAAAAKU/NprNulN_rXM/s1600/instagram2.png) no-repeat center center #3D739C}
 .MBD2B-social li:hover .pi2 {background: url(http://2.bp.blogspot.com/-dGrSXW4khX4/VMZ2Dw05orI/AAAAAAAAAKk/6bui6BSulHA/s1600/pinterest2.png) no-repeat center center #B93936}
</style>

Como configurar o seu Gadget

1- Configure as URLs das Redes Sociais
♦ Em URL_Facebook » Coloque o link da sua página do Facebook
♦ Em URL_Twitter » Coloque o link do seu Twitter
♦ Em URL_Google+ » Coloque o link da sua página no G+
♦ Em URL_Feedburner » Coloque o link dos Feeds do seu Blog
♦ Em URL_Instagram » Coloque o link do seu Instagram
♦ Em URL_Pinterest » Coloque o link do seu perfil no Pinterest

Obs: Se você ainda não ativou os Feeds para o seu blog » Leia este artigo: O que são feeds e entenda a importância de ter feeds para o seu blog.


2- Se você quiser hospedar as imagens do Gadget em seu blog para não correr o risco ultrapassar largura de banda elas estão neste link:
» Imagens para o Gadget de Redes Sociais Estilo Metro
Baixe-as - Hospede em seu blog e substitua os links em azul no código acima.

Link para Texto na Mesma Página





Sabe quando você está escrevendo um texto grande e quer fazer referência a alguma parte do seu texto, mas não sabe como levar o leitor até lá sem que ele procure.
Pois é ontem aprendi como colocar um link onde a página desce ou sobe automaticamente até o texto indicado no link.

Para os webmasters isso é mamão com açúcar, mas para mim foi um super achado. Posso aplicar este recurso em tutoriais extensos onde quero que a pessoa volte numa explicação sem que ela tenha que procurar. O simples fato de ter que procurar a explicação faz com que a pessoa se desinteresse de ler o tutorial e com isso não aprende.

Então vamos lá:

» Você também pode usar este recurso para indicar para voltar ao topo da página.

♦ Estas tags abaixo indicam onde você vai levar o seu leitor:
<a name="nome_da_Ancora">Você escreve entre estas tags.</a>
» Devem estar localizadas onde você quer que o leitor chegue.

♦ Este comando abaixo indica o link para chegar no local que você determinou anteriormente:
<a href="#nome_da_Ancora">Voltar para o começo</a>

♦ Vou exemplificar para você entender melhor, veja o texto abaixo:

<a name="loremipsum">1. Lorem ipsum </a>consequat concludaturque mea in, ei nostro convenire duo, wisi quas electram mel te. Eam cu hinc reprehendunt. Usu eu alienum euripidis, ut lorem homero civibus eum. Mei ne mazim democritum, tation sanctus suavitate in has, atqui omittantur ut vim. Disputationi consequuntur delicatissimi in sit, vitae pertinax consetetur te nec.

2. In sed ipsum deseruisse disputationi, per at sapientem philosophia. Tale delicatissimi et est, at posse utinam pro. Dicat maluisset eu nec. Cum quodsi apeirian accommodare ex, mel cu quodsi consulatu efficiantur, ex veniam mollis integre mea. Pri amet falli viderer ei, tempor option scriptorem in eos.

3. An quo stet <a name="minimum">minimum,</a> regione tritani eligendi mel et. Qui choro essent no. Cu has rebum ullum interpretaris, et enim appareat concludaturque cum. Harum nostrud vulputate pri no, ei adhuc clita fastidii vim. Te fugit quidam pri, his dolorum suscipit facilisis ea.

4. Dictas fuisset senserit nam te, vix ut scripta facilisis posidonium, ei amet adolescens consequuntur usu. Ei eirmod vocibus temporibus eos, kasd habeo feugiat id has, decore consul feugait an nec. At vel rebum propriae imperdiet, ne iudico epicuri philosophia ius. Dicant postulant an sea, puto adhuc mea at, dicunt evertitur est no. His quis melius option at, saepe congue antiopam ei cum, his probo iusto dolore at. Alii iisque aliquip cu pro, his eu homero rationibus dissentiet.

5. Dicit noluisse splendide et ius, ei nostrud pericula persecuti quo, ea agam zzril labores eum. Populo propriae incorrupte ius ne, eam lucilius cotidieque an. Eum illud tractatos deterruisset ne, quo ea errem choro viderer. Et sed dicta commodo, meis falli sit cu, populo commune voluptaria ei per. Ne veri sale malorum pri, mea sanctus prodesset ne, adhuc congue assueverit eam eu. Unum quaeque voluptatum pri te, sonet nostro probatus usu cu, mea ludus tibique vulputate id.

6. Nec id probo quodsi incorrupte. Ius no harum lucilius contentiones. Erant nostrum et mea, sit accusam mediocrem vulputate ea, doming scriptorem mei ex. Sea elitr discere accumsan cu, in nec audiam eloquentiam. Malis omnes argumentum in eos.

7. Usu ei quod torquatos assueverit, vel eu commune persecuti. Tollit munere doctus pro id, id error gloriatur philosophia sed, deserunt explicari nec ex. Sed te iusto signiferumque, his eu iusto nostrum, partem aliquam facilisis ei ius. <a href="#minimum">Clique aqui para Voltar ao Parágrafo 3</a>Cu qui meis exerci ornatus, mel cibo modus quaestio et, ex prima quodsi habemus vis. Nec in enim primis deterruisset, pro ei quem malorum volutpat. Eu vel brute invidunt.

8. Ex velit nobis quo, no possit legimus nominati ius. Simul dissentias cum te, pericula periculis complectitur in vis. Mel malis elitr propriae ut, atqui assum nominavi est in, vim salutatus splendide et. Te est iuvaret denique lucilius, vocibus expetendis quo in, at sed decore delicata percipitur. Eum prima propriae concludaturque id, et duo tation ullamcorper. Qui alii dolorem imperdiet an, alia repudiare reprimique ea qui, dico adipisci interesset eam in. Everti instructior in qui, nec et ignota aliquyam.

<a href="#loremipsum">Clique aqui para Voltar ao 1ºParágrafo</a>


♦ Agora o texto com o recurso aplicado:

1. Lorem ipsum consequat concludaturque mea in, ei nostro convenire duo, wisi quas electram mel te. Eam cu hinc reprehendunt. Usu eu alienum euripidis, ut lorem homero civibus eum. Mei ne mazim democritum, tation sanctus suavitate in has, atqui omittantur ut vim. Disputationi consequuntur delicatissimi in sit, vitae pertinax consetetur te nec.

2. In sed ipsum deseruisse disputationi, per at sapientem philosophia. Tale delicatissimi et est, at posse utinam pro. Dicat maluisset eu nec. Cum quodsi apeirian accommodare ex, mel cu quodsi consulatu efficiantur, ex veniam mollis integre mea. Pri amet falli viderer ei, tempor option scriptorem in eos.

3. An quo stet minimum, regione tritani eligendi mel et. Qui choro essent no. Cu has rebum ullum interpretaris, et enim appareat concludaturque cum. Harum nostrud vulputate pri no, ei adhuc clita fastidii vim. Te fugit quidam pri, his dolorum suscipit facilisis ea.

4. Dictas fuisset senserit nam te, vix ut scripta facilisis posidonium, ei amet adolescens consequuntur usu. Ei eirmod vocibus temporibus eos, kasd habeo feugiat id has, decore consul feugait an nec. At vel rebum propriae imperdiet, ne iudico epicuri philosophia ius. Dicant postulant an sea, puto adhuc mea at, dicunt evertitur est no. His quis melius option at, saepe congue antiopam ei cum, his probo iusto dolore at. Alii iisque aliquip cu pro, his eu homero rationibus dissentiet.

5. Dicit noluisse splendide et ius, ei nostrud pericula persecuti quo, ea agam zzril labores eum. Populo propriae incorrupte ius ne, eam lucilius cotidieque an. Eum illud tractatos deterruisset ne, quo ea errem choro viderer. Et sed dicta commodo, meis falli sit cu, populo commune voluptaria ei per. Ne veri sale malorum pri, mea sanctus prodesset ne, adhuc congue assueverit eam eu. Unum quaeque voluptatum pri te, sonet nostro probatus usu cu, mea ludus tibique vulputate id.

6. Nec id probo quodsi incorrupte. Ius no harum lucilius contentiones. Erant nostrum et mea, sit accusam mediocrem vulputate ea, doming scriptorem mei ex. Sea elitr discere accumsan cu, in nec audiam eloquentiam. Malis omnes argumentum in eos.

7. Usu ei quod torquatos assueverit, vel eu commune persecuti. Tollit munere doctus pro id, id error gloriatur philosophia sed, deserunt explicari nec ex. Sed te iusto signiferumque, his eu iusto nostrum, partem aliquam facilisis ei ius. Clique aqui para Voltar ao Parágrafo 3Cu qui meis exerci ornatus, mel cibo modus quaestio et, ex prima quodsi habemus vis. Nec in enim primis deterruisset, pro ei quem malorum volutpat. Eu vel brute invidunt.

8. Ex velit nobis quo, no possit legimus nominati ius. Simul dissentias cum te, pericula periculis complectitur in vis. Mel malis elitr propriae ut, atqui assum nominavi est in, vim salutatus splendide et. Te est iuvaret denique lucilius, vocibus expetendis quo in, at sed decore delicata percipitur. Eum prima propriae concludaturque id, et duo tation ullamcorper. Qui alii dolorem imperdiet an, alia repudiare reprimique ea qui, dico adipisci interesset eam in. Everti instructior in qui, nec et ignota aliquyam. Clique aqui para Voltar ao 1º Parágrafo


» Note que o local onde você quer indicar deve ter o mesmo nome de Âncora para que o link funcione.Clique aqui para Voltar aos Códigos das Tags

Fonte: Aprendi esta dica no Fórum Webmasters Online

Obs: Se o blogger interpretar o link para a edição do seu post, peça para editar o post e retire o link automático do blogger e atualize enquanto estiver no formato HTML. Porque se voltar para "Escrever" o blogger irá reverter para um link dele mesmo.

Quer saber Quantas Vezes Postar nas Redes Sociais?




Olá Amigos,
Tudo em com vocês?
Sim, eu sei que estou muito sumida! Peço mil desculpas a vocês leitores.
Meu tempo tem estado muito curto.
Recebi o email do blog Viver de Blogs com um infográfico super legal e útil para quem tem um Blog e quer divulgá-lo nas redes sociais.
Este infográfico indica a frequência ideal que devemos postar nas redes sociais de forma que tenhamos maior engajamento dos nossos seguidores.
Vale conferir:
Quantas Vezes Postar nas Redes Sociais
Foto: Site Viver de Blog / Reprodução

Para baixar o infográfico em uma melhor resolução clique na imagem abaixo.

Quantas Vezes Postar nas Redes Sociais
» Clique Aqui para baixar uma versão em Alta Resolução desse infográfico «

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.☺

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