Como personalizar a Postagem em Destaque do Blogger

Konnichiwaa fadinhas e elfos! Como estão? Que tal um tutorial básico de CSS? Hoje vou ensinar como personalizar o Gadget: Postagem em Destaque do Blogger. O padrão muitas vezes fica super sem graça, então, deixe do seu jeitinho e combinando com o seu layout! Let's go?

Eu demorei um pouco para achar a classe desse Gadget, então se for usar o tutorial, credite na sua página de créditos ok? Um simples gesto pode me ajudar demais! Vamos lá!

O meu ficou assim:

Coloquei fundo, editei o titulo e a imagem está com um efeito brilhante em volta. Bem melhor né? Para personalizar o seu também, basta copiar o código e colar ACIMA de ]]></b:skin>  :

/* Postagem em destaque: Imagem by Sweet Magic */



.imagem {display: block; position: relative; float: left; overflow: hidden; margin: 0 2px 2px 0;}

.captioon {position: absolute; background: #f0e9e9; color: #fff; padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; text-align: center; line-height: 10px; font-size: 16px; text-shadow: 1px 1px 3px #000;}

.imagem:hover captioon {opacity: 0.75;}

.imagem:hover:before {opacity: 0;}

.caption:before {bottom: 10px; right: 10px;}

.caption captioon {bottom: 3px; right: 30%;}

.caption:hover captioon {right: 0px;}



/* Postagem em destaque by Sweet Magic */



.post-summary { background: #d9d2e9; color: #FFF;  padding: 20px; box-shadow: 2px 4px 2px 2px #E4E4E4; margin-top: 19px; padding-top: 10px; } 

.post-summary a { color: #FFF; font-size: 17px; font-weight: bold; text-decoration: none; }

 .post-summary:hover:before { opacity: 1; }

 .post-summary:before { content: “Featured”; background: #000; opacity: .7; font-family: Lobster; padding: 10px; position: relative; float: right; top: -10px; right: -20px; transition: .3s; } 

.post-summary .image { box-shadow: 2px 2px 4px 0px #f0e9e9; border: 2px solid #f0e9e9; }

Faça suas alterações:

➺ Para mudar a cor de fundo vá em background de .post-summary, substituindo o #d9d2e9 por uma cor que você quer, confira seu Hex >aqui<.

➺ Para mudar a cor da fonte substitua em .post-summary { color: #fff , também em
.post-summary a { color: #FFF

➺ Para mudar o titulo adicione personalizações em .post-summary a {

Sugestões: font-family: Nome da sua fonte;
font-weight: normal; (caso queira tirar o negrito)
font-style: italic; (se quiser deixar itálico)
font-size: 19px; (se quiser aumentar o tamanho)

➺ Para mudar ou apagar as sombras modifique:  text-shadow e box-shadow
➺ Caso queria deixar apenas o titulo, vá na configuração do seu Gadget e desmarque: snipped

Qualquer duvida é só falar nos comentários! Espero que tenham gostado! Por hoje é só, até mais e Kissus! Está tendo post toda semana então segue o bloguinho e visite sempre! Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest