Minissérie Como personalizar o blog passo a passo- personalizar área dos posts

Views:
PERSONALIZAR ÁREA DOS POSTS
(cole conforme tutorial aqui)

/* ÁREA DOS POSTS
----------------------------------------------- */
h3.post-title {
text-align: center;
font: $(post.title.font);
text-transform: none;
margin-top: 20px;
color: $(post.title.text.color);
}

h3.post-title a {
text-decoration: none;
font: $(post.title.font);
color: $(post.title.text.color);
}

h3.post-title a:hover {
text-decoration: none;
font: $(post.title.font);
color: $(link.color);
}

.post-outer {
background: $(post.background.color); /* Fundo da postagem */
padding-top: 10px; /* Espaço do topo */
padding-left: 15px; /* Espaço da esquerda */
padding-right: 15px; /* Espaço da direita */
padding-bottom: 10px; /* Espaço de baixo */
margin-left: -15px;
margin-right: -10px;
margin-top: 5px;
margin-bottom: 30px;
}


CÓDIGO PERSONALIZAÇÃO DA DATA
(colar abaixo de <div class='post-header-line-1'/>)

<center>
                                        <!--Autor e data-->
                                        <div style='display:inline;width:auto;color:#000;font:normal 12px open sans;'>
                                          <span class='post-author vcard' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'> Publicado por
                    <span class='fn author'>
                      <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 author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </b:if>
              </span>
                                          <b:if cond='data:post.dateHeader'>
                                            em
                                            <data:post.dateHeader/>
                                          </b:if>
                                        </div>
                                        <p/>
                                        <!--Fim -->
                                      </center>


CÓDIGO MARCADORES E LINK DOS COMENTÁRIOS
(colar abaixo de <div class='post-footer-line post-footer-line-2'>)

<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'><i class='fa fa-comments'/> Comente aqui
<b:else/>
<b:if cond='data:post.numComments == 1'><i class='fa fa-comments'/> 1 comentário
<b:else/>
<i class='fa fa-comments'/> <data:post.numComments/>  comentários
</b:if></b:if></a>
</b:if>
</span>

<span class='post-labels'>
        <b:if cond='data:post.labels'><i class='fa fa-tags'/>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?&amp;max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>


CÓDIGO DE PERSONALIZAÇÃO DOS MARCADORES E COMENTÁRIOS
(colar acima de ]]></b:skin>)

.comment-link {
float: right;
margin-right:1em;
margin-top: 0.1em;
font: 13px 'Montserrat';
text-transform:uppercase;
text-decoration: none;
}
.post-labels {
display:block;
padding:4px;
text-align: left;
font: normal 13px 'Montserrat';
margin-top: -1.9em;
text-transform: none;
}




CÓDIGO CSS DOS BOTÕES DE COMPARTILHAR QUE PERSONALIZEI
(use em substituição ao código CSS original deste tutorial: https://www.elainegaspareto.com/2016/12/botoes-personalizados-para-compartilhar.html)

/*-- TEXTO COMPARTILHE ESTE POST--*/
.compartilhe {
background: transparent;
margin: 0 -0.1em;
margin-right: 0.8em;margin-left: 0.8em;
margin-top: 2em;
padding: 0.1em;
height: 40px;
}
p.share {
float: center;
text-align: center;
padding-right: 1.6em;margin-left: 1.5em;
font-weight: 400;
color: #000;
}
.goog-inline-block {
display: block !important;
}
.google-plus-share-container {
display: initial !important;
}
/*** BOTÕES COMPARTILHAMENTO ***/
.post-share {
text-align:center;
margin-top:15px;
margin-bottom:20px;
background:none;
}
.post-share a {
display:inline-block;
}
.share-box {
width: 32px;
height: 32px;
background: #fff;
border: 1px solid #e5e5e5;

display: inline-block;
line-height: 32px;
border-radius: 50%;
margin: 0 1px;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
}
.share-box i {

font-size:15px;
}
.share-box:hover {
background:#171717;
border:1px solid #171717;
color:#fff;
}

EXCLUINDO AUTOR DUPLICADO

Localize esse trecho e apague-o:

<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 class='g-profile' 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>



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage