Follow Us @soratemplates

sábado, 11 de agosto de 2012

Modelos de Postagem(1): Legenda Kawaii em Imagens


Estava com saudades já ^-^ Espero que todos estejam super bem!!! Ontem estava vendo alguns e-mails enviados por vcs e respondendo alguns (ainda não respondi a todos ok?); muitos pediram para que eu retornasse o blog ao modelo anterior por causa da visualização que não estava muito boa; alguns me disseram não ter visto a área de comentários, outros que o blog não estava sendo visualizado como customizei, estava preto e branco, padrão das Dynamic Views, mas aqui estava tão perfeitinho! Sendo assim, retornei ao antigo template. Gostaria que me dissessem se gostaram mais assim. Vamos ao post!
Hoje vou mostrar para vocês uma forma de padronizar suas postagens, deixando tudo pré-definido para quando você acessar a área de postagens do blogger substituir apenas algumas palavrinhas, letras ou imagens.
Isso é possível graças a um recurso do Blogger chamado Modelo de Postagem.
Os modelos de postagem pré-formatam o editor de postagem com texto ou código que será exibido sempre que você criar uma nova postagem.
Para encontrá-lo, acesse Configurações - Postagens e Comentários - Modelo de Postagens:
Para entender mais ou menos o que faremos, clique em Adicionar, digite "<b>KAWAII</b>", clique em Salvar Configurações. Agora clique em Nova Postagem e veja que a palavra kawaii em negrito já está lá onde você vai digitar seu post. Se é possível usar imagens, texto e HTML em um modelo de postagem, significa que temos um aliado em nossas mãos para fazer algumas coisinhas fofas. E nesse post, está a primeira parte dos tutoriais que pretendo postar para personalizar seus posts: colocar uma legenda kawaii nas imagens!!!

Imagem personalizada com legenda kawaii


Geralmente, em todo texto de um blog, há uma introdução e uma imagem de abertura; se juntássemos os dois seria perfeito então não é mesmo? Com esse tutorial que aprendi no Vagabundia nós podemos colocar legendas do tamanho que quisermos, ótima opção para resumir uma postagem ou explicar o que se mostra na imagenzinha. Se usar esse tutorial no início dos posts, com um belo resumo do que irá postar, acredito que o "Leia Mais com imagem" pode ser abandonado, já que a imagem pode vir com um link. Vamos ao passo-a-passo.
1º: Precisamos definir a aparência de nossa legenda e da imagem, ou seja, precisamos do CSS, aqueles códigos adicionados acima de ]]></b:skin>
Código 1: Com esse código, ao passar o mouse em cima do título da legenda, aparecerá outro texto oculto. 
.imgteaser {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width:100%; /* largura da imagem e da legenda */
  }
  .imgteaser a {text-decoration: none;}
  .imgteaser a:hover {cursor: pointer;}
  .imgteaser a img {
    background-color: #fcc; /* cor da moldura */
    border: none;
    margin: 0;
    padding: 5px; /* moldura */
    width: 100%; /* largura da imagem */
  }
  .imgteaser a .more { /* area do texto OPEN */
    background-color: #fcc;  /* cor de fundo */
    color: #ffffff; /* cor do texto */
    font-size: 14px; /* tamanho da fonte */
    padding: 5px 10px;
    /* transparencia */
    filter:alpha(opacity=65); /* IE genérico */
    opacity:.65; /* Firefox */
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
    /* posicao */
    position: absolute;
    bottom: 14px;
    right: 10px;
  }
  .imgteaser a .desc {display: none;}
  .imgteaser a:hover .more {visibility: hidden;}
  .imgteaser a:hover .desc {
    background-color:#fcc; /* cor de fundo */
    display: block;
    margin: 0;
    width: 100%; /* largura */
    color: #ffffff;
    font-size: 12px;
    padding: 10px;
    /* transparencia */
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
    position: absolute;
    bottom: 14px;
    left: 10px;
  }
  .imgteaser a:hover .desc strong {
    display: block;
    font-size: 14px;
    line-height: 2em;
  }
