3 estilos de gadgets

Hello ~ Desculpem a sumidinha, mas é que final de semana eu fico de babá do meu irmãozinho, pelo menos eu consigo faturar 50 reais com isso, gehee. E para quem não sabe ainda, a Júlia está na praia, onde ela tem uma conexão de internet horrível, por isso não consegue acessar os blogs, ela me disse que irá voltar no dia 28 com uma surpresa, uma das boas. Sobre minhas aulas, não sou de me socializar, as vezes até me sinto melhor assim, converso aqui e ali, mas não muito.

Estou atendendo a um pedido do blog, que eu não sei quem foi, pois foi a Ju que me contou que haviam pedido. Esses 3 estilos foram eu que criei para eu mesma, não vejo mau algum em disponibilizar isso, eu criei né, e são todos lindos -humildade?-, gehee. Espero que gostem ^^

Enquanto modificava para postar, criei uma página de html no tumblr, vou deixar aqui, mas também irei colocar imagens, vai que sai do ar né. Estava praticando para poder vir ensinar aqui, então já sabem o que vai ser no próximo post.

.gadget { line-height: 1.8em; margin-bottom: 20px; color:#333; text-align:justify; font: 11px Arial; background:#fff; padding: 8px; color:#000; border-radius: 5px; width:240px; }

.gadget-title { margin: 0; font: italic 19px trebuchet; text-transform: lowercase; letter-spacing: -1px; padding: 0px; color: #; /* cores: e8b2c4 ou bea9bf */ }


.gadget { text-align: justify; font: 12px Tahoma; color: #696969; line-height: 20px; margin-bottom: 30px; background: #212121; border: 4px solid #141414; padding: 7px; width:240px; }

.gadget-title { font: normal normal 24px cedarville; color: #ABABAB; margin-bottom: 10px; margin-right: -7px; margin-left: -7px; margin-top: -7px; padding-left: 7px; padding-right: 7px; padding-top: 0px; padding-bottom: 0px; background: #141414; text-align: center; }


.gadget { margin-bottom: 30px; text-align:justify; font: 8px Seven; border: 1px solid #E3DEFF; background: #EAE6FF; padding: 5px; color:#B6B1CC; width:240px; }

PS: o nome da 'class' (gadget e gadget-title) vai depender de você, pode mudar para o que você usa em seu blog, eu usei esse enquanto fazia o teste.

Cara, como eu acho os meus tutoriais e materiais enrolados, se alguém teve dificuldade de entender, por favor, me avise, por favor mesmo. E outra coisa, só por que você trocou a cor e colocou uma sombrinha na letra, que o código vai passar a ser seu, credite, também não é permitido que redistribuam.

Até mais, até a próxima ^^

Modelo base de post footer

ATÉ PARECE... + MODELO BASE DE POST FOOTER

Olá, amores! Pensaram que em algum momento conseguiriam se livrar de mim? Eu não consigo ficar longe de vocês, é sério... E também não quero abaixar a minha cabeça para todas as pessoas que falaram mal de mim e etc, dizendo isso e aquilo de mim. Sou assim, não posso negar. Sensível em uma hora, tentar ser forte em outra, me acostumei com isso... Espero que não estejam bravos comigo *3*

Para minha postagem de volta (?) - mesmo a maioria nem tendo visto minha postagem de despedida da blogosfera, toda cheia de coisas que não aguento mais - eu estou trazendo um modelo base para post footer, ele é simples e vocês podem editá-lo como quiserem, dando os devidos créditos para o TP e e se forem postar algum modelo de rodapé com essa base, credite mesmo que esteja tudo modificado ~

Código do post footer:

.post-footer {
margin-top: 10px; /* espaço entre o rodapé e o post */
padding: 0;
 }
.post-footer-line-1, .post-footer-line-2 {
border-top: 0.8px solid #DFDEDB;
border-bottom: 1px solid #DFDEDB;
border-left: 4px solid #DFDEDB;
border-right: 4px solid #DFDEDB;
background: #F2EFF0;
color: #666666;
text-shadow: 0.5px -1px #d6cdcc;
font-family: Georgia;
font-style: italic;
font-size: 11px;
text-align: center;
padding: 1px 1px; /* Espaço entre o texto e as margens */
text-transform: lowercase;
word-spacing: .1em;
 }

Como fazer previews

TUTORIAL - COMO FAZER PREVIEWS

Hello ~ Sumi um pouquinho, desculpem, andei um pouco ocupada, mas nada demais. Agora vai começar o carnaval, eu preferiria ir para escola todos os dias, seria melhor do que ficar em casa para mim, de qualquer forma, espero que todos tenham um bom carnaval. Eu queria ir na praia, mas desisti por causa desse sol inteiro, vou esperar a páscoa que já será outono e3e

Eu já havia prometido este tutorial na ultima postagem, então aqui está ele. Quem é do grupo do Tea Party já sabia que eu ia postar e até já sabem sobre o que será o meu próximo post. O tutorial é um pouco complicado sim, mas se prestar atenção vocês vão conseguir fazer, pois isso recomendo reler o máximo de vezes que der e comentar se ainda tiver dúvidas.

Dica - Para fazer, eu recomendo que faça algum programa de texto especial, eu uso o Notepad++ que ele deixa o html colorido (print) e dá para ver onde acabar e termina tudo, também pode salvar como no bloco de notas normal, mas mesmo assim, em ambos os programas, precisa salvar em .html. Assim que salvar, é só abrir o arquivo .html na internet/chrome, e você verá o preview.

Para hospedar, eu uso o tumblr. Atualmente, não dá para por lá no mesmo lugar das imagens, você precisa criar um tumblr, ir na personalização dele, criar uma página e escolher 'layout personalizado' e pode começar a fazer a preview (print), pois o HTML vai estar zerado, ou se já tiver feito num dos programas que eu citei, apenas cole e copie tudo lá.

Ewwww ~ O tutorial acabou, sqn. Já sabemos como hospedar, mas e para fazer? Se a pessoa já sabe como fazer um html já está bem, mas como eu penso em todo mundo (/apanha), fiz um modelo, podem editar ele sem problemas. Qualquer dúvida, podem falar comigo pelo face (/hitori.haley) ^^ 

Preview

itálico - explicações

<html>
<head>
<title>Nothing</title> /* Título que fica na aba lá em cima */
<style> /* Onde irá colocar os códigos de personalização */

@font-face {font-family:"contribute"; src: url('http://static.tumblr.com/q54tzar/SYim21ewv/contribute_free-version_1_.ttf'); }
body { background: #eee; font: 15px calibri; text-align: center; }

#content { background: transparent; width: 900px; font: 50px contribute; padding: 10px; margin: auto; } /* Engloba a Cabeçalho e a parte onde fica o texto */

#header { padding: 10px; background: transparent; width: 880px; margin-bottom: -25px; } /* Codigo de personalização do cabeçalho */

#main { padding: 10px; background: #fff; width: 880px; font: 11px calibri; text-align: justify; border-radius: 10px; } /* Codigo de personalização de onde fica o texto */
</style>
</head>
<body>

<div id="content">
<div id="header">
Cabeçalho
</div>
<div id="main">
Onde vai colocar o código já do menu/seiláoque já sendo utilizado </div>
</div>
</body>
</html>