18 setembro 2014

Tutorial - Blockquote


Olá amores, vamos a mais um tutorial para facilitar a vida de vocês!
O tutorial de hoje é mais a parte de design da área de postagem. Vocês já ouviram falar de BLOCKQUOTE? Ou então texto marcado?
É exatamente isso que vou ensinar a vocês. Igual ao da imagem abaixo destacado em vermelho:



A primeira a coisa a ser feita é entrar no painel do seu blog no blogger e clicar nas categorias ao lado MODELO e logo ira abrir uma janela. Veja o exemplo abaixo onde destaquei em vermelho para clicar em modelo e em verde onde deve clicar - EDITAR HTML -  para abrir a caixa de códigos do seu blog.

Agora ira abrir uma janela onde estara todos os codigos de design do seu blog. Igual ao da imagem abaixo. Notem na imagem que eu destaquei uma caixinha em vermelho. Para esta caixinha abrir você precisa clicar em qualquer lugar dentro desta janela e apertar no seu teclado CTRL + A LETRA F. Mas para dar certo, não largue o botão CTRL. Fique com ele pressionado e logo em seguida a tecla F.
Apos fazer isso ira abrir a caixinha que destaquei na imagem em vermelho. Dentro desta caixinha vocês digitem( ou copiem e colem daqui) o seguinte:
Apos isso apertem no seu teclado o ENTER.

Apos apertar o enter o próprio blogger procura o código para você e quando achar ele vai se destacar em uma seleção amarela. Igual na imagem abaixo onde destaquei na cor laranjado.

Notaram que esta destacado né o que você digitou( ou copiou) e apertou o enter do seu teclado. Agora vem a parte boa. Colocar o código ali dentro para fazer com que o texto que desejamos fique marcado.
Vocês faram o seguinte agora: Vão copiar o código que disponibilizarei logo abaixo logo acima de
. Igual ao da imagem a seguir:

O código que deve ir colocar (basta selecionar, copiar e colar) ali é o seguinte:

.post blockquote {
background: #000000; /*Altere o fundo como preferir*/
border: 3px solid #ff4aa5; /*Altere a cor da borda como preferir*/
padding: 5px;
margin:10px 20px 10px 20px;
}

Vamos entender o codigo:
BACKGROUND: Onde damos cor a caixinha. Ela pode ser a cor que você desejar, mas a cor em estilo código também para funcionar e para isso acesse ESTE link e veja a tabela e seus códigos. Basta copiar o código e colar ou escrever onde esta #000000. Você pode optar para colocar uma imagem no lugar de cor, e para isso você deve trocar o 
background: #000000; /*Altere o fundo como preferir*/
Pelo seguinte
background: url( colar aqui a url da imagem de sua preferencia) repet top center; /*Altere o fundo como preferir*/

URL da imagem pode ser hospedada em sites de hospedagem de imagens ou atraves do seu proprio blog. Faça uma postagem de teste, mande a imagem para seu post atraves do seu computador e apos carregada no seu post a imagem, você clica nela e deixe em tamanho original e clique com o mouse com o botão do mouse do lado direito igual ao da imagem abaixo:

Ao clicar com o botão direito do mouse em cima da imagem que carregou na sua postagem de teste vai abrir uma caixinha igual ao da imagem acima. Ai você clica normal em cima onde diz COPIAR URL DA IMAGEM. E depois vá no seu código de blockquote e cole lá. Clica entre as ( ) e depois com o botão direito vai abrir uma caixinha parecida com a de cima. mas tera o seguinte dizer na caixinha COLAR ai você clica em colar e o url da imagem vai aparecer.

Agora vamos continuar a entender o codigo do blockquote. Onde esta:
border: 3px solid #ffffff; /*Altere a cor da borda como preferir*/
 e a borda que você deseja colocar na sua caixinha colorida, na minha por exemplo coloquei borda dashed, parecida com pontilhados. e neste codigo destacado acima a borda é solida. Para deixar pontilhada como a minha você muda apenas o solid por dashed.
Onde esta 3 px, é a grossura de sua borda. Quando maior o numero mais grosso fica a borda. Aconselho para bordas solidas no máximo 3px, para bordas pontilhadas no máximo 2px. E no mesmo código temos a cor desta borda. Para mudra a cor acesse o site de tabelas de cores em HTML copie a cor que deseja e cola ali onde esta #ffffff. Lembrando que para a cor dra certo você não pode deletar e nem esquecer que antes dos numeros ou letras o jogo da velha tem que estar antes #.
E o padding: 5px;  e  margin:10px 20px 10px 20px;  são é as margens de espaço, aconselho a não mexer neste código que destaquei para nada dar errado. Esse errado seria a escrita sair fora do lugar e ficar bagunçado, ok.
Agora que entendemos o codigo e já fizemos nossa modificação necessária e de nosso agrado basta salvar, para isso basta clicar na caixinha SALVAR MODELO. Igual ao da imagem seguinte, onde destaquei em vermelho.

Agora para que a caixinha apareça em um texto ou imagem que você quer destacar fara o seguinte: Vai selecionar todo o texto ou imagem que deseja destacar e clicar no botão que destaquei em vermelho na imagem abaixo. Pronto a caixinha de destaque vai aparecer na sua postagem. Basta agora visualizar seu blog e a postagem que que você fez o destaque e voilá.

É galerinha, por hoje é isso. Este tutorial foi indicado pela leitora Rafaella Lima na postagem passada a essa. Espero ter ajudado a vocês.
Se você deseja algum tutorial, deixe nos comentários. Se estiver ao meu alcance terei o prazer de trazer bem explicadinho a vocês.

Beijokas para quem fica...

6 comentários:

  1. Olá!
    Muito legal a dica. HTML é uma coisa bem chatinha. Quando usava o blogger sempre gostava de fuçar, mas faz tanto tempo que as coisas estão até mais fáceis hoje em dia.

    Uso no atual blog que colaboro, mas quando entrei ja recebi todos os códigos prontos. Mamão com açúcar.

    ResponderExcluir
  2. Cara, o blockquote faz toda a diferença, tem que ter um diferencial mesmo. Mas não me arrisco a fazer, mesmo com o tutorial. Prefiro gritar a Flá pra resolver meus problrmas de html, não confio em mim. Rsrs
    Beijinhos!
    Giulia - www.prazermechamolivo.com

    ResponderExcluir
  3. Personalizar o Blockquote é essencial para o design de um blog, então mais uma vez parabéns por trazer algo de utilidade pública rsrs
    E o melhor é que é super fácil de fazer =)

    Beijiinhos ;*
    Andressa - Blog Mais que Livros

    ResponderExcluir
  4. Olá Ana!
    Estou amando esses tutorias. Eles realmente ajudam quem não pode pagar pra fazer o seu layout. Parece ser meio complicado, mas lendo com calma você entende. Mais uma dica anotada.
    Beijinhos!
    http://eraumavezolivro.blogspot.com.br/

    ResponderExcluir
  5. Oi Ana!!

    Apanhei um bocadinho quando fui colocar blockquote no blog, mas no final deu tudo certo! rs... Espero que a Rafaella aproveite a dica, acho muito legal essa coluna, com certeza vai ajudar muita gente!

    Beijo!

    Ju
    Entre Palcos e Livros

    ResponderExcluir
  6. gostei do tutorial.
    tem gente que não sabe usar e nem cmo por no layout.
    particularmente é uma das minhas coisas preferidas visualmente falando em uma postagem.

    Seguindo o Coelho Branco

    ResponderExcluir