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♥