PERSONALIZANDO O RODAPÉ DO POST

27 abril 2016



Dando continuidade a nossa saga de vinte e uma aulas da série LAYOUT DOS SONHOS (na plataforma blogger), trago hoje um tutorial pra deixar o rodapé da sua postagem personalizado. Esse tutu é bem simples e não exige nenhum conhecimento avançado. Para começarmos, acesse o painel de códigos do seu blog e procure por:


post-footer


você vai encontrar duas opções, opte pela segunda. Apague o código abaixo.

<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'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
E no lugar dele, cole o seguinte código:


<span class='post-author vcard'>

<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
 <div style='float: right; margin: 20px auto 0px; padding: 0px; background: transparent;'>
<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'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
      </div>
Esse código contem os links do autor do blog e dos comentários. 
Dando continuidade, logo abaixo você vai encontrar o seguinte código:


<div class='post-footer-line post-footer-line-1'>


Abaixo dele, cole:
<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:loop></b:if></span>

Esse link pertence aos marcadores. Agora vamos customizar esses links, 
dando cor e personalidade a eles. Agora, procure por:

.post-footer
Apague o código a seguir

 .post-footer {

  margin: 1.5em 0 0;
}

E no lugar dele, cole esse código
.post-footer {
color: #000000;
font-family: 'Clicker Script', cursive;
font-size: 25px;
}
.post-footer a {
color: #FFFFFF;
font-family: 'Roboto', sans-serif;
font-size: 14px;
padding: 2px 2px 0px 2px;
background: #FA5882;
}
.post-footer a:hover {
background: #FFF280;
color: #151515;
}



ENTENDENDO O ÚLTIMO CÓDIGO

Color: Cor da fonte.
Font-Family: Estilo da fonte. (Aprenda a instalar fontes diferentes no blog)
Font-size: Tamanho da fonte.
Background: Cor de fundo dos links dos marcadores e comentário.

Esse tutorial é aplicável no BLOGGER e esses códigos que citei acima você encontrá no layout base que disponibilizei na apresentação da série. Baixe você também para  juntas construirmos  o layout perfeito.

+ Como criar um Blogroll com imagens 

Compartilhe nos comentários a sua sugestão para o próximo post, e se houver alguma dúvida, também deixe nos comentários, terei o maior prazer em te ajudar. Espero que tenha gostado, um super beijo e até o próximo post.


6 comentários:

  1. Tem algumas coisas no blog que não consigo editar, essa é uma delas, será que vai uma ajuda?

    ResponderExcluir
  2. SE EU QUISER COLOCAR A ASSINATURA COM FOTO COMO FAÇO?

    ResponderExcluir
    Respostas
    1. Já tem um tutorial aqui no blog ensinando Maria =)

      Bjão :*

      Excluir
  3. porfavor ensina esse menu seu de cima, com as categorias assim, mas no topo, mas nem precisa da listra rosa, so ele comum mesmo, mas com abas e ele fixo no topo. queria muito :(

    ResponderExcluir
    Respostas
    1. Hô minha linda, pedido anotado 0/ Em breve eu solto esse tutorial pra você =) Agradeço a sugestão de post <3 Bjão :*

      Excluir