PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

20/11/2015

Como centralizar um widget no seu blog

 Como centralizar um widget no seu blog - Visual Dicas 

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,

Como centralizar um widget no seu blog - Visual Dicas

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:

Como centralizar um widget no seu blog - Visual Dicas

Agora veja o resultado abaixo,

Como centralizar um widget no seu blog - Visual Dicas

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>

Como centralizar um widget no seu blog - Visual Dicas

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 centralizar um widget no seu blog - Visual Dicas

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

8 comentários:

Thay beer - Blog Humor Limão disse...

hahaha bem fácil , valeu.
Só não consegue centralizar o de categorias :/

Ramão disse...

Perfeito... muito simples!!!
Valeu.

Ana disse...

Alf,
tem como centralizar o box do youtube dentro do artigo/post? Eu uso o Wordpress.. Obrigada!

Ana disse...

Alf,
pode desconsiderar a dúvida... já consegui! rsss..usei o mesmo raciocínio acima...

Chrystiano Nogueira dos Santos disse...

Muito obrigado!!!

Nêssa Beleza disse...

Muito obrigada. Tentei diversos tutorias, só esse funcionou. Me ajudou muito!
Beijos

www.mundoyoung.com.br

Tonny disse...

Obrigado. me ajudou muito!

Admin tesuda disse...

Excelente funcionou aqui. muito obrigada

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics