Débora Lacortte
fevereiro 19, 2015
Oi amigos(as)!
Hoje vou ensinar como personalizar aquela lista de blogs,deixando ele com um novo visual.
Vamos lá?
Primeiro você faça um backup do seu blog,caso dê algum problema,depois entre em 'editar html',
em seguida clique em 'Ctrl+F' e procure por:
]]></b:skin>Logo em seguida cole o código acima do ]]></b:skin> :
/*-----Lista de Blogs--por Débora Lacortte---*/#BlogList1 {font-size: 12px; /* tamanho do texto */line-height: 25px;border:1px solid #f2165d;/*bordas*/border-radius:10px;/*bordas arredondadas*/}#BlogList1 img{padding:0px;
background: url(URL DA IMAGEM); /*imagem na borda*/ border:1px solid #000000;/*cor da borda*/padding: 3px;border-radius:50px;/*imagem redonda*/-webkit-filter: saturate(1.1);-moz-filter: saturate(1.1);-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}#BlogList1 img:hover {-webkit-filter: saturate(0.0);-moz-filter: saturate(0.0);}#BlogList1 .item-thumbnail {float: left;margin: 0 5px 5px 0;height: 72px;padding: 5px;}
 |
| Exemplo da lista de blogs personalizado. |
Onde está em vermelho você coloca o url da imagem que vai ser a borda,mas se não quiser deixe em branco.
E onde está em preto você coloca a cor da borda da imagem,se não quiser deixe em branco.
Depois de visualizado salve.
É isso muito fácil.
Qualquer coisa entre em contato comigo para tirar todas suas dúvidas.
Até mais!
Que bacana não tinha visto tutorial ensinando a fazer essa personalização,muito bom.
ResponderExcluirObrigada,se tiver alguma dúvida entre em contato comigo.
Excluir