Como personalizar as imagens no blogger

No blogger, muitas pessoas tentam colocar um "toque pessoal"  nas imagens de seu blog.Eu dou uma dica,pois você pode não estar usando o blogger: ao postar imagens vá ao html do mesmo(da postagem) e veja qual a classe ou id da imagem.No html pode aparecer assim:

 <div id="O id da imagem"> ou poderá aparecer assim: <span class="A classe da imagem">

Em vermelho está onde definimos se é id ou classe e em verde está o  "nome" esse nome e definir se é uma classe ou div que será importante para nós, agora que já vimos se é div ou class podemos prosseguir.No blogger a class é  "separator" e para altera-lo usaremos CSS(Cascading Style Sheets) vamos la, veja como é a imagem no modo normal do blog(que eu personalizei):

Agora vamos coloca-la com uma borda preta apenas:

Muito preto ela fica não é?Vamos colocar algo mais sofisticado como bordas curvadas e uma borda azul: 

Vou deixar parecido com o do blog passe o mouse:

Se nada aconteceu, seu navegador não suporta o código.

E Por fim,vamos colocar o código para você colocar em seu blog, o código disponibiliza uma legenda("Só editável por html"):

Legenda.

<style type="text/css">

/*O Separator a classe do blogger*/  

.separator{

/*Opacidade*/  

opacity: 0.8;

/*Borda*/  

border:12px solid blue;

/*A curva da borda*/  

-webkit-border-radius: 12px

  -moz-border-radius: 12px;

  border-radius:12px;

/*O Reflexo*/  

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));

/*A Transição de movimentos(que é ativada com o hover ou quando ele é chamado no javascript)*/  

    -webkit-transition: all 3s;

    -moz-transition: all 3s;

    -o-transition: all 3s;

} 

.separator:hover{

/*O Aumentar ao passar o mouse*/  

height: 358px;

/*A Borda*/  

border: 2px solid gray 

} 

/*O .div indica a legenda que começa com com: <div class="div"> qeu vem antes de todo o codigo no html*/  

.div .legend{

display: none;

opacity: 0.8;

border:12px solid blue;

-webkit-border-radius: 12px

  -moz-border-radius: 12px;

  border-radius:12px;

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));

    -webkit-transition: all 3s;

    -moz-transition: all 3s;

    -o-transition: all 3s;

}

.div:hover .legend{

/*Vai fazer aparecer a legenda quando passar o mouse(o :hover faz isso)*/ 

display:block;

widht: auto;

}

</style>

Legenda:
Em laranja: coloque números a sua escolha.
Em azul: não mude nada.
Em vermelho: não mude nada.
Em verde: Comentários.
Em roxo: coloque cores(em inglês ou hexadecimal).

E Lembre-se ao fazer sua "personalização" coloque ";" no final da linha.Comente o que achou!