O tutorial de hoje é bem interessante e útil. Vou ensinar como criar um blockquote Não foi dessa forma que fiz o daqui, mas faço exatamente assim no Mrs. Nightshade. Vamos ao tutorial?ATUALIZAÇÃO: caso alguém não saiba, o código de blockquote deve ser adicionado antes da tag]]></b:skin>.
O código base, por onde todos devem começar, é esse aqui:
blockquote {}
Os demais serão adicionados entre as chaves.
Existem coisas que não podem faltar, como por exemplo:
padding: 6px;margin:10px;Color: #333;Background: #FFF;
Agora, basta personalizar. Como? Aqui vão alguns códigos que vocês podem usar:
PARA COLOCAR BORDAS
border: borda em todos os lados. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333;
border-bottom: borda em baixo. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333;
border-top: Borda em cima. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333;
border-left: Borda na esquerda. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333;
border-right: Borda na direita.Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333;
PARA ARREDONDAR BORDAS
-webkit-border-radius: 10px; - Altere o número como desejar.
-moz-border-radius: 10px; - Altere o número como desejar.
border-radius: 10px; - Altere o número como desejar.
Coloquem os três códigos acima para dar certo, tudo bem?
Lembrete importante: todos os códigos devem ser adicionados entre as chaves, como o dito antes.
EXEMPLO DE RESULTADO
EXEMPLO DE RESULTADO
blockquote {padding: 6px;margin:10px;color: #333;background: #FFF;border-right: 2px solid #FF69B4;border-left: 2px solid #FF69B4;}
Viram como é simples?
Aprendi com ajuda do We Heart HTML, mas hoje em dia faço sozinha.
Qualquer dúvida é só comentar ou mandar uma pergunta aqui.
Espero que tenham gostado.
Beijos,
Mrs. Nightshade.
Oi! Amei o tutorial! Eu queria aprender a fazer, mas num outro tutorial eu não entendi. Você explicou muito bem. Vou tentar fazer. Mas, como faz pra ficar hover?
ResponderExcluirBeijos!
Olá! Que bom que gostou >.< Fico muito feliz que tenha achado :D Bom, você pode fazer como nesse tutorial:
Excluirhttp://birthdaycakeoficial.blogspot.com.br/2012/08/blockquote-em-hover.html
Acho que dá certo ^.^
Beijos!
Mas coloca aonde?? em um javas?
ResponderExcluirNão ^.^ É blockquote, portanto ANTES da tag ]]> .
ExcluirComo todos os outros, entende?
Beijos!
Oi anjo, ótimo tutorial, eu amei estou seguindo, retribui?
ResponderExcluir->http://mackcrazy.blogspot.com.br/
Olá! Que bom que gostou do tutorial :D Fico muito feliz :D Seguindo de volta <3
ExcluirBeijos!
Olá! Ameei o tutorial! Esse é para quem gosta de ser criativo e inovador :). Sério, amei demais! Já vou criar um pro JC. Vou deixar os créditos do tutorial na página de Créditos, tá?
ResponderExcluirBeijos!!
Olá! Que bom que gostou >.< É sempre legal fazer coisas únicas, certo? kkk :D Fico muito feliz :D Tudo bem, muito obrigada ^.^
ExcluirBeijos!
Olá! Adorei, muito bom mesmo.
ResponderExcluirEu sempre quis saber como você fez o seu blogckquote =D
Olá! Que bom que gostou >.< Fico muito feliz :D Pois é, foi assim que fiz ^.^
ExcluirBeijos!