Código 2: Com esse código se adiciona apenas uma frase na legenda kawaii:
.imgteaser {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width:100%;
  }
  .imgteaser a {text-decoration: none;}
  .imgteaser a:hover {cursor: pointer;}
  .imgteaser a img {
    background-color: #fee;
    border: none;
    margin: 0;
    padding: 10px;
    width: 100%;
  }
  .imgteaser a .more {
    background-color: #ff54aa;
    color: #ffffff;
    font-family:'Lobster' !important;
    font-size: 14px;
    text-shadow:0 1px #fee;
    padding: 5px 10px;
    width: 100%;
    /* transparencia */
    filter:alpha(opacity=65); /* IE genérico */
    opacity:.65; /* Firefox */
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
    position: absolute;
    bottom: 14px;
    right: 10px;
  }
Basicamente, as áreas que se alteram no 1º código podem ser alteradas no 2º e se referem a plano de fundo, largura da imagem e da legenda, e estilos dos textos ok? Depois de adicionar o CSS, vamos ao Modelo de Postagem e colamos:
Se usou o código 1:
<div class="imgteaser">
  <a href="javascript:void(0);">
    <img src="URL da imagem" />
    <span class="more">&raquo; OPEN</span>
    <span class="desc">
      <strong>SUBTÍTULO</strong>
      TEXTO
    </span>
  </a>
</div>
Se usou o código 2:
<div class="imgteaser">
  <a href="javascript:void(0);">
    <img src="URL da imagem" />
    <span class="more">&raquo; TEXTO</span>
  </a>
</div>
Sendo que no lugar de javascript:void(0); você pode colocar um link, como por exemplo, o link de uma postagem. Pronto!
Espero que gostem e beijus<3

10 comentários:

  1. Super útil o tuto linda! Valeu por compartilhar *-*

    Sou a dona do About a Girl que fechou a algum tempo e agora estou com um novo blog,se puder segue ??http://estacao-teen.blogspot.com.br/

    ResponderExcluir
  2. Que efeito mais lindinhoo!! <3
    Adorei, no momento em que vi, fui automaticamente colocar no blog haha >w<.
    Roberta-chaan o blog fica lindo com qualquer um dos templates que você personaliza *---*!
    Adorei o post, hihi.
    Faz tempo que não venho aqui ><, não comento muito (quase nada, pra dizer a verdade TAT) mas saiba que admiro muito você e o Reino Kawaii, viu?

    Kissus ~

    ResponderExcluir
  3. Agora sim flor!
    Esse template é lindo,o outro era também mas eu não consiga me achar nele rs

    Ótimo tuto, como sempre bem explicado e claro

    bjãoo linda

    ResponderExcluir
  4. amo seu blog, parabéns pelas novidades kawaii que vc sempre traz! favoritei o blog há tempos já ;) adoro as imagens pra background e as blythes fofas ;]
    bjobjo aguardo uma visitinha! ;]

    ResponderExcluir
  5. Adoooooooro teus tutoriais, confesso que achei esse bem difícil, mas só porque sou muito amarrada pra esses html, mas vou tentar fazer *-* obrigada pelo tutu!

    Acabei de colocar um post novinho com uma série super bacana, que tal conferir?

    http://acimadoarcoiris.blogspot.com.br/

    beijinhos!

    ResponderExcluir
  6. Fico feliz que tenham gostado!!!
    Beijus e obrigada<3

    ResponderExcluir
  7. Ooie! Amei mas não consegui colocar.mas tudo bem to acostumada a não conseguir as coisas.mas mesmo assim falando por quem conseguiu por:Ficou ótimo!!!obrigada!!! :h:

    ResponderExcluir
  8. Seus tutoriais como sempre muito bem explicadinhos! ^^
    Ajudou muito!
    Bjss

    ResponderExcluir
  9. Achei muito lindinho! Não consegui botar porque eu fiquei voando quando você disse ''acima de ]]>'', sou meio lerda com essas coisas e não sei onde fica :3
    Mas adorei!

    ResponderExcluir
    Respostas
    1. Fica em Modelo - Editar HTML - aí você procura (CTRL+F) por /b:skin e cola o código acima dele. Salve e quando quiser usar em alguma imagem, use o segundo código do final do post. Tenta, com certeza irá consegui :3
      Obrigada e beijus <3

      Excluir

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