Códigos para personalizar a área do post em formato lista

Views:
Localize:
]]></b:skin>


E abaixo dele cole o CÓDIGO CSS DAS MINIATURAS:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
/* ESTILOS PARA AS MINIATURAS DOS POSTS
----------------------------------------------- */
#blog-pager {clear: both;}
.blogger-post {
background: transparent;
height:300px;
margin-top: 0.8em;
margin-left: -5px;
margin-right: 15px;
overflow:hidden;
*zoom:1;
}
.blogger-post:after {
content:&quot; &quot;;
display:block;
clear:both;
}
.blogger-post-title {
padding: 10px 0px;
font-family: Open Sans, sans-serif;  /*--- FAMÍLIA DA FONTE DO TÍTULO DO POST NA HOME--- */
font-size: 23px;  /*--- TAMANHO DA FONTE DO TÍTULO--- */
font-weight: 400 !important; /*--- PESO DA FONTE DO TÍTULO--- */
padding:0;
color: #000000; /*--- COR DA FONTE DO TÍTULO--- */
text-align: center; /*--- ALINHAMENTO DA FONTE DO TÍTULO--- */
margin:0 0 10px;
}
.blogger-post-title a{
color: #000000; /*--- COR DA FONTE DO TÍTULO- MANTENHA COMO ACIMA--- */
text-align: center; /*--- TAMANHO DA FONTE DO TÍTULO--- */
}
.blogger-post-title a:hover{
color: #555555; /*--- TAMANHO DA FONTE DO TÍTULO- MANTENHA COMO ACIMA--- */
}
.blogger-post-thumbnail-area {
width:300px;
height:300px;
float:left;
overflow:hidden;
background-size: 100%;
}
.blogger-post-thumbnail {
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 {
padding:30px;
padding-top:20px;
padding-right: 10px;
margin-left:300px;
font-size:15px; /*--- TAMANHO DA FONTE DO RESUMO--- */
font-family: Open Sans, sans-serif; /*--- TIPO DA FONTE DO RESUMO--- */
}
.blogger-post-footer {
background: none;
margin:4em 5em 0 !important;
margin-bottom: 1px !important;
padding:10px;
text-transform:none;
color:#fff; /*--- COR DA FONTE DO BOTÃO CONTINUAR LENDO--- */
text-align: center !important; /*--- ALINHAMENTO DA FONTE DO BOTÃO CONTINUAR LENDO--- */
}

.blogger-post-footer a {
font-family: Open Sans, sans-serif; /*--- TIPO DA FONTE DO BOTÃO CONTINUAR LENDO--- */
font-size: 15px; /*--- TAMANHO DA FONTE DO BOTÃO CONTINUAR LENDO--- */
font-weight: normal;
text-transform: none;
background: #000000; /*--- COR DO FUNDO DO BOTÃO CONTINUAR LENDO---- */
color: #ffffff; /*--- COR DA FONTE DO BOTÃO CONTINUAR LENDO-MANTENHA COMO ACIMA--- */
float: left;
width: 100%;
padding: 10px 20px;
text-align: center !important; /*--- TAMANHO DA FONTE DO TÍTULO--- */
font-weight: 500 !important; /*--- TAMANHO DA FONTE DO TÍTULO--- */
}
.blogger-post-footer a:hover{
text-decoration: none;
background: #ffe699; /*--- COR DA FONTE DO BOTÃO CONTINUAR LENDO AO PASSAR O MOUSE--- */
color: #000000; /*--- COR DA FONTE DO BOTÃO CONTINUAR LENDO AO PASSAR O MOUSE--- */
}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.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;}

/* MEDIA QUERIES- DEFINE A RESPONSIVIDADE NA PÁGINA INICIAL
----------------------------------------------- */
@media screen and (max-width : 1152px) {
.blogger-post-body-area {padding-top:20px;padding-right: 10px;}
.blogger-post-title {margin-top:-10px !important; }
.blogger-post-footer {margin:1em 5em 1em 5em;}
}
@media screen and (max-width : 1024px) {
.blogger-post-footer {margin:1em !important; margin-top: 3em !important;}
.blogger-post-title {font-size: 20px;}
.blogger-post-body-area {font-size:14px;}
}
@media screen and (max-width : 900px) {
.blogger-post {margin-top: 0.6em;margin-left: -0.1em;}
.blogger-post-footer {margin:3em 5em 1em 5em !important;}
.blogger-post-body-area {font-size:16px;}
}
@media screen and (max-width : 800px) {
.blogger-post-footer {margin:3em 3em 1em 3em !important;}
}
@media screen and (max-width : 736px) {
.blogger-post-footer {margin:2em !important;}
}
@media screen and (max-width : 640px) {
.blogger-post-thumbnail-area {width:240px; height:240px;}
.blogger-post {height:240px;}
.blogger-post-body-area {font-size:0px;margin-left:250px; margin-right: 1em;padding: 10px !important;}
.blogger-post-footer {margin:1em !important;}
}
@media screen and (max-width : 480px) {
.blogger-post {width:105%; height: auto; margin-right: -0.4em !important; margin-left: -0.4em !important;}
.blogger-post-thumbnail-area {width:105%; height:300px !important;float:center !important;}
.blogger-post-title {font-size: 20px;}
.blogger-post-body-area {height:auto !important;padding-top:20px;padding:10px;padding-bottom: 30px;margin-left: 0;margin-top:5px;font-size:16px;}
.blogger-post-footer {margin:0.5em !important;width: 100% !important;;}
}
</style>
</b:if>
</b:if>

