Reino Kawaii

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:

.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;
  }

.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;
  }

<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!