16 setembro 2014

Tutorial como Personalizar Data no Blog

   Oi Gurizada, tudo bem!?
 Sei que muitas de vocês tem a vontade de personalizar seu blog para ficar a sua cara, no ínicio quando não entendia nada jogava no google procurando tutorias mas as vezes não encontrava. Então decidi começar a fazer tutoriais, para ajudar a minha gurizada a personalizar seus blogs.
 Vamos começar com um tutorial básico mas que fica lindo que é a Data Personalizada, eu acho muito fofo e é muito fácil de fazer. Vamos lá!


O primeiro passo é o mais simples:
                                                   Configurações > Idioma e Formatação
  Depois que fizer isso mude as opções que estão destacadas com a cor rosa claro, como está na foto (claro que na data que vocês estiver fazendo isso).



O passo dois é facíl também é só prestar atenção:
Modelo > Editar HTML > Ctrl + f 
Procure por   .main-inner h2.date-header {

Abaixo cole isso:

font: normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #ffffff;/* cor da fonte da data */
background: url('URL DO BACKGROUND');
background-repeat: no-repeat;
text-align:center;/* alinha o texto */
font-family: 'NOME DA FONTE', sans-serif;
font-size: 18px;
width: 80px;/* largura */
height: 80px;/* altura */
float:left;
margin-left: -55px;
margin-top: 5px;
padding: 9px 1px 2px 1px;
overflow:hidden;
line-height: 18px;
word-spacing: 25px;
}  

 Onde está escrito 'URL DO BACKGROUND' substitua pela url da imagem que você que que seja o fundo da sua data.
Algumas imagens para vocês usarem:




URL primeira imagem: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpKQKaF4Om5_d4UdPt6uJjAgv5pkLUnFCSqO9zxNsJ-9rGVR7HfKVg3o-JQHD6a6SAz6-Ed4XaBO5Ep8OjLpYzK3WCChtJs8uPE5Feah0GVQqu0js4tZfQ0SM-2bhdSgJ8wpwvOeIuzrLR/s1600/daeee_c_pia.png
URL segunda imagem:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5PvGrKdQiHHn36wy0DEu1g4h1RUPxKX_JkC2oQTdVmqRKy3BwCMaucMMWFbt3-EZlnCWCRI5tNJWdCGaibwAIuQSSpVKmRxwNHz0zkjRlVtJZHY7ChIGFEkFT9GkYJFxmngGxS1EYBaZG/s1600/daaa+c%C3%B3pia.png
URL terceira imagem:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT6wgbUSVhcOTqdlguP_FkSUXBr8IQ8YU2MrYonJaNUGcyLLRqzcdrXrCqiR8hDDaaFuEJzWJQLYJROOPeqJe6lfLygU5UyG6kwYl7iblKnCkcSYW1U6B4Dn9Cina_75uzSjwkFPfJ-o85/s1600/data+lateral+rosa+2.png
URL quarta imagem:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKpWuLBfMmTGF4oyKv8Blwh6Kddn9MoT6FlshnBrWM24ov3ssPAmtLNgQ5TuFk-Etb2TiCzFzBnnzeTS4D-cS6M1X83Cqp9i0_fODGxTSsFwwzn2jevxScrX_OtUdODgjdSEaK24hrMtIz/s1600/dataaahh.png
URL quinta imagem: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhET9OPZ2XqSvhK_r9AZDk3f26PtdJxSVFAOG5MkB_HdBh8-Pl1ZcJLiapUv_FYEeH2eTV9XwAs_hJLqwAW1e2XN-K7Skwej0jrw-IJsCZWE_X3ZkjhsSDVSQI0Fc2uPvSPj4NvrBjV30fN/s1600/date-2.png
URL sexta imagem:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKHEhOfGxTGJjotj_NwpgSNOs2OQUJ3BuCYNp9mFXexpwnW4afRKC5ippqaGMvSoNX2Kk5FuRV_8hLDIVCHizHpSBHwBmzGbQD8MKgwXLLrGz0HiNkeuwmje0UpyHMioeQtje5oyCPmcnN/s1600/Pink.png

  São esses os modelos, o que eu uso aqui no blog fui eu que fiz, então você também pode fazer o seu.
    Amores gostaram ? Eu espero que sim compartilhem e comentem, para mim poder ver que vocês gostaram para poder fazer mais. Beijos até a próxima.




Nenhum comentário:

Postar um comentário