Esta é a segunda publicação pertencente a categoria "tutoriais". No grupo, e acredito que em toda a blogosfera, muitos blogueiros encontram dificuldades tanto para explorar suas plataformas quanto para utilizar HTML e CSS. Por isso, sempre que necessário, iremos postar dicas para facilitar customização de blogs.
A dica de hoje é como usar um Gadget do tipo Texto para inserir banners em blogs cuja plataforma é WordPress. Trata-se de um tutorial básico, no entanto estou aberta a sanar quaisquer dúvidas que possam surgir.
1. Acesse a área administrativa do seu blog e clique em "Widgets":
2. Dentro do menu "Widgets" procure o Widget "Texto", selecione para qual sidebar ele deve ir e clique em "Adicionar widget":
3. Insira um título (opcional), digite o seguinte código e clique em salvar:
< a title="Texto auxiliar" target="_blank" href="http://www.enderecodosite.com.br">
< img style="width:200px;display:block;margin:0 auto;" src="https://www.enderecodaimagem.com.br" alt="Texto auxiliar" >
< /a >
a: A tag ancora tem como funcionalidade conter um endereço (link). No exemplo abaixo, quando o visitante clicar na imagem ele será direcionado para o endereço do grupo no Facebook.
img: A tag img tem como intuito exibir uma imagem. No exemplo abaixo um banner "Eu participo Blogs que interagem" será exibido.
style: contém instruções CSS, responsáveis por centralizar a imagem
Explicação do código CSS:
width: determina que a imagem terá uma largura de 200px
display: a declaração display:block faz com que o elemento HTML seja renderizado como bloco, tal como os parágrafos e os cabeçalhos o são. Um bloco contém um espaço em branco tanto em cima como embaixo e não permite outros elementos HTML ao lado
margin: a propriedade, define um valor para espessura das margens dos elementos HTML. O código "margin: 0 auto" é um "resumo" do seguinte bloco de instruções:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
Logo, modificamos as margens à esquerda e à direita em automático -
auto - para centralizar o elemento horizontalmente aonde está contido. O elemento vai ocupar a largura sidebar, então o espaço restante será dividido igualmente entre as duas margens. 
4. Acesse o blog para visualizar as alterações.
O Gadget HTML/JavaScript pode ser utilizado para inúmeras funcionalidades, estude um pouco de HTML e CSS, use a imaginação e crie o que quiser! Espero ter sido o mais didática possível e gostaria de frisar que estou disponível para responder dúvidas!
Nossa super fácil de fazer, mas não sei pq no meu blog não esta funcionando :( Fica aparecendo os códigos. Vou deixar lá para vcs verem. :( Se alguém souber o que esta havendo e puder me ajudar eu agradeço! www.aubedouce.com.br
ResponderExcluirDesculpa sociedade, eu to divando na maioria dos prints kkkk
ResponderExcluirSuper útil esse post. Lembro que quando comecei no WP achava tudo complicado, então me acostumei, agora, depois de migrar, tenho apanhado do blogger, rs.
Beijo
|Blog|
Foi muito útil! Muito obrigada pelas dicas! =D
ResponderExcluirParabéns pelo blog
beijos
ia 21/01/2017
ResponderExcluirO Universo em si é uma universidade em que todo ser humano é um estudante. Cada estudante aqui persegue um assunto e adquire um diploma. Cada um pode escolher um assunto do seu gosto. Mas, independentemente dos assuntos diferentes que eles possam estudar, há uma coisa comum a todos eles, uma busca comum e um objetivo: obter o diploma do Amor Divino. Na universidade cósmica, embora existam estudos científicos, políticos, econômicos e outros, o que é fundamental a todos eles é o conhecimento espiritual. Mesmo no campo espiritual há assuntos especiais. Há um grupo que pode ser descrito como os cinco D's: Dedicação, Devoção, Disciplina, Discernimento e Determinação. Aqueles que dominaram os cinco D's são qualificados a receber o amor de Deus. (Discurso Divino, 16 de janeiro de 1988)
Sathya Sai Baba