Follow Us @soratemplates

domingo, 28 de agosto de 2016

Gadgets da Sidebar com Opção de Mostrar/Ocultar


A sidebar de um blog é uma das áreas mais importantes porque nela você pode colocar informações ao leitor para que entenda, por exemplo, onde te encontrar nas redes sociais, como te seguir, como ter acesso a alguma coisa por meio de anúncios, quem é você e um monte de coisas. Isso pode fazer com que a gente 'sobrecarregue' às vezes com muitos gadgets.
Encontrei no Ciudad Blogger uma solução bem simples e legal de ser feito: mostrar apenas o título do gadget e, quando alguém clicar sobre ele, o conteúdo aparece. Assim você poderá colocar quantos gadgets quiser e de acordo com a aparência do seu blog.
Funciona assim:
1. Em Modelo - Editar Html, procure (Ctrl+F) pelo nome do gadget que aparece na sua sidebar e que deseja aplicar o tutorial. Aqui vou aplicar aos marcadores, que na minha sidebar tem o nome Labels, e Popular Posts. Então vou pesquisar por esses nomes no HTML.
2. Ao encontrar, clique na setinha que fica ao lado de cada gadget no HTML, tudo o que se refere ao widget será aberto e isso é importante para os passos a seguir. Na imagem abaixo, a sidebar que uso como exemplo tem esse modelinho aplicado ao CSS:
3.  Encontre e cole abaixo de <data:title/>:
 <span id='openGadget1' style='cursor:hand;cursor:pointer; color: deeppink;'>
  &#10084; </span> 


Em que deeppink é a cor, a qual você pode mudar, e &#10084; é um símbolo de coração.
4. Cole depois do trecho que diz widget-content:
 <div class='open1' style='display: none;'> 

5. E antes de <b:include name='quickedit'/> cole:
 </div>
<script>$(document).ready(function(){$(&#39;#openGadget1&#39;).click(function(){$(&#39;.open1&#39;).slideToggle(&quot;slow&quot;)})});</script> 

6. Procure por </head> e cole antes dele o script abaixo:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

Nota: Se você já utiliza Jquery não precisa colar nada antes de </head>.

E pronto! Salve e clique nos títulos para ver se deu certo. Exemplo:
Para adicionar em outro gadget troque os números dos trechos openGadget1 e open1 por openGadget2 e open2. E se quiser personalizar os gadgets nos quais aplicou o tutorial de um jeito diferente dos demais, veja esse post.
Espero que lhes seja útil!! 🙂
Imagem de abertura do post: We❤it.

Nenhum comentário:

Postar um comentário

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart