PROFª CAROL aulas dadas haha próximas aulas haha
Veja aqui o cronograma de aulas.
PROFª MEL aulas dadas haha próximas aulas haha
Veja aqui o cronograma de aulas.
TUTORIAL - HTML: Estilo de postagem por Andy Santana
Postado por
31 dezembro 2016


OLÁ GIRLS AND BOYS <3 b="" equipe="" nbsp="">FD
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'>
3 - Selecione e apague o trecho como mostrado na imagem abaixo:

4 - No local do trecho excluído, cole o seguinte código:
 <b:includable id='post' var='post'>
                <div id='sheldon'>
  <article expr:class='&quot;blogger-post blogger-post-&quot; + data:blog.pageType' expr:id='&quot;post-&quot; + data:post.id'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <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 != &quot;item&quot;'>
      <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 == &quot;item&quot;'>
  <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 != &quot;item&quot;'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                    <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 == &quot;item&quot;'>
 <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
       <!-- Html Resumo Automático de Postagens-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
(&quot;summary<data:post.id/>&quot;);</script>
<span class='reslink' style='float:right'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><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='&quot;post-body-&quot; + 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 != &quot;item&quot;'>
      <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 == &quot;item&quot;'>
<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 != &quot;true&quot;'>,</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>
 5 - Pesquise agora por ]]></b:skin>
 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:&quot; &quot;;  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 != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <script type='text/javascript'>            
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);
var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize(&quot;Blog1&quot;,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="">
deias.lerman@gmail.com
Web Master FD

Andy Santana

Aspirante a designer. Oi. Prazer meu nome é Andy Santana, tenho 19 nos e moro em São Paulo. Estudante de Artes Gráficas. Trabalho como Web Designer freelancer.

6 comentários :

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. É 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/
    Espero ter ajudado !!

    ResponderExcluir
  3. NÃO ACREDITO QUE A HEADER QUE FIZ SERVIU COMO EXEMPLO KKKKKKKKKKKK

    ResponderExcluir
  4. Ensina a personalizar os blackquotes pff <3

    ResponderExcluir