quinta-feira, 19 de janeiro de 2012

 Olá e sejam bem-vindos sempre!!!!
Às vezes em uma postagem é interessante destacar um texto não é? Para isso, existe o Blockquote e o Fieldset, que podem ser personalizados.
Hoje vou mostrar para vcs uma das várias formas de se personalizar o blockquote e como fazer um fieldset e personalizá-lo.
Vamos lah!!!


Blockquote
O blogger jah oferece isso. Basta ir em Criar uma nova postagem, selecionar o trecho do texto que deseja destacar e clicar no ícone como o destacado na imagem abaixo:

Ou então, na área de html da postagem, digite o texto que deseja dar ênfase entre <blockquote>TEXTO</blockquote>

O meu aparece assim.
Existem várias formas de personalizá-lo, como colocar um background, uma cor, mudar a fonte...uma das formas que mais gosto é essa que vou mostrar, em que a área de blockquote fica de um jeito legal e quando se passa o mouse sobre ele, muda para outro jeito legal rsrsrs...
Assim como nas imagens abaixo (clique para ampliar), sendo que a primeira é como aparece no post, e a segunda é como aparece no post quando o ponteiro do mouse está sobre ele.
Para isso, vá em Modelo, Editar HTML, procure por ]]></b:skin> e antes dele adicione o código abaixo:

.post blockquote {
margin: 1em 20px;
padding:8px 5px 8px 5px;
border-left:1px #ff1493 dotted;
border-right:1px #ff1493 dotted;
border-top:1px #ff1493 dotted;
border-bottom:1px #ff1493 dotted;
background:url(URL DA IMAGEM) repeat;
overflow:auto;
}

.post blockquote:hover{
/*border-left:1px #ff69b4 solid;
border-right:1px #ff69b4 solid;
border-top:1px #ff69b4 solid;
border-bottom:1px #ff69b4 solid;*/
background: url(URL DA IMAGEM) repeat;
}

.blockquote2 {
margin: 1em 20px;
width:450px;
padding:8px 5px 8px 5px;
border:1px #ff1493 dotted;
background:#ffffff;
overflow:auto;

}

Basta substituir no código algumas coisas como cores, estilos e tamanho das bordas (pontilhadas = dotted; linha = solid. Tamanho = 1px, 2px...e assim por diante, em border left, right, top, bottom), o endereço dos backgrounds ou cores de plano de fundo (substitua o local url e (URL DA IMAGEM) por #código da cor que desejar), entre outros. Os que modifiquei do código original estão destacados em vermelho.
Fieldset

Outra forma de destacar o texto é com Fieldset, que usando uma linguagem mais simples, é um blockquote com título (ou outros) acima rsrsrs...na verdade, é usado em formulários.
Basta adicioná-lo como gadget HTML (Layout, Adicionar Gadget, Html/JavaScript) ou no HTML da postagem. Fica assim:



Título ... ESCREVE ESCREVE ESCREVE ...

Ou assim:
... E se escreve aqui ...

O código é este mais simples:


<fieldset>
<legend>Título</legend>
... ESCREVE ESCREVE ESCREVE ...
</fieldset>

Você pode "brincar" um pouco com esse código também ^ ^ Pode adicioná-lo ao HTML de seu layout. Antes de ]]></b:skin>, coloque o seguinte código:

fieldset {/* É o quadradinho e conteúdo */
border:2px dotted #ff1493; /* Borda e estilo */
background:url(URL DA IMAGEM); /* Cor ou background */
color:#000; /* Cor do texto */
}
legend {/* É o título */
text-align:left; /* Pode ser right ou center também */
font-weight:bold; /* Estilo da fonte */
color:#61380B; /* Cor do título */
}

E aí na postagem, quando quiser usá-lo, adicione no HTML:
<fieldset>
<legend>Título</legend>
... ESCREVE ESCREVE ESCREVE ...
</fieldset>

Tudo já estará previamente definido e não precisa ficar alterando nada. Perceba que vc pode substituir o título por uma imagem.
Vale lembrar antes de tudo que antes de qualquer mudança no HTML do seu layout, faça uma cópia de segurança de todo o HTML e salve em seu computador, para evitar problemas caso não goste das alterações.

Espero que tenham gostado e beijus<3 
Créditos: Ciudad Blogger e Compartidisimo
Compartilhe:

Quem escreveu esse post?


Foi a Roberta, que adora tudo o que for kawaii, macio, fofo, de chocolate e com morango no topo. Se ela não estiver online por aqui, você pode encontrá-la também em...


Caso queira adicionar um emoticon/emoji ao seu comentário, copie o link de uma das imagens abaixo:

9 comentários

:) Oiiie Roberta seu blog já está na lista de blogs parceiros!!beijoss!!!
www.cotidianodeumabarbie.blogspot.com

REPLY

Adooro blockquote, fica muito fofo né? *-* hsuahsua.
Sempre que puder venho comentar aqui <3
Ótima quinta para você :)

Beijos,
bnascimentooo.net.tc

REPLY

Olá! ^^
Seu blog é muito kawaii! :)
Muito fofo meesmoo! Ameiii :K
Se quiser dar uma olhadinha no meu blog...
harajukucriativa.blogspot.com
Bye~ ^3^

REPLY

O desafio dos 30 dias funciona assim, vc tem que postar cada dia o que pede na lista, a lista vc encontra aqui: http://animusic2011.blogspot.com/2012/01/desafio-dos-30-dias.html :Q boa sorte!

REPLY

Amei o tutorial!
Estou mandando essa mensagem para todos os afiliados e seguidores (e blogs que sigo) do JUST YOU! Meninas, vamos mudar de URL! Em vez de http://justuoficial.blogspot.com mudamos para http://inspira-tion.blogspot.com ! E se não for um encomôdo poderia seguir lá agora? Beijinhos!
Já coloquei você no afiliados do novo blog! Poderia mudar a URL do just you, para o novo blog? o nome também?

REPLY

Hola linda!, cuantos cambios por aqui! tu blog está realmente hermoso y se nota que has aprendido mucho. Me encanta como está.
Tu como has estado?. Espero que tu año haya comenzado de buena manera y que este año este lleno de cosas hermosas para ti.
Me encanto la entrada y está muy bueno el tutorial y muy bonito el resultado del blockquote.
Te dejo muchos besitos y un abrazo grande :L

REPLY

:lAnna: Ok. Assim que eu add a página de parcerias aqui add vc tbm ^^ Muito obrigada mesmo :3 beijus.
:lBruna: Obrigada. E eu ficarei feliz com seus comentários ^^
:lBibii: Muito obrigada! Visito vc em breve.
:lSifi-Rafa: Vou começar o meu em fevereiro ;3 Obrigada.
:lNitt2009: xd Obrigada!!!
:lLah-Chan: Claro; mas a URL ta indo para um site em inglês chamado kara :q É este mesmo?
:lLuany: Gracias :d A mi me gusta mucho su presencia! Estoy bien :) Besitos y gracias una vez mas!!!

Beijus e obrigada a todas!!!

REPLY

Muito obrigada Rô!
Seus tutus são excepcionais para meu desempenho. Que está apresentando um ótimo resultado!
Muito obrigada mesmo! De verdade! :)
Beijocas!

REPLY

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart

Reino Kawaii . 2018 Copyright. All rights reserved. Designed by Blogger Template | Free Blogger Templates