Barbie Seu Mundo Pink: Tutorial ~ Personalizando: Post-Footer e Tooltip
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:
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:
border-left:1px dotted #8FC5CB;
border-right:1px dotted #8FC5CB;
border-bottom:1px dotted #8FC5CB;
border-top:1px dotted #8FC5CB;
padding:3px 3px; }
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:
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 */}
.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:
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:
Antes do código acima cole:
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♥
#Blog #2016,
Mariangeles-F14 de janeiro de 2016 15:14seu novo layout é muito fofomariangeles-f.blogspot.comResponderExcluirRespostasBabi Sah ~☆15 de janeiro de 2016 16:13Obrigada flor.~abraços ♥ExcluirResponderAll4 Barbie14 de janeiro de 2016 16:19Hello from Spain: fabulous tips.. We keep in touchResponderExcluirRespostasBabi Sah ~☆15 de janeiro de 2016 16:24Thank you coments ~abraços ♥ExcluirResponderThacy Mendes15 de janeiro de 2016 00:12Amo esses tutorias, da proxima vez que eu for renovar o meu blog passo por aqui. :DBJS!!!http://adolescenteonlineoficial.blogspot.com.br/ResponderExcluirRespostasBabi Sah ~☆15 de janeiro de 2016 16:27Também amo, são detalhes simples que fazem a diferença =)~abraços ♥ExcluirResponderDani Silva15 de janeiro de 2016 12:03Que blog fofo! É bem legal personalizar o post-footer!www.expectativasreais.com.brResponderExcluirRespostasBabi Sah ~☆15 de janeiro de 2016 16:28Obrigada flor <3 Também acho super legal essas personalizações.~abraços ♥ExcluirResponderValentina Mendes17 de janeiro de 2016 19:13Otimo tuto hahaha ~ Sempre bom dar uma mudadinha e deixar a sua cara o blog né hahah.. www.valentinices.comResponderExcluirRespostasBabi Sah ~☆20 de janeiro de 2016 20:05É sim haha, obrigada pelo comentário.~abraços ♥ExcluirResponderCamila Lima18 de janeiro de 2016 13:41Adorei a dica... super útil.Beijos Blog Segredos da Cáh Instagram Facebook Canal do You TubeResponderExcluirRespostasBabi Sah ~☆20 de janeiro de 2016 20:05Que bom flor, obrigada pelo comentário.~abraços ♥ExcluirResponderAlly19 de janeiro de 2016 17:25Amei 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,BipolaridadesResponderExcluirRespostasBabi Sah ~☆20 de janeiro de 2016 20:24Obrigada, que bom que gostou; verdade dão um charme e tanto. Obrigada pelo comentário flor.~abraços ♥ExcluirResponderAdicionar comentárioCarregar mais...