Como centralizar um widget no seu blog

  

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 <div align="center"> </div>

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 linguagem, poderá criar classes para centralizar, alinhar à esquerda ou à direita, como você poderá observar 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