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/>:
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:
<span id='openGadget1' style='cursor:hand;cursor:pointer; color: deeppink;'> ❤ </span>
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(){$('#openGadget1').click(function(){$('.open1').slideToggle("slow")})});</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.
0 Comentários
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 - Deviantart