<!-- ESTILO DAS PÁGINAS ESTÁTICAS- COMEÇO -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#fecha { display:none;}
  .blogger-post-footer {display: none;}
  .main-inner h2.date-header { background: none;}
</style>
</b:if>
<!-- FIM -->


Localize:

<b:includable id='post' var='post'>

E selecione todo o trecho até

</b:includable>

No lugar desse código cole o CÓDIGO DE PERSONALIZAÇÃO DA ÁREA DO POST:

<b:includable id='post' var='post'>
  <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='72' 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;'>
<b:if cond='data:post.dateHeader'>
          <h4 class='date-header'><span><data:post.dateHeader/></span></h4>
        </b:if></b:if>
      <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>
      <div class='blogger-post-body'>
        <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.snippet'>
              <data:post.snippet/>
            <b:else/>
              No content.
            </b:if>
          </b:if>
        </b:if>
      </div>
      <footer class='blogger-post-footer'><b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='blogger-post-footer-line blogger-post-footer-line-1'>
<div class='compartilhe'>
                                          <p class='share'>
                                            COMPARTILHE!
                                          </p>
                                        </div>
<!-- BOTÕES DE COMPARTILHAR POSTS -->
<center>
<div class='post_social_share'> 
<div class='share_this_content'>
   
      <a class='social_share fb' expr:href='&quot;https://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' target='_blank' title='Compartilhar no Facebook'><i aria-hidden='true' class='fa fa-facebook'/></a>

      <a class='social_share tw' expr:href='&quot;https://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' target='_blank' title='Compartilhar no Twitter'><i aria-hidden='true' class='fa fa-twitter'/></a>

     
      <a class='social_share pi' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank' title='Compartilhe no Pinterest'><i aria-hidden='true' class='fa fa-pinterest'/> </a>

<a class='social_share li' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:blog.url.canonical + &quot;&amp;title=&quot; + data:view.title.escaped + &quot;&amp;summary=&quot; + data:view.description.escaped' target='_blank'><i class='fa fa-linkedin'/></a>

<a class='social_share whats' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Compartilhar no WhatsApp'><i class='fa fa-whatsapp'/></a> 

   
   
    </div></div>
    </center>

      </div>
          <span class='blogger-post-author vcard'>
            <b:if cond='data:top.showAuthor'>
              <data:top.authorLabel/> <span class='fn'>
              <b:if cond='data:post.authorProfileUrl'>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>
              <b:else/>
                <span class='g-profile'><data:post.author/></span>
              </b:if>
              </span>
            </b:if>
          </span> <span class='blogger-post-timestamp'>
          <b:if cond='data:top.showTimestamp'>
            <data:top.timestampLabel/> <a class='blogger-post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='blogger-post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>
          </b:if>
          </span> <span class='blogger-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'>
                <a expr:href='data:post.url + &quot;#comments&quot;'><data:post.commentLabelFull/></a>
              </b:if>
            </b:if>
          </b:if>
          </span>
   
        <div class='blogger-post-footer-line blogger-post-footer-line-2'>
<span class='blogger-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>
        <b:include data='post' name='postQuickEdit'/>
          </span>

<!-- INÍCIO CÓDIGO POSTS RELACIONADOS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='btnt-related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=3;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
</b:if>
<!-- FINAL CÓDIGO POSTS RELACIONADOS-->       
        </div>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span style='float:center'><a expr:href='data:post.url'>Continuar lendo</a></span>
</b:if>
      </footer>
    </div>
  </article>
</b:includable>



Nota:
Caso queira trocar a expressão Continuar lendo altere o texto que marquei em vermelho.


Localize </body> e acima dessa tag de fechamento cole o CÓDIGO DE CORREÇÃO DAS MINIATURAS.

<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;,480);               
</script>
  </b:if>
</b:if>


CORREÇÃO DA DATA

Localize:

<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

E apague.
Salve.

Formulário de contato

Nome

E-mail *

Mensagem *