Central Mu Online - Conectando você ao Mundo do MU Online: Fazer Resumo da Postagem Com Imagem

WebChat Central Mu Online

  • terça-feira, 3 de maio de 2011

    Fazer Resumo da Postagem Com Imagem

    O procedimento é bem simples, você entra na pagina editar html, marque a opção para expandir modelos de widgets e procura por post.body, deve estar deste jeito no seu blog: <data:post.body />

    Então apague essa linha e coloque isso no lugar:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:post.hasJumpLink'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:post.snippet'>
    <b:if cond='data:post.thumbnailUrl'>
    <div class='Image thumb'>
    <img expr:src='data:post.thumbnailUrl'/>
    </div>
    </b:if>
    <data:post.snippet/>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
    <b:else/>
    <data:post.body/>
    </b:if>
    </b:if>
    </b:if>
    </b:if>

    Cuidado para não mostrar duas vezes a mesma coisa no seu blog! Veja se logo após esse trecho se tem o código:
    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
    </b:if>

    Se encontrar apague, pois isso fará que o link para ler a postagem completa apareça duas vezes como na imagem abaixo, mas se retirar esse código não terá problemas.





    E já está pronto, agora é só visualizar seu blog e verá que na pagina inicial ou paginas dos marcadores do blog aparecem um trecho do seu texto e uma miniatura das imagens.
     Para melhorar o layout podemos adicionar algumas linhas de código CSS e deixar a miniatura da imagem ao lado do texto, volte na pagina editar HTML e coloque esse trecho antes de linha </b:skin>

    .thumb img {float: left;margin: 5px;}

    A parte float:left é o lado que a imagem ficará caso queira do lado direito então use float: right

    E se quiser personalizar o link leia mais, adicione essas linhas no mesmo local que colocou o outro código CSS:
    .jump-link {text-align: center;margin:auto}
    .jump-link a{font-size:16pt;color:#f00}
    .jump-link a:hover{color:#00f}


    pronto !

    Nenhum comentário:

    Postar um comentário

www.iCentralMuOnline.com.br