12 novembro 2013
Como personalizar a data do blog
Oi gente, hoje eu vou postar um tutorial de como personalizar a data do seu blog.
É bem simples, no seu blog você vai em Configurações> Idioma e Formatação> e marca a penúltima opção.
Pra quem não entendeu tenho essas imagens do Cherry Bomb:
Marque a penúltima opção:
Agora você tem que editar o HTML do seu blog, vá em Editar HTML>Proseguir, depois marque a caixinha "Expandir modelos de widget".
Aperte CTRL+F no seu teclado e procure por </head>
Abaixo de </head> cole o seguinte código:
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>
Depois procure pela primeira linho do seguinte código:
<b:if cond='data:post.dateHeader'><h2 class='date-header'><span><data:post.dateHeader/></span></h2></b:if>
Logo abaixo desse código cole o seguinte:
<a expr:name='data:post.id'/>
Vai ficar assim:
Logo depois procure pelo seguinte código:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Talvez você encontre mais de um, então substitua todos que encontrar por esse:
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
Pra terminar você procura por ]]></b:skin> e logo acima dele você cola o seguinte código:
#fecha {
color: #464646; /*Edite a cor da data*/
padding-top: 5px; /*Margem interna superior da data*/
padding-right: 5px; /*Margem interna direira da data*/
padding-left: 5px; /*Margem interna esquerda da data*/
padding-bottom: 5px; /*Margem interna inferior da data*/
margin-right: -0px; /*Margem externa direita */
margin-left: -0px; /*Margem externa esquerda*/
float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') no-repeat; /*Imagem de fundo*/
height: 30px; /*Altura da imagem*/
width: 30px; /*Largura da imagem*/
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
display:block;
}
Agora você pode alterar o que quiser. Aumente os valores de margin destacados no início do código para alinhar a data onde você quiser. Onde tem URL AQUI, você coloca o URL da imagem
Aqui tem umas imagens, más você pode usar a sua própria.
Créditos: THE PARADISE
Marcadores:
Bella,
Personalizando Blogger,
tuto da bella,
Tutorial
Assinar:
Postar comentários (Atom)
Procure aqui
No Facebook
No Instagram
Seguidores
Na Ask.fm
Tags
Blog Archive
-
2013
(65)
-
novembro(23)
- Efeito - Grey effect no blog
- Como adicionar um widget do Ask.fm a seu site ou blog
- Como Colocar um Gadget de Curtir do Facebook no Blog
- Como Colocar Gadget do Instagram no Blog
- Como trocar o cursor do Blog + Cursores Prontos
- Como personalizar a data do blog
- Como remover o fundo cinza da sidebar modelo viagem
- Como retirar o fundo cinza do modelo Viagem do Blo...
- Colocando Imagem de plano de fundo
- Como colocar um banner no blogspot
- Como remover o gadget “Attribution” (atribuição) d...
- Como colocar barra de compartilhamento no final da...
- Tutorial - Barra de Rolagem Colorida
- Tuto da Bella - Capa para FB ALEX PINK (print)
- Tutorial - Como criar um blog (BLOGGER)
- Tutorial - Como remover o NAVBAR do blogger
- Tutorial - Como fazer e colocar FAVICON
- Tutorial - Como fazer "páginas" no blogger
- Tutorial - Caixinha "Me leva" para blog
- Símbolos/Códigos para Redes Sociais, etc.
- Beleza - Olheiras (Dicas de como elimina-las)
- ~ Aviso ~
- Seja um bom CDC - Dicas
- outubro(9)
- setembro(3)
- agosto(29)
- abril(1)
-
novembro(23)
Nao deu certo :(
ResponderExcluirDá certo sim.. aliás esse foi o único que funcionou quando eu fiz a pesquisa
Excluircara, soh pra vc ficar sabendo: a opcao de "expandir modelos de widgets" nao existe mais. Este tutorial do Cherry bomb ta desatualizado. Tutoriais que pedem pra marcar a caixinha "expandir modelos de widgets" nao funcionam, pelo menos no html do meu blog.
ResponderExcluirSabe Aquelas Flechinhas Do Lado dos Números? É Só Clicar Em Todas Para Expandir
Excluirhttp://criatividadesnamoda.blogspot.com.br/
No meu modelo travel funcionou perfeitamente, é só seguir passo a passo cuidadosamente. E não tem nada a ver isso de que tutorias que pedem para expandir modelos de widgets não funcionarem, muitos funcionam sim, flor! <3
ExcluirA propósito amei o tutorial, tava cansa já de tanto procurar. Obrigada! <3
Valeu!!
ResponderExcluirFiz do jeitinho que você falou e ficou DEZ!
Obrigada!!!
Não deu certo :/
ResponderExcluirNão deu certo também!!! :(
ResponderExcluirNão deu certo tbm. :/
ResponderExcluirobg!!! <3
ResponderExcluirDeu certinho, obrigada!
ResponderExcluirAmei seu blog, estou seguindo *-*
AMei o tuto. Pra mim deu super certo Obg.
ResponderExcluirmythings2.blogspot.com
Não funcionou
ResponderExcluirno meu tbm n deu cert
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirDeu certo , vi tantos esse foi o único que deu certo.
ResponderExcluirO meu aparece isso no blog:a expr:name='data:post.id'/> ,do lado da data queria tirar ,como faço?
vê : http://marianasnuvenss.blogspot.com.br/
aqui so aparece na postagem mais recente ou quando clica para ver só a noticia
ResponderExcluirhttp://camisa20rn.blogspot.com.br/
Funcionou, mas eu usei cor no lugar de imagem! Muito OBG!!! :D
ResponderExcluirBeijão BLOG TANAMODA / MEU ESPAÇO NATURA