Home Top Ad

POSTS COM IMAGEM ANTES DO TÍTULO NO BLOGGER

COMPARTILHAR:

Hoje vamos aprender a como colocar a imagem de um post acima do título. Este tutorial é de nível médio, então preste muita atenção. 

 Antes de fazer qualquer coisa deste tutorial, faça o Backup do seu blog. 


1° PASSO 

A primeira coisa que vamos fazer é ir até  "Modelo" e pressione botão "Editar HTML". Em seguida clique dentro da área do código do Blogger e pressione as teclas CTRL + F para abrir a caixa de busca. 

Após a abrir a caixa digite ou cole o código abaixo e pressione Enter

                           <div class='post-header'>
         

Abaixo desta div você irá colar o seguinte código : 

 <div class='bckpic' id='pic1'/>
<div class='my-wrap'>  



2° PASSO

Agora volte na caixa de pesquisa cole o código abaixo e pressione Enter

]]></b:skin>

Após localizar este código, cole os seguintes estilo acima de ]]></b:skin>

.my-wrap {
    background: #FFF;
    padding: 20px 0 20px 5%;
    margin-top: -103px;
    width: 80%;
    float: center;
    position: relative;
}

div#pic1 {
    min-height: 200px;
    background: #f9f9f9;
    margin: 0;
    padding: 0;
    line-height: 0;
}

div#pic1 img {
    width: 100%;
    height: auto;

}

3° PASSO

Agora para finalizar, volte na caixa de pesquisa cole o código abaixo e pressione Enter



//<![CDATA[

Abaixo //<![CDATA[ cole a seguinte função :

$(document).ready(function() {
    $('.post-outer .post img:eq(0)').each(function() {
        var image = $(this);
        var src = image.attr("src").replace("s200","s1600").replace("s320","s1600").replace("s400","s1600").replace("s640","s1600").replace("default.jpg","maxresdefault.jpg");
        var imgtag = $('<img src="' + src + '" />');
        imgtag.appendTo(".bckpic");
        $(this).parent().remove()
    })
});


4° PASSO

Clique em "Salvar modelo" para salvar as alterações e pronto.