MATERIAL: MODELO BASE PARA AGENDA

Oioi gente! Tudo bem com vocês? Por aqui está tudo bem, apesar de certas coisas que estão a passar-se aqui pela blogosfera estarem realmente a perturbar-me. Não vou referir nomes, porque penso que não é preciso, mas vocês sabem perfeitamente que existem certos indivíduos que estão a tornar este mundo para o qual eu tanto quis entrar um pouco mais negro. Mas enfim, Vamos lá ao que me trouxe aqui que é isso que interessa! :D

Bem, até agora postei apenas só tutorias de como fazer algumas coisas, nomeadamente separar as postagens e a barra lateral. Hoje vou-me estrear nos materiais, apresentando-vos agora um modelo muito básico para a a agenda os vossos blogs.

^
LIVE PREVIEW

1º PASSO

Dirige-te ao HTML do teu blog e procura, com a ajuda do CTRL + F, ]]></b:skin>. De seguida, cola acima do código procurado o seguindo excerto:

@font-face {font-family:PF Arma Five; src: url(http://static.tumblr.com/bq1ajtf/fFxn308l7/pf_arma_five.ttf) format("truetype"); } 

.agendadata {
background-color: #F781BE;
color: #FFFFFF;
text-align: center;
font-family: PF Arma Five;
font-size: 8px;
height: 18.3px;
width: 50px;
padding-top: 5px;
} 

.agendainfo {
color: #BDBDBD;
text-align: left;
font-family: PF Arma Five;
font-size: 8px;
height: 18.5px;
width: 100px;
padding-top: 5px;
margin-left: 60px;
margin-top: -24px;
}

Sendo que agendadata corresponde ao lado da agenda correspondente à data (exemplo: 26/03) e agendainfo ao lado da agenda que corresponde se encontra a informação relativa ao dia (exemplo: Como separar as postagens).

2º PASSO

Dirige-te ao esquema do teu blog e adiciona na barra lateral um widget do tipo HTML/JavaScript. Cole o seguinte código:

<div class="agendadata">05/06</div><div class="agendainfo">Tutorial número 100</div> 

<div style="margin-top: 2px;"><div class="agendadata">05/06</div><div class="agendainfo">Tutorial número 100</div> 

<div style="margin-top: 2px;"><div class="agendadata">05/06</div><div class="agendainfo">Tutorial número 100</div> 

<div style="margin-top: 3px;"><div class="agendadata">05/06</div><div class="agendainfo">Tutorial número 100</div></div></div></div>

E pronto, é tudo muito simples. Volto a referir que este código funciona como base, podendo tu mudares o tipo de letra que desejas, bem como a cor do fundo da data, ...

Digam nos comentários se gostaram do primeiro material que criei para vocês e se gostavam de ver mais coisas deste tipo. Entretanto, eu volto brevemente com mais uma postagem. Muito obrigado por me apoiarem e visitarem o blog. Beijos e abraços :3