![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJcwCriGENlLl8xNz0qgbYIKWE8KLGiIXcFuo5ZGcETF93TI34aIP69ur-lkm7KVPJ7TNig0VfrsO-AykihX-XeR45YKTxTXd4wrHP_tY4TEpmCr08GjZQGa1u61BXU1Cu_id0D3uEOxY/s1600/agenda.jpg)
1.Primeiro faça uma imagem para usar como plano de fundo da sua data. Se quiser, pode usar a imagem que eu uso, ou usá-la como base:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrCK4yLF4zvltcvMKi9mec0n2TrTE05um7ITlwzdTHzYWXSNSQmld8wJQ01Y36-Vtt0AgEHJj1B3pGLBQOe2mmDjWAC_MbOU2lYLX4bXTwnwJy_BjcGsDsFtHQZZhK39UMmGqjH5b8ktA/s1600/planodefundodata.png)
2.Agora, no seu blog, vá em Configurações, Idioma e Formatação, Formato da Data, e escolha a opção 09 março 2012.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBocBIz8mjb7ppBHdsFuKPwpBkspKQEFY51Ni6QmvpLdgxvOVTAEOgueGF6BdYJx-t6oxezisWU4OJBdU6mYBbPfRz9qgQhgFDBoeaK_nOEGP_DNBQV3lEfgYi-iLdAS-MGH9bL3jh3TM/s1600/formato.jpg)
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Você poderá encontrá-lo 2 vezes. Na segunda vez é o que importa (aperte as teclas CTRL+F para procurar o código acima, depois clique em próxima). Quando encontrar pela segunda vez, substitua essa linha por:
<div id='Data'>
<script>trocarData('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='Data'>
<script>trocarData('');</script>
</div>
4.Procure por </head>, e acima disso, cole estes códigos:
<script type='text/javascript'>
//<![CDATA[
var DataCalendario;
function trocarData(d){
if (d == "") {
d = DataaCalendario;
}
var da = d.split(' ');
dia = "<strong class='data_dia'>"+da[0]+"</strong>";
mes = "<strong class='data_mes'>"+da[1].slice(0,3)+"</strong>";
ano = "<strong class='data_ano'>"+da[2]+"</strong>";
document.write(mes+dia+ano);
DataCalendario = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* Data tipo calendario
----------------------------------------------- */
#Data {
background: transparent url(URL da imagem) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -70px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.data_mes {
display: block;
font-size: 15px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-1px;
text-align:center;
color:#ffc4f4; /* Cor do mes */
}
.data_dia {
display: block;
font-size: 28px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do dia */
}
.data_ano {
display: block;
font-size: 10px; /* Tamanho da fonte */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do ano */
}
</style>
</b:if>
5.Personalize o código:
background: transparent url(URL da imagem) no-repeat;=Acrescente o endereço da imagem que vc irá usar como plano de fundo da data ou não acrescente nada para aparecer só o texto.
width:60px e height:60px= Altere os números de acordo com o tamanho da imagem de plano de fundo.
float: left= posição esquerda ou direita (right).
margin: 5px 2px 0 -70px= Altere -70px por 0px se quiser que a data apareça dentro da postagem ou altere -70px para outros números posicionando a data para mais perto ou mais longe das postagens.
Espero ter conseguido explicar direitinho como eu aprendi aqui (créditos).
Beijus.
Vlw :3
ResponderExcluirOwnt, que bloguinho kawaii
keionbuotaku.blogspot.com
http://japaninrock.blogspot.com/
Ah que lindo Roberta *-*
ResponderExcluirVc poderia fazer um dia, um post sobre como fazer essa Gadget flutuante de recadinhos e de como personaliza ele?
Não quero dar trabalho, é um só um pedido T-T
Kissus
Fica muuito fofo!! *-*
ResponderExcluirSempre quis deixar a data assim, mais eu tenho um pouco de preguiça, haha' xD
Amoo seu blog, é muuito kawaii <3
Beijoos ~ Bibi
harajukucriativa.tk
Oiiie!
ResponderExcluirAmei seu blog, é a coisa mais cute que vi *--*
Peguei alguns tutos e coloquei os devidos créditos :]
Bjos
http://luka-megurine.blogspot.com
Muito obrigada a todos!!!
ResponderExcluirFico feliz com a presença de cada um aqui!
Sintam-se a vontade para usar e compartilhar o conteúdo daqui ok :3
Sato-Chan, publiquei este tutorial aqui:
ResponderExcluirhttp://reinokawaii.blogspot.com/2012/01/gadget-fofo-com-slide-verticalmapeando.html
No caso do que uso atualmente, adicionei apenas um plano de fundo para a C-box, editei o tamanho de acordo com o tamanho da imagem, e o background transparente; depois adicionei o código da C-box na área do HTML ^^
Sinta-se a vontade para perguntar sempre que houver alguma dúvida ok :3
Beijus.
Nossa muito obg fiz este tutorial muirtas vezes,mas so o seu funcionou!
ResponderExcluirteenage-dreamblog.blogspot.com
Quando eu tiver tempo vou deixar assim!Seus posts são incriveis e ajudam muitooo blogueiros hihi!bjss
ResponderExcluirhttp://www.cotidianodeumabarbie.blogspot.com/
Amei, o unico de tudo o que eu procurei (e forma muitos) que eu consegui *--* obrigaada!
ResponderExcluirMais uma coisa, como se coloca o dia em cima do mês, não estou conseguindo!
Beijooos,
gabi.viieira@hotmail.com
:v:Amanda, nesse tutorial dessa postagem, o dia fica em destaque mesmo, o mês em cima.
ResponderExcluirEsse que uso atualmente eu não sei te explicar como é feito, mas o consegui no candylland.net, site da Giza Veiga. É um código que ela disponibiliza para aplicar estilos em postagens e já veio com a data assim.
Beijus e obrigada:cat:
Amei esse tutorial!
ResponderExcluirEu estava procurando por ele a meses!
Arigatou!
Ah, já estou seguindo!
Amei o blog!!!
Kisses!
Obrigada... deu certo!! Acho que é um dos únicos que da tudo certo..hehe... Fã do seu Blog!
ResponderExcluirFoi muito difícil encontrar essa postagem, sugiro que vc coloque uma tag assim: (data do post em forma de calendário)... pois demorei 3 dias pra encontrar nas pesquisas... Bjsss
ResponderExcluirgostei muito do totorial obrigado por me ajuda .
ResponderExcluirAmo visitar esse blog, me dá paz em ver tantas coisinhas kawaii!!!
ResponderExcluirMas estou injuriada, procurei em todos os lugares, não só aqui mas pelo menos umas 18 páginas de busca do google algum tutorial que eu conseguisse modificar minha data no blog que estou fazendo, porém não achei nada, todos os códigos que usei, testes e retestei não funcionaram não sei se é pq meu template eu fiz pelo Artisteer...
Estou usando muitas coisas daqui no meu blog, logo que conclui-lo darei os devidos créditos ok?
Bjos =**
Muito obrigada e me alegra muito sua presença ^^
ExcluirTalvez dê certo com o código mais recente que postei nos Tutoriais que mostra um outro jeito de fazer Data em Forma de Calendário.
Obrigada uma vez mais e beijus ;3
Muito Bom, já tentei milhares de vezes e só consegui no seu post!
ResponderExcluirBrigada, bjus ;3
Brigada adorei , seu blog é muito fofo adorei ele ..
ResponderExcluirhttp://meeuumuunndoo.blogspot.com.br/