Hack para Post Footer

arvida bystorm, fashion, flower, girl

E aí galera? Hoje eu vim trazer para vocês um pedido via Ask.FM, de personalização de Hack para post footer (rodapé da postagem), porém de um modelo diferente criado por mim. Se quiser conferir, clica logo em Leia Mais!


TUTORIAL

1º Passo: Configure o Blogger para que não apareçam os maracadores;

2º Passo: Crie uma caixa de botões de compartilhamento em https://www.addthis.com/get/sharing no seguinte modelo como mostrado abaixo:


Guarde o código até que o mesmo vá ser utilizado.

3º Passo: Vamos configurar o CSS!

Procure por: .post-footer e substitua por:

.post-footer {
margin-top:40px; /* Margem do Topo */
margin-bottom:15px; /* Margem de Baixo */
background:url(URL-DO-FUNDO); /* Fundo do Post Footer */
width:520px;  /* Largura Total */
height:64px; /* Altura Total */
font-weight:bold;  /* Efeito Negrito na Fonte */
}
.post-comment-link {
float:right;  /* Flutuar à Esquerda */
margin-top:8px;  /* Margem de Topo */
margin-left:15px;  /* Margem Esquerda */
display:inline;  /* Não Altere */
z-index:100; /* Não Altere */
}
.post-comment-link a {
color:#fff; /* Cor do Link de Comentários */
font-size:25px; /* Fonte do Link de Comentários */
}
#sharepostfooter {
z-index:100;/* Não Altere */
margin-top:35px; /* Margem de Topo */
margin-left:20px; /* Margem Esquerda */
float:left; /* Não Altere */
width:200px; /* Não Altere */
}
.post-author {
float:left; /* Não Altere */
font-family:arial; /* Fonte */
margin-top:35px; /* Margem do Topo */
margin-left:120px; /* Margem Esquerda */
display:inline; /* Não Altere */
}
.post-author a {
color:#222; /* Cor do Link Autor */
}

 SALVE  e agora procure por: <div class='post-footer'>, porém o segundo item (existem duas divs desta) portanto, o que esteja logo abaixo de: 

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

será o correto.

Abaixo estará o: <div class='post-footer'>. Abaixo dele então, cole:

<div id='sharepostfooter'>
CÓDIGO DOS BOTÕES DE COMPARTILHAMENTO AQUI</div>
 <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'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span>
 <span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn'>
                      <a href='http://www.uprisingteen.com/p/sobre_22.html' itemprop='author' rel='author' title='Perfil'>
                        <data:post.author/>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn'><data:post.author/></span>
                  </b:if>
                </b:if>
              </span>

 SALVE  e visualize. Editem o que for necessário, eu recomendo fazer tudo isso em um blog de testes para caso de erro. Eu trouxe também uma imagem para vocês usarem de fundo, mas creditem é claro!

Imagem de Fundo:


 

Creditem se usarem ;D
PROÍBIDO REBLOGAR