Efeito Mostrar/Ocultar determinado Gadget do Blogger

► +A +/- -A
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.
Atenção, Antes De fazer qualquer processo de customização no seu template faça o Backup do seu template. Para isso Clique em Fazer backup/Restaurar E faça o Backup do Seu template caso, qualquer erro venha acontecer ao mesmo.
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(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</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'>

Atenção, o código que citei acima, é só um exemplo que você terá que procurar, correspondente ao nome do Gadget que você irá adicionar o efeito.


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 != &quot;&quot;'>

    <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(&quot;Nome_do_Widget&quot;,&quot;slide&quot;); return false'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/>&#9660;</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>

Os códigos em Vermelho serão oque você deverá adicionar ao código original que você encontrou, Lembrando que, preste bastante atenção aonde você adicionou os códigos, Já a parte em azul você substituirá pelo o nome do 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!
► Postagens Relacionadas:

23 Comentários

Igor Montalvão disse...

Muito bom, no meu só não funcionou por causa de algum item desconhecido que causa incompatibilidade em meu Blog.
E 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/ )

4 de abril de 2012 às 19:36
Igor Montalvão disse...

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
Igor Montalvão disse...

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:02
Caio Vinicius disse...

Olá 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:46
Caio Vinicius disse...

Não se preocupe. Isso já ocorreu comigo mesmo também :D.
Sim, Sim eu te entendi, queria saber se você possui algum E-mail de contato? Fico Grato! Abraços.

4 de abril de 2012 às 20:48
IgorMontalvao disse...

Claro que possuo, meu Email é contato.rps@hotmail.com
Fico grato a você pela sua atenção geralmente "Gênios" do HTML como você "se acham" demais

4 de abril de 2012 às 22:13
Caio Vinicius disse...

Obrigado!

5 de abril de 2012 às 07:09
Daniel Silva disse...

Olá Caio, como eu havia falado contigo, gosto muito deste efeito, rsrs
muito legal Ótimo post, parabéns pelo blog de qualidade que tens desenvolvido! :D

Abraço!

5 de abril de 2012 às 11:17
Caio Vinicius disse...

Olá Daniel, Obrigado pelo elogio :D. E Obrigado pelo comentário.
Abraços Amigo!

5 de abril de 2012 às 11:24
Daniel Silva disse...

Não há de que amigo.

5 de abril de 2012 às 11:29
Herlan Santos disse...

Este acessório é muito bom, e serve para várias coisas.
Parabéns pelo artigo!

5 de abril de 2012 às 22:52
Caio Vinicius disse...

Olá Herlan, Tudo bom?
Que 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!

6 de abril de 2012 às 11:21
ariel matheus disse...

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:29
Caio Vinicius disse...

Olá 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:18
ariel matheus disse...

Valeu! mas talvez dá para adaptar com o CSS, não?

9 de abril de 2012 às 15:05
Caio Vinicius disse...

Possivelmente 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:28
Raphaela disse...

Oi 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:30
Caio Vinicius disse...

Olá Raphaela, Estou bem Graças a Deus!

Bom, não entendi complexamente sua pergunta, por favor poderia a explicar novamente?
Fico Grato, Até mais!

31 de maio de 2012 às 12:26
Fernando disse...

Não deu certo! O
Scriptaculous deve estar desatualizado!


-Obrigado.


Tem um blog que eu recomendo:


Amotrix (www.amotrix.com/)

19 de junho de 2012 às 07:07
Pietro disse...

Olá Caio!

Obrigado pelo tutorial!
Já conhecia o efeito, mas estava procurando os códigos (que eu não lembrava).

Obrigado novamente,


Pietro (http://www.bovoqui.com/)

7 de julho de 2012 às 14:58
Caio Vinicius disse...

Olá Fernando! Acabei de Atualizar o Scriptaculous! Desculpe! Abraços!

7 de julho de 2012 às 18:55
Caio Vinicius disse...

Olá Pietro! Agradeço eu pela sua participação! Abraços Amigo! Fica Com Deus!

7 de julho de 2012 às 18:57
Pietro disse...

Obrigado! Você também!

8 de julho de 2012 às 21:32

Postar 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!