- o que ando a ver -
환영합니다 (bem vindo) ao Just Bubble Days, quer estejas de visita, ou já sejas um leitor daqui. Espero que gostes do espaço e não te esqueças de deixar um comentário quer seja para criticar ou dar sugestões, pois é pela tua presença que me dá prazer de estar por cá.
Viciada em música, apreciadora da moda sul-corena, apaixonada por fotografia e fascinada por linguagem web... Sou a única postadora e autora deste espaço. Podes-me tratar por Mei Bubble ou simplesmente por Mei, tu é que decides e seguir-me nos link's em baixo.

17/01/15

Modelo para data #1

Olá pessoas!! Como é que estão? Espero que estejam melhor do que eu, é que onde eu moro o tempo está frio e com muita chuva, ó sol volta T^T, não dá vontade nem de sair, e para piorar eu acho que estou a começar a ficar doente estou a começar a ficar com dor de cabeça e tenho uma tosse chata e irritante, acho que o meu irmão me pegou a gripe, aquele malvado (^)

Mas sem maçar-vos mais, hoje decidi deixar-vos o primeiro tutorial criado por mim aqui no blog *palmas*, na verdade eu criei-o para usar num layout que eu irei disponibilizar, mas só mais lá para a frente, até porque nem está completo...mas, se tiverem curiosidade podem dar uma vista de olhos aqui (www), a preview do tutorial também está lá... mas então passando ao tuto.

É bem simples apenas tens de ir ao Modelo > Editar HTML > clicar em Ctrl+F > e procurar por ]]></b:skin> quando o achares só tens de colar o código de baixo acima do que achaste.

.main-inner h2.date-header {
/** Tutorial blog Just Bubble Days **/
float: left; /** Data lado esquerdo, pode mudar para right ou center **/
width:50px; /** Largura **/
height:50px; /** Altura **/
font-size:15px; /** Tamanho da fonte **/
color: #fff; /** Cor da fonte **/
text-align:center; /** Alinhamento do texto **/
padding: 5px 5px 5px 5px; /** espaço interno: topo, direito, embaixo, esquerdo **/
-webkit-border-radius: 10em; -moz-border-radius: 10em; /** borda redonda **/
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZriJol7CfCNLGZkfHQCSAXQNAAcb7hAOsr7nxJHiglCFIDcStZK7JED9v6uM-A0UF8onpFW3nDZnZYvPmqu5vHPeZeXyygx-uLdPZODQAg8VI6VmeIWTymhl5CnmJtxfyqkD42JzZNpg/s1600/128.png")  repeat; /** Imagem de fundo **/
margin-left:44.5%; /** Margem da esquerda **/
margin-top:-30px; /** Margem superior **/
margin-bottom: -65px; /** Margem Inferior **/
line-height: 100%; /** Ocupação do texto na linha **/
font-family: 'Calibri', cursive; /** Fonte do texto **/
font-weight: none;
text-shadow: 1px 0px  0px #515151; /** Sombra do texto **/
}
.main-inner h2.date-header:hover {
background: #de5566; /** cor do fundo **/
text-shadow: 1px 0px  0px #515151; /** Sombra do texto **/
}

Bem é isso, simples assim, também podes alterar o que quiseres no tuto mas cuidado, senão vira uma salada russa, e também não te esqueças se reblogares coloca os créditos, até!

Sem comentários:

Enviar um comentário

Seguidores