In Tutoriais

Blockquote e Fieldset

 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

Related Articles

9 comentários:

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

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

    Beijos,
    bnascimentooo.net.tc

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

    ResponderExcluir
  4. 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!

    ResponderExcluir
  5. 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?

    ResponderExcluir
  6. 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

    ResponderExcluir
  7. :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!!!

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

    ResponderExcluir

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