Visual Dicas

---

Como centralizar um widget no seu blog Posted: 20 Nov 2015 11:25 AM PST    Centralize widgets no seu blog – é muito simples Escrito originalmente em 10/10/2009 |  Atualizado em 20/11/2015 Por experiência própria, todos nós iniciantes na arte de blogar, temos uma certa dificuldade com códigos HTML e CSS, principalmente quando inserimos widgets em nossos blogs… Muitas vezes, quando adicionamos um widget no blog (veja: Como instalar um Widget no seu Blog), dependendo do template utilizado, ele fica à esquerda no layout, fugindo da estética que queremos… Vejamos o exemplo abaixo, onde eu adiciono o código HTML: <a href="http://www.blogolista.com"><img alt="Melhores links e blogs" src="http://blogolista.com/images/banners/blogolista_240.png"/><a> E ele aparecerá á esquerda, conforme figura abaixo, Para centralizar, basta acrescentar "<center>" no início do código e "</center>" no final, ficando assim: <center> <a href="http://www.blogolista.com"><img alt="Melhores links e blogs" src="http://blogolista.com/images/banners/blogolista_240.png"/> <a> <center> Entretanto, a utilização da tag <center> </center> está sendo descontinuada para o HTML. O mesmo acontece para o atributo align="center" que também já não é mais suportado pelo HTML5. Sendo assim, recomendamos que utilize a CSS text-align:center, que poderá ser colocada diretamente na tags <div> </div> através do atributo style=, ficando desta forma: <div style="text-align:center;"> <a href="http://www.blogolista.com"> <img alt="Melhores links e blogs" src="http://blogolista.com/images/banners/blogolista_240.png"/> <a> </div> No blogger, utilize Configurar HTML/JavaScript, altere o código conforme descrito acima: Agora veja o resultado abaixo, Para posicionar á esquerda, utilize "text-align:left", ficando assim: <div style="text-align:left;"> <a href="http://www.blogolista.com"> <img alt="Melhores links e blogs" src="http://blogolista.com/images/banners/blogolista_240.png"/> <a> </div> E para posicionar à direita, utilize "text-align:right", ficando assim: <div style="text-align:right;"> <a href="http://www.blogolista.com"> <img alt="Melhores links e blogs" src="http://blogolista.com/images/banners/blogolista_240.png"/> <a> </div> Como pode ver, conhecer um pouco de HTML e CSS ajuda muito a aproveitar mais dos recursos da web tanto na estética como no conteúdo do seu blog. É altamente recomendável aprendermos um pouco desta linguagem através de cursos ou observando blogs e sites de terceiros… Por que a tag <center> </center> foi descontinuada? Observações sobre a descontinuidade das tags <center> </center> e o atributo align="center" 1. Conforme as linguagens HTML, CSS e JavaScript foram evoluindo, os padrões da web, sob controle da W3C - World Wide Web, foram revistos e passaram a ser separados por responsabilidades: HTML: dar estrutura ao conteúdo de acordo com o seu sentido. CSS: definir a aparência do HTML renderizado. JavaScript: definir o comportamento do documento na interação com os usuários. A tag <center> tinha um fim puramente visual, e não estrutural ou semântico. Portanto era uma parte do HTML que deveria estar sendo tratada pelo CSS, e por isso foi descontinuada. Isso ocorreu também com diversos outros elementos e atributos, como o <div align="center"> que também era utilizado para este fim. 2. Muitos navegadores, como o Mozilla Firefox, Chrome e outros ainda fornecem suporte aos elementos depreciados citados acima. Mas isso pode não acontecer para sempre. Portanto, recomendamos que na medida do possível, atualizem os códigos utilizados, evitando-se problemas futuros. 3. Como vimos anteriormente a centralização de um widget deve ser tratada pelo CSS (Cascading Style Sheets é uma "folha de estilo" composta por "camadas"). Se você já tem algum conhecimento sobre esta linguaem, poderá criar classes para centralizar, alinhar à esquerda ou à direita, como mostramos no exemplo abaixo: <style> div.center {text-align:center;} div.lef {text-align:left;} div.right {text-align:right} </style> Depois é só colocar a classe desejada nas tags <div> </div>, ficando desta forma caso queira centralizar o widget: <div class="center"> <a href="http://www.blogolista.com"> <img alt="Melhores links e blogs" src="http://blogolista.com/images/banners/blogolista_240.png"/> <a> </div> Para saber mais sobre CSS, leia: O que é CSS? e Simulador CSS e HTML – Ótimo para iniciantes…, Como usar CSS no Wordpress e Como inserir códigos CSS no Blogger. até mais… ( byALF)   Veja também:   Como instalar um Widget no seu Blog -(Blogger) Como inserir Widgets no Wordpress sem a instalação de plugins Visual Dicas - A sua fonte de informação! Este artigo pertence ao Visual Dicas. Plágio é crime e está previsto no artigo 184 do Código Penal.

You are subscribed to email updates from Visual Dicas. To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States