Template - Códigos Básicos

Me disseram na ask que eu plagiei o blog de alguém. O próprio dono reclamou, mas estava no anônimo. Acho que era apenas para irritar, mas se souberem se foi verdade, poderiam me dizer para que eu pudesse creditar sabe-se lá o que?

Yoi, anjos :3

Eu sempre tenho muita coisa para dizer nas introduções, mas como não quero que fique grande, fico apagando o tempo todo o que digito, e escrevo só uma parte. Acabo escrevendo só besteiras, sabe. Ontem eu fui no cinema com a minha amiga (na hora de ir embora, nos perdemos uma da outra). Eu tinha a intenção de já comprar meu ingresso para The Sea of Monsters, mas não estava vendendo ainda :c Ah, comecei a ler Harry Potter :3 Por e-book ;w;'

Uma das dicas que eu recebi, foi dar dicas de como fazer um template. Gostei muito dessa ideia, então preparei um post que espero não ser tão grande quanto acho que é com muitos tutoriais. Espero que a postagem seja útil. Se eu catei algum código de algum blog, os créditos estão no final, claro.

1 // Blockquote em hover

Vá em Modelo > Editar HTML e procure por ]]><. Feito isso, cole acima dessa tag o seguinte código:

blockquote { background-color: #f0f0f0; /* Background */ border-right: 10px solid #000; /* Cor da borda */ border-left: 10px solid #000; /* Cor da borda */ letter-spacing: 2px; font-size: 8px; font-family: silkscreen; color: #000; /* Cor da fonte */ text-align: center; -webkit-transition-duration: .0s; padding: 3px; } blockquote: hover { background-color: #f0f0f0; border-right: 2px groove #aaaaaa; /* Cor, tamanho e tipo da borda hover */ border-left: 2px groove #aaaaaa; /* Cor, tamanho e tipo da borda hover */ letter-spacing: 0px; font-size: 8px; font-family: silkscreen; text-align: center; color: #000; /* Cor da fonte hover */ -webkit-transition-duration: .37s; } @font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

2 // Centralizar título das postagens

Vá em Modelo > Editar HTML e procure pela tag h3.post-title { e abaixo dela, cole:

text-align: center;

3 // Post-footer personalizado

 Seguindo o mesmo processo de Modelo > Editar HTML, procure novamente por ]]>< e acima da tag, cole:

@font-face { font-family: "pixel"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); } .post-footer-line-1 { border-top: 1px dotted #aaaaaa; /* Tamanho, cor e tipo da borda */ border-bottom: 1px dotted #aaaaaa; /* Tamanho cor e tipo da borda */ text-align: center; /* Alinhamento */ font-family: pixel; font-size: 8px; } post-footer-line-2 { border-top: 1px dotted #aaaaaa; /* Tamanho, cor e tipo da borda */ border-bottom: 1px dotted #aaaaaa; /* Tamanho, cor e tipo da borda */ text-align: center; /* Alinhamento */ font-family: pixel; font-size: 8px; }

4 // Tooltip personalizado

Realize novamente o processo de Modelo > Editar HTML e procure por ]]><. Feito isso, cole acima da tag o código a seguir. Edite como quiser.

div#qTip { margin: 3px; padding: 6px 10px; border-right-width: 2px; border-bottom-width: 2px; display: none; color: #000; background: #cfc8d7; font-family: pixel; font-size: 8px; text-align: left; position: absolute; z-index: 1000; box-shadow: inset 0 0 4px #937b99, 0 0 4px #937b99; text-transform: uppercase; pacity: 0.9; -webkit-transition: all 0.2s linear; moz-transition: all 0.2s linear; o-transition: all 0.2s linear; }

5 // Faixinha nos gadgets
Esse é um dos três modos de colocar faixinha nos gadgets, e de longe o mais fácil de todos. Vá em Modelo > Editar HTML. Clica naquela famosa primeira setinha, e pesquise por /* Mobile
Agora, antes de body.mobile, cole o código a seguir, e o edite.

.sidebar .widget h2 { background: url (insira aqui o URL da faixinha) no-repeat left; /* Dependendo de onde sua faixinha será ancorada, mude left para right */ text-align: center; /* Troque se quiser o título alinhado de outra maneira */ margin-top: -2px; margin-left: -19px; margin-bottom: 0px; padding: 15px; width: 150%; overflow: hidden; }

 Os margins são a parte mais chata. Vá alterando os números e visualizando, até que a faixinha esteja posicionada da maneira que você quiser.
6 // Leia mais personalizado

Vá em Design > Editar HTML, procure por ]]>< e acima do trecho, cole o seguinte código:

.jump-link { text-align: left; /* posicionamento do leia mais */ margin-top: 5px; /* espaço que fica entre o leia mais e a postagem */ } .jump-link a { padding: 4px; /*acolchoamento entre o fundo e o texto */ color: #000000; /* cor do texto */ background: #dfdfdf; /* cor do fundo */ font-family: verdana; /* tipo de letra */ -moz-border-radius:  6px; /* bordas arredondas */ -webkit-border-radius:  6px;  /* bordas arredondas */ border-radius: 6px;  /* bordas arredondas */ }

Eu selecionei apenas estes códigos, acho que é apenas o básico mesmo. Espero que seja útil. c: Acho que ainda hoje volto trazendo alguma coisinha básica. Um utilitário, ou a segunda aula do idioma japonês, mas isso apenas se eu não começar o novo layout do blog. Esse já está me enjoando. Aliás, amanhã começam Os Jogos Vorazes. Com isso eu digo as aulas, porque é algo muito semelhante q

Créditos: Kawaii World, pelo leia mais personalizado,

Dazzle, pelo tooltip personalizado, 

e Cute Ayumi pelas faixinhas nos gadgets.