27 abril 2016
PERSONALIZANDO O RODAPÉ DO POST
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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 != "item"'><b:if cond='data:blog.pageType != "static_page"'><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 != "true"'/></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
+ 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.
Tem algumas coisas no blog que não consigo editar, essa é uma delas, será que vai uma ajuda?
ResponderExcluirMas qual é a sua dúvida?
ExcluirSE EU QUISER COLOCAR A ASSINATURA COM FOTO COMO FAÇO?
ResponderExcluirJá tem um tutorial aqui no blog ensinando Maria =)
ExcluirBjão :*
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 :(
ResponderExcluirHô minha linda, pedido anotado 0/ Em breve eu solto esse tutorial pra você =) Agradeço a sugestão de post <3 Bjão :*
ExcluirColoquei esses links abaixo do titulo do post e queria tirar do final da postagem. como faço? Blog lindo o seu! Amei os tutoriais
ResponderExcluirProcure por post-footer, você vai encontrar 2 opções, na segunda delete os links presentes no layout. Espero ter ajudado. Bjos :*
ExcluirOi, Lorena!
ResponderExcluirEstou acompanhando agora a série e seguindo os passos para montar meu layout, parabéns por esse trabalho tão incrível!
Queria, ainda, tirar uma dúvida. Inseri os códigos certinhos e ficou tudo bonitinho e tal, mas a parte dos "marcadores", já tava abaixo do título do post, não sai, e fica ela e a nova no final juntas na página. Como faço para tirá-la e deixar só uma normal?
Beijos!
Oi Sâmella! É muito simples, procure por post-header. Vai aparecer dois, na segunda opção apague o código dos marcadores. Espero ter ajudado :D
ExcluirUm grande bjo linda e muito obrigada por fazer parte do Manual <3
Oi Lory, adorei a dica já estou usando no meu blog, obrigada!
ResponderExcluirEbaaaaa, que bom Regiane <3
ExcluirOi Lory, deu certinho e foi muito fácil de trocar as cores.
ResponderExcluir