Veja aqui o cronograma de aulas.
TUTORIAL - HTML: Estilo de postagem por Andy Santana
Postado por
Andy
31 dezembro 2016
OLÁ GIRLS AND BOYS <3 b="" equipe="" nbsp="">FD3>
recebeu um e-mail pedindo um tutorial de como fazer esse tipo de postagem:
Eu lembro que fiz o layout da Gisele e do Justin com esse tipo de postagem, mas paraece que não foi muito bem aceito pelo público. O que é uma tragédia por que eu amei esse tipo de postagem, mas fazer o que né meus amores?!!
A pessoa - que não lembro o nome - do e-mail foi tão educada conosco que resolvi fazer o tutorial, espero que gostem e consigam fazer o estilo de postagem.
PRIMEIRO DE TUDO FAÇA BACKUP DO SEU TEMPLATE (LAYOUT).
1 - Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
2 - Clique no código do template, pressione "CTRL+F" e pesquise por:
<b:includable id='post' var='post'>
4 - No local do trecho excluído, cole o seguinte código:
<b:includable id='post' var='post'>5 - Pesquise agora por ]]></b:skin>
<div id='sheldon'>
<article expr:class='"blogger-post blogger-post-" + data:blog.pageType' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='blogger-post-part blogger-post-thumbnail-area'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='200' width='72'/></a>
</b:if>
</div>
</b:if>
</b:if>
<div class='blogger-post-part blogger-post-body-area'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='blogger-post-title'>
<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
<b:else/>
[Untitled]
</b:if>
</h3>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
<span>em</span>
<b:if cond='data:post.dateHeader'>
<span class='date-header'><data:post.dateHeader/></span>
</b:if>
<span>|</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<!-- Html Resumo Automático de Postagens-->
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<p><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
("summary<data:post.id/>");</script>
<span class='reslink' style='float:right'><a expr:href='data:post.url'>Leia Mais ►</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></p>
</b:if>
<!-- Fim Html Resumo Automático de Postagens-->
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<footer class='blogger-post-footer'>
<div class='blogger-post-footer-line blogger-post-footer-line-1'>
<b:if cond='data:post.dateHeader'>
<span class='date-header' style='display: block; text-align: center; margin-top: -135px; position: relative; float: left; width: 300px; letter-spacing: 0.1em; color: #fff; text-transform: uppercase; font-size: 10px; background: rgba(0,0,0,0.7); margin-left: -10px; font-family: arial;'><data:post.dateHeader/></span>
</b:if>
</div>
</footer> </b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>
<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>
</div> </b:if>
</div>
</article>
</div>
</b:includable>
6 - Logo ABAIXO da tag encontrada, cole o seguinte código.
<style type='text/css'>
#blog-pager {clear: both;}
#sheldon { /* -- LARGURA DAS POSTAGENS JUNTAS, CENTRALIZAR,--- */
width: 800px;
/* margin-top: 200px; */ /* SE NECESSÁRIO, ARRUME ESSES DOIS MARGIN */
margin-left: -100px;
}
.blogger-post { /* -- NÃO MEXA --- */
height: auto;
width: 300px; /* -- APENAS SE MUDAR O TAMANHO DAS IMAGENS--- */
padding: 10px 10px 0px;
overflow: hidden;
float: left;
display: inline-block;
}
.blogger-post:after { content:" "; display:block; clear:both;}
.blogger-post-title { /* -- POSIÇÃO DOS TÍTULOS DAS POSTAGENS NA PÁGINA INICIAL --- */
margin: -10px 0 10px -10px;
padding: 0;
position: absolute;
width: 210px;
text-transform: uppercase;
font-size: 15px;
text-align: center;}
.blogger-post-title a{ /* -- ESTILO DOS TÍTULOS DAS POSTAGENS NA PÁGINA INICIAL, MUDE DE ACORDO COM O SEU GOSTO --- */
width: 280px;
background: rgb(149, 103, 147);
padding: 10px;
display: block;
overflow: hidden;
float: left;
color: #F1F0F0;
margin-top: 270px;
text-align: center;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;}
.blogger-post-thumbnail-area {
width: 300px; /* -- TAMANHO DAS IMAGENS --- */
height: 300px; /* -- TAMANHO DAS IMAGENS --- */
background-color: #2D3957;
float: left;
overflow: hidden;
background: url(http://i.imgur.com/Oo61wtk.png); /* -- IMAGEM PARA QUANDO NÃO HOUVER NA POSTAGEM --*/
background-repeat: no-repeat;
background-size: 100%;
margin-bottom: 100px;
}
.blogger-post-thumbnail { /* -NÃO MEXA- */
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
border: none;
outline: none;
position: static;;}
.blogger-post-body-area { /* -- NÃO MEXA, SE NÃO SOUBER CODIFICAR --- */
padding: 10px;
margin: 10px 0 0;
font-size: 11px;
}
.blogger-post-item,
.blogger-post-static_page {width:auto; margin-left: -150px;} /* - NÃO MEXA- */
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area { margin: 0;
padding: 20px;
font-size: 13px;
}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px;}
.icon-action {width: 10px;height:10px;}
/* ---ESTILOS NA PÁGINA DA POSTAGEM--- */
h3.post-title { /* -- TITULO DAS POSTAGENS --- */
font-size: 20px;
font-family: calibri;
text-align: center;
color: #FFF;
height: 50px;
background: url(http://i.imgur.com/XOdtVs6.png) no-repeat;
padding-top: 180px;
width: 670px;post-footer letter-spacing: 0.1em;
text-transform: uppercase;
}
.post-body { /* -- CORPO DA POSTAGEM--- */
font-family: calibri;
font-size: 12px;
color: #fff;
padding: 20px;
text-align: justify;
width: 630px;
background: url(http://i.imgur.com/2UYYbXy.png);
}
.post-header { /* -- NÃO MEXA --- */
line-height: 1.6;
}
.post-footer { /* -- PARTE DE BAIXO DA POSTAGEM, MARCADORES E COMPARTILHAMENTO --- */
height: 280px;
background: url(http://i.imgur.com/rkD27UG.png) no-repeat;
margin-bottom: 100px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.1em;
font-family: Tahoma, Helvetica, san-seri;
font-size: 10px;
}
.post-header, .dados { /* -- ÁREA DO AUTOR E DATA DE POSTAGEM --- */
padding: 17px 0 0px 0px;
border-bottom: solid 30px transparent;
text-align: center;
font-size: 10px;
color: #fff;
background: #956793;
text-transform: uppercase;
letter-spacing: 0.1em;
width: 670px;
}
</style>
Inserindo o Script para Correção das Miniaturas
O próximo passo será inserir um script "necessário" para corrigir a definição das miniaturas das imagens, porém, como citado no tutorial, esse passo não é obrigatório, mas é importante para que as imagens presentes nas postagens não apareçam "desfiguradas" e embaçadas.
7- Ainda no código do template, pesquise por </body>.
8 - Logo ACIMA da tag encontrada, cole o seguinte código
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("Blog1",200);
</script>
</b:if>
</b:if>
Em destaque 210, é a resolução da nova imagem que será aplicada, porém esse valor deve ser ajustado caso tenha alterado no CSS de acordo com o novo valor.
9 - Clique em em "Salvar Modelo" e logo depois "Visualizar blog" para ver como o seu blog ficou. Agora você poderá personalizar como quiser suas postagens da página inicial, sem intererência na página da postagem.
Tutorial base por PRODEVELOPER e modificado por ANDY SANTANA
TUTORIAL TESTADO NOS SEGUINTES CÓDIGOS BASES:
AMANDA ROSA feat Lady Gaga
ANDY SANTANA feat Ellie
ANDY SANTANA feat Angelina
IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!
DEPENDENDO DO SEU CÓDIGO DEVERÁ MEXER EM MAIS COISAS. ENTÃO SÓ MEXA, SE ENTENDER DE HTML.
Me digam o que acharam do tutorial e não se esqueça de comentar sobre dúvidas, elogios, xingamentos. E peçam mais tutoriais (risos).
Beijos da Andy<3 b="">3>
deias.lerman@gmail.com
Web Master FD
Este comentário foi removido pelo autor.
ResponderExcluirÉ apenas imagem mapeada, faça a header com os nomes das páginas, depois faça a mapeaçaõ por esse site: https://www.image-maps.com/
ResponderExcluirEspero ter ajudado !!
Obrigada, Andy! <3
ExcluirNÃO ACREDITO QUE A HEADER QUE FIZ SERVIU COMO EXEMPLO KKKKKKKKKKKK
ResponderExcluirEnsina a personalizar os blackquotes pff <3
ResponderExcluirEstou preparando o tutorial.
Excluir