Um detalhe bem simples, mas notável nos layouts são os ícones ‘enfeitando’ cada título dos widgets da sidebar. Para fazer isso, é necessário um pouco de experiência com HTML e conhecimento do seu layout. Vamos lá:
Vá na sua página de edição do HTML do blog e selecione a opção “Expandir modelos de widgets”. Feito isso, cole o seguinte código antes do ]]></b:skin>:
.widget h2 img{
display:inline;/*faz com que a imagem fique na mesma linha que o texto*/
float:left;/*alinha a imagem à esquerda*/
width:16px;/*largura da imagem, você pode mudar*/
height:16px;/*altura da imagem, esta você também pode mudar*/
}
Agora é a parte que você deve conhecer o seu layout. Talvez seja necessário procurar pelo título do seu widget (o que é bem mais rápido usando o Ctrl+F). Sendo assim, o código do widget é parecido com isso:
<b:widget id='HTML1' locked='false' title='Título do Seu Widget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Para colocar a imagem, ponha o código a seguir depois do <h2 class='title'>:
<img src="URL_DA_IMAGEM" />
Obs.: Lembre-se de trocar o “URL_DA_IMAGEM” pela URL da sua imagem.
Clique em “Visualizar” para ver se está tudo certo. Estando tudo certo, clique em “Salvar Modelo”.
MASSA BELO POST UNICO NA NET!!!
Não consigo fazer com que a imagem fique centralizada em relação ao texto a esquerda. Primeiro vem o texto e depois a imagem a direita. A imagem precisa ficar proporcional em cima e embaixo em relação ao texto a esquerda. Exemplo: Digamos que a imagem seja a face 5 de um dado. Eu quero que aquele ponto do meio fique centralizado em relação ao texto a esquerda. Existe essa possibilidade? Agradeço desde já!
www.tecnutilidades.blogspot.com (em construção)
@Jukaa, não sei se entendi totalmente o que você disse, mas pelo que eu entendi, tente trocar o código dado no post por:
.widget h2 img{
display:inline;/*faz com que a imagem fique na mesma linha que o texto*/
float:left;/*alinha a imagem à esquerda*/
width:16px;/*largura da imagem, você pode mudar*/
height:16px;/*altura da imagem, esta você também pode mudar*/
margin:4px 2px 4px 2px; /*Esse é a margem*/
}
Como você pode ver, eu apenas adicionei o elemento "margin". Claro que não ficará centralizada verticalmente de primeira, então tente alterar os valores, seguindo a ordem: topo, direita, baixo, esquerda.
[]'s
SemNome
Obrigada, deu tudo certinho.
Gostei!! Tem tutorial para isso em outros Blogs, mas, não mostrava o codigo CSS para mudar o tamanho da imagem. E essa mostra claramente.
Valeu!!!
Postar um comentário
Antes de comentar, leia: