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='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[
$(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.