Olá Caros leitores do Tecnoblog, No artigo de hoje a pedido do Leitor Igor Montalvão irei ensina-los Como adicionar o efeito Mostrar/Ocultar determinados gadgets do Blog, Como vocês percebem eu uso ele no meu Blog, o efeito é bem prático, usamos o Prototype e Scriptaculous e com certeza o seu Blog não irá ficar pesado. Caso seu blog, possua muitos Gadgets essa será uma forma bem útil de diminuir de um certo ponto os seus Gadgets.
Instalando o Javascript
Agora, Vamos instalar o Javascript no Seu Template.
1. Faça o Login no Blogger
2. Depois clique no menu suspenso, e clique em Modelo
3. Em seguida Clique no Botão Editar HTML
4. Ao abrir a nova janela Clique em "Expandir modelos de Widgets".
5. Pressione CTRL+F e procure pela seguinte tag:
</head>
6. E Acima da Tag que citei acima adicione o seguinte código:
<!-- Prototype y Scriptaculous--><script src='http://www.google.com/jsapi'/><script>google.load("prototype","1.6.0.3");google.load("scriptaculous", "1.8.2");</script><!-- Prototype y Scriptaculous-->
7. Clique em Visualizar e se estiver tudo Certo Clique em Salvar modelo.
Configurando e Adicionando o Efeito ao Gadget
1. Na guia Modelo (Que você Esta) Com a opção "Expandir modelos widgets" ativada procure pelo seguinte código:
<b:widget id='HTML2' locked='false' title='Postagens Populares' type='HTML'>
2. Ao ter achado o código ele aparecerá da seguinte maneira:
<b:widget id='HTML2' locked='false' title='Social Network List' type='HTML'><b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:includable></b:widget>
As Partes em negrito informam o começo e o fim do código!
3. Faça as seguintes alterações no código citado acima. Nele Adicione os seguintes códigos:
<b:widget id='HTML2' locked='false' title='Social Network List' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("Nome_do_Widget","slide"); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/>▼</h2></b:if></a><div align='center' id='Nome_do_Widget' style='display: none;'> <div class='widget-content'><data:content/></div></div><b:include name='quickedit'/></b:includable></b:widget>
4. Pronto, Clique Em visualizar e se estiver tudo como desejado finalmente Clique em Salvar Modelo.
Atenção Amigos Leitores, este tutorial não foi tão fácil assim, preste bastante atenção no tutorial e faça tudo correto. Pois por um simples erro poderá causar algum dano no template.
Pronto, Tutorial meio grande não é mesmo? Mas sinto um ótimo prazer em oferecer meus conhecimentos a vocês, amigos leitores!
Até a próxima!
23 Comentários
Muito bom, no meu só não funcionou por causa de algum item desconhecido que causa incompatibilidade em meu Blog.
4 de abril de 2012 às 19:36E eu descobri uma falha pelo menos em alguns modelos de template:
Na ultima parte na hora de fechar o "" do " " falta um para o "" então ficaria assim:
"
▼
"
Alem disto o post está perfeiro Caio, más como eu já disse oque eu queria mesmo erá um template como o seu, a anos que eu procuro um assim rsrs.
Igor Montalvão ( http://maniaplayssonstronda.blogspot.com/ )
Desculpe más meu comentário anterior o HTML ficou cortado devido a uma interpretação errada de link do sistema, então ficara assim:
4 de abril de 2012 às 19:56...
...
Desculpe o grande numero de comentários más não estou conseguindo editar os anteriores, pode exclui-los se quiser, más estão sendo cortados más você deve ter me entendido
4 de abril de 2012 às 20:02Olá Igor Não há problema, isso ocorre mesmo :D. Nossa, estou bastante triste pelo código não esta funcionando em seu blog :/. Vi o seu template e provavelmente há um conflito nele (No seu template).
4 de abril de 2012 às 20:46Não se preocupe. Isso já ocorreu comigo mesmo também :D.
4 de abril de 2012 às 20:48Sim, Sim eu te entendi, queria saber se você possui algum E-mail de contato? Fico Grato! Abraços.
Claro que possuo, meu Email é contato.rps@hotmail.com
4 de abril de 2012 às 22:13Fico grato a você pela sua atenção geralmente "Gênios" do HTML como você "se acham" demais
Obrigado!
5 de abril de 2012 às 07:09Olá Caio, como eu havia falado contigo, gosto muito deste efeito, rsrs
5 de abril de 2012 às 11:17muito legal Ótimo post, parabéns pelo blog de qualidade que tens desenvolvido! :D
Abraço!
Olá Daniel, Obrigado pelo elogio :D. E Obrigado pelo comentário.
5 de abril de 2012 às 11:24Abraços Amigo!
Não há de que amigo.
5 de abril de 2012 às 11:29Este acessório é muito bom, e serve para várias coisas.
5 de abril de 2012 às 22:52Parabéns pelo artigo!
Olá Herlan, Tudo bom?
6 de abril de 2012 às 11:21Que bom que gostou Herlan, Muito Obrigado por comentar, e muito Obrigado também por participar dos nossos artigos publicados aqui!
Abração. Fica Com Deus!
Beleza Caio, aqui é o Ariel do Yes Futurex. Gostei do post, como você faz essas mensagens em laranja no post? Até!
8 de abril de 2012 às 14:29Olá Ariel, Beleza aqui :D! Ariel Estas mensagens é um código usado apenas para Blogger, e como você usa o WordPress acho que não funcionara, me desculpa amigo! Mas vou ver se converto para WP! Até mais Amigo!
8 de abril de 2012 às 17:18Valeu! mas talvez dá para adaptar com o CSS, não?
9 de abril de 2012 às 15:05Possivelmente Sim! Mas ainda estou tentando, Ainda não tenho muitos conhecimentos sobre conversão de códigos do Blogger para WordPress. Mas vou tentar. Abraços.
9 de abril de 2012 às 15:28Oi Caio. Tudo bem ? Queria saber como faço ou qual modelo de blog uso para não aparecer o e-mail. Obrigada.
30 de maio de 2012 às 20:30Olá Raphaela, Estou bem Graças a Deus!
31 de maio de 2012 às 12:26Bom, não entendi complexamente sua pergunta, por favor poderia a explicar novamente?
Fico Grato, Até mais!
Não deu certo! O
19 de junho de 2012 às 07:07Scriptaculous deve estar desatualizado!
-Obrigado.
Tem um blog que eu recomendo:
Amotrix (www.amotrix.com/)
Olá Caio!
7 de julho de 2012 às 14:58Obrigado pelo tutorial!
Já conhecia o efeito, mas estava procurando os códigos (que eu não lembrava).
Obrigado novamente,
Pietro (http://www.bovoqui.com/)
Olá Fernando! Acabei de Atualizar o Scriptaculous! Desculpe! Abraços!
7 de julho de 2012 às 18:55Olá Pietro! Agradeço eu pela sua participação! Abraços Amigo! Fica Com Deus!
7 de julho de 2012 às 18:57Obrigado! Você também!
8 de julho de 2012 às 21:32Postar um comentário
Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!