14/01/2016

Tutorial ~ Personalizando: Post-Footer e Tooltip

Iaê pudins, como estão? Faz tempo que não posto tutoriais, estou até meio por fora do que está rolando no mundo "html", o que está sendo usado e coisas assim. Para construir esse novo layout tive que ir atrás de alguns tutos e como já os testei por aqui e vi que deu um resultado legal, irei repassa-los para vocês. Hoje trago dois tipos de personalização para a area de postagem, são detalhes pequenos que fazem uma diferença bem notável, mas antes, vamos descobrir (se você não sabe ainda) o que é um Post-Footer e um Tooltip, vamos conferir!



Capite? 

Personalizando o Post-Footer

Primeiro, vá em Layout >> Modelo >> Editar HTML >> Aperte Ctrl+F e procure por:

 .post-footer {
Você encontrará algo mais ou menos assim:
.post-footer {  margin: .5em 0;  line-height: 1.6;}
Apague o código encontrado e no lugar cole o código do modelo que você escolher, abaixo tem dois  modelos do blog Sweet of Cherry:

Modelo 1
.post-footer {

background: #FFFFFF;
color: #333333;
border-left:1px dotted #8FC5CB;
border-right:1px dotted #8FC5CB;
border-bottom:1px dotted #8FC5CB;
border-top:1px dotted #8FC5CB;
margin:0.73em 0;
padding:3px 3px; }
Modelo 2
Imagem com e sem houver respectivamente
 
.post-footer {background: #FFFFFF;color: #333333;border-left:5px solid #8FC5CB;margin:0.73em 0;padding:3px 3px;}.post-footer:hover {border-left:5px solid #333;}

O terceiro e quarto modelo é colocado de maneira diferente, em seu HTML dê um Ctrl+F e procure por:
]]></b:skin>

Acima dele cole o código de um dos modelos abaixo: 
Modelo 1
.post-footer-line-1{border-bottom: 1px dotted #A3A2A2; /* Estilo da borda */}.post-footer-line-2{border-bottom: 1px dotted #A3A2A2; /* Estilo da borda */}

Modelo 2


.post-footer {border: 1px dotted #A3A2A2;background: #E6E1E3; /* Não se esqueça de colocar a cor do background que combine com o a cor do seu link e seu layout */padding: 5px;} 

Apos personalizar como quiser usando a tabela de cores (aqui), salve.
Personalizando o Tooltip:
Em seu HTML dê um Ctrl+F e pesquise por:
]]></b:skin>
Acima dele cole o código:
div#qTip {padding: 3px;border: 1px solid #CD3333; /* Borda */border-right-width: 2px; /* Margem interna */border-bottom-width: 2px; /* Margem interna */display: none;background: #f5f5f5; /* Background */color: #696969; /* Cor do texto */font-family: Century Gothic; /* Fonte */font-size: 6px;text-align: left; /* Alinhamento do texto */position: absolute;z-index: 1000;}
Mais uma vez dê um Ctrl+F e procure por:
 </head>

Antes do código acima cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>
Apos personalizar como quiser usando a tabela de cores (aqui), salve.

Créditos: Sweet of Cherry

Espero que seja útil a vocês, 
~ Abraços♥

14 comentários:

  1. seu novo layout é muito fofo
    mariangeles-f.blogspot.com

    ResponderExcluir
  2. Hello from Spain: fabulous tips.. We keep in touch

    ResponderExcluir
  3. Amo esses tutorias, da proxima vez que eu for renovar o meu blog passo por aqui. :D

    BJS!!!
    http://adolescenteonlineoficial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Também amo, são detalhes simples que fazem a diferença =)

      ~abraços ♥

      Excluir
  4. Que blog fofo! É bem legal personalizar o post-footer!
    www.expectativasreais.com.br

    ResponderExcluir
    Respostas
    1. Obrigada flor <3 Também acho super legal essas personalizações.

      ~abraços ♥

      Excluir
  5. Otimo tuto hahaha ~ Sempre bom dar uma mudadinha e deixar a sua cara o blog né hahah..

    www.valentinices.com

    ResponderExcluir
    Respostas
    1. É sim haha, obrigada pelo comentário.
      ~abraços ♥

      Excluir
  6. Respostas
    1. Que bom flor, obrigada pelo comentário.
      ~abraços ♥

      Excluir
  7. Amei teu novo layout e o tutorial também. O tooltip e o post-footer sempre dão um charme a mais no blog. Os modelos são fofos *-*
    Bjs,
    Bipolaridades

    ResponderExcluir
    Respostas
    1. Obrigada, que bom que gostou; verdade dão um charme e tanto. Obrigada pelo comentário flor.
      ~abraços ♥

      Excluir

Hei, people <3 Que tal deixar sua opinião, sugestão ou critica (construtiva, por favor) em nossos comentários para que assim possamos melhorar ainda mais! Lembrando, é claro, que nossos comentários são moderados, isto é, precisa de minha aprovação para que apareça. Por tanto, seja educado e se expresse de forma a não ofender a autora do blog ou a terceiros, caso contrario seu comentário não será postado, okay? Até aceito o "seguindo, segue de volta?" desde que eu goste de seu blog, seguirei sem problemas. Sem mais delongas, fique a vontade e volte sempre.
Abraços da autora;
Babi Sah ♥