Templates Pluss
Avalie:
  • Author: Ely Designer
  • Categorias:
  • Meu Site: The Pluss

    • asass

    Estas instruções servem para os templates que possuem estilos para legendas (caption) nas imagens.

    É necessário usar o novo editor de posts do Blogger para o hack funcionar perfeitamente.



    Adicione sua imagem normalmente. Coloque o tamanho e o alinhamento que preferir. Após adicionar a imagem, mude para a aba "Editar Html" da janela de postagem. Você verá um código semelhante ao seguinte:

    ?
    1
    2
    3
    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://endereço-da-imagem-original.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
    <img border="0" src="http://endereço-da-imagem-do-post.jpg" /></a></div>

    A esse código iremos acrescentar uma classe para o bloco e uma tag span para o texto da legenda.


    Veja no código abaixo como deve ficar:

    ?
    1
    2
    3
    4
    5
    <div class="separator caption" style="clear: both; text-align: center;">
    <a href="http://endereço-da-imagem-original.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
    <img border="0" src="http://endereço-da-imagem-do-post.jpg" />
    <span>COLOQUE AQUI O TEXTO DA LEGENDA</span></a>
    </div>

    DEMO

    Caso você queira usar esta dica em seu blog atual, veja um exemplo dos estilos que coloquei no Template Zelia:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    .post-body .separator{
    padding-bottom:10px}
    .post-body .caption a:link,
    .post-body .caption a:visited,
    .post-body .caption a:hover{
    color:#666;
    text-decoration:none;}
    .post-body .caption a{
    background-color:#eee;
    border:1px solid #ccc;
    color:#666;
    display:inline-block;
    font-size:80%;
    font-weight:bold;
    line-height:1.5em;
    padding:5px;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;}
    .post-body .caption img {
    background:#fff;
    border:1px solid #fff;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    margin:4px 2px 8px 2px !important;
    padding:2px;}
    .post-body .caption span{
    display:block}

    :a :b :c :d :e :f :g :h :i :j :k :l :m :n :o :p

    1 comentários

    Assinar: Postar comentários (Atom)