Olá, tudo bem?
Reparei agora em duas coisas, a primeira é que não faço um tutorial há muito tempo, e eu gostava de encher a página dos Goodies. A segunda coisa é que o Pugs Generation já não muda de layout há 1 mês! Estou a pensar seriamente em mudar o layout, mas eu não tenho coragem pois este foi o meu melhor...
Deixando de falar sobre mim e os meus problemas, decidi postar um tutorial: Como fazer uma bloquote.
Nota: A bloquote foi feita por mim ^-^. Se utilizarem, coloquem os respectivos créditos.
Atenção: Testado apenas em template Travel.
Vai ao HTML > Faz Ctrl + F dentro da caixa e pesquisa por ]]></b:skin>
Acima da tag coloca o código abaixo:
Acima da tag coloca o código abaixo:
blockquote {
border-left: 8px solid #FF4193; /* cor da borda esquerda sem o mouse por cima*/
border-right: 8px solid #FF4193; /* cor da borda direita sem o mouse por cima*/
background-color: #fffdf9; /* fundo do blockquote */
padding: 10px; /* grossura da borda */
font-size: 11px; /* tamanho da letra */
color: #383838; /* cor da letra */
text-align: center; /* alinhamento do texto */
box-shadow: inset 0 0 12px #ecebeb, 0 0 5px #bebebe; /* cor da sombra que fica ao redor */
-webkit-transition-duration: .55s;
}
blockquote:hover {
border-left: 12px solid #65beff; /* cor da borda esquerda quando passa o mouse */
border-right: 12px solid #65beff; /* cor da borda direita quando passa o mouse */
background-color: #fffdf9; /* fundo do blockquote */
padding: 10px;
font-size: 11px; /* tamanho da letra */
color: #383838; /* cor da letra */
text-align: center; /* alinhamento do texto */
box-shadow: inset 0 0 19px #ecebeb, 0 0 19px #bebebe; /* cor da sombra que fica ao redor */
-webkit-transition-duration: 1.55s;
}
Faz as alterações necessárias, nomeadamente as cores, que já estão a negrito. Podes usar esta tabela para ajudar na selecção.
Para quem usa Google Chrome, aconselho a usar a aplicação Chroma, disponível na Web Store do Chrome.
Para quem usa Google Chrome, aconselho a usar a aplicação Chroma, disponível na Web Store do Chrome.
Visualiza e, se estiver tudo certinho, Salva!
Espero que tenham gostado!
Tuto bem completo e bem explicado >.<
ResponderEliminarÚtil - sempre
Sonhos em Pastel
Obrigada!
EliminarEu adoro usar blockquote, dá uma ar mais kawaii :3
ResponderEliminarFiquei seguindo,
http://fashionteens-ft.blogspot.pt/
Obrigada! O teu blog é lindo, segui também!
EliminarOptimo tuto!! Tuto super util e torna os blockquotes super cute :3 adorei!
ResponderEliminarKissu ~♥ || Pankax&Pankadax
Obrigada!
EliminarAceito a afiliação, flor, já meti o Pugs Generation nos meus afiliados :3
ResponderEliminarhttp://fashionteens-ft.blogspot.pt/
Já te coloquei também!
EliminarA blockquote está gira. Testei-a, acho que está é um pouco comum!
ResponderEliminarTeen Cat
Olá, adorei o post e adoro usar block ♪♫
ResponderEliminarSeguindo segue de volta? (ele é novo)
Sonhandointensamente.blogspot.com
Obrigada.
Eliminar