1º Passo: O fundo do template.
[~] Abra uma novo documento de 800 x 600.A varias formas de fazer um fundo. Primeira, você pode pegar um background ou uma tesxtura (textura ja disponibilizamos no cond. em breve teremos background tbm.), segunda, você pode fazer o fundo no firewoks como a imagem a baixo esplica ou fazer no photoshop com brushes (pincéis).
2º Passo: A imagem do template
[~] Para facilitar sua vida hoje em dia existem sites que disponibilizam as imagens ja recortadas (va no pra você do side stars e procure psds) mas se voc~e não achar a imagem que você quer ja recortada o jeito e apagar o fundo o deletar com a varinha magica.
3º Passo: Post, Perfil e Etc...
[~] Para fazer os retangulos onde vai ficar o post, perfil e etc basta clicar na ferramenta "Rectangle tool(U)" e fazer os retangulos. Para dar um efeito legal vai la em cima em Filters > Eye Candy 4000 LE > Bevel Boss.
Basic > não precisa mexer em nada.
Lighting > shadow color (clique no quadro preto) > escolha a cor mais próxima do seu retangulo e de ok.
Bevel profile > escolhe o efeito que mais gostar (eu prefiro button)
Quando terminar tudo é só clicar em ok.
[~] Para colocar uns detalhes legais você pode usar brushes do photoshop ou usar aquelas fontes que ja vem com enfeites. Tipo borboletas, flores, corações e etc...
5º Passo: Salvando a imagem
[~] Após fazer a imagem salve-a como template1.gif, após isso abra uma nova imagem de 800 x 10 e abra a template1 que você fez. (Para salvar como gif va em file > Save as... e procure .gif, ao fechar a imagem vai aparecer uma mensagem perguntado sim ou não clique em não!) Clique com o mouse em cima da template1 e arraste para nova imagem até aparecer um quadro azul na nova imagem depois solte:
Depois na imagem nova suba a imagem até ficar só uma linha com o fim do template, deixa bem direitinho nenhum espaço dos dois lados (direito e esquerdo):
Salve a imagem (a linha) como template2.gif (ela vai ser a imagem de fundo do template). Para não ter que salvar a imagem no seu blog salve nesse site que hospeda imagens de graça! Image Shack
Como fazer o código
1º Passo: Propriedades da pagina
[~] Nesse tutorial eu não quero que você aprenda só a fazer o código e sim que tenha um pouco de noção do que é "HTML". A primeira coisa que você tem que fazer é abrir o "Dreamwever" (se não tiver mande um e-mail p/ nós, ta no fim da pagina) depois clique em "Design" no design vai ter uma pagina em branco, esse programa serve para fazer qualquer pagina na internet e é muito facil de usar, ele praticamente faz tudo para você!
[~] La em baixo em "properties" clique em "page properties" vai abrir um quadro nele você vai fazer as seguintes alterações:
Category > Links
2º Passo: Colocando a imagem e os posts.
[~] Agora va em Code perto do Design. La vai ter o código do lay. No código você vai colocar entre <body> e </body> esse código: <img src="o endereço da imagem template1.gif">, depois clique em design de novo. Clique em Common vai aparecer uma opções clique em Layout, vão ter três quadrinhos clique no terceiro. Com ele faça tipo um de retangulo por cima do retangulo do post.
O retangulo:
3º Passo: O código do seu servidor!
[~] Após ter feito os quadros va em code la vai ter <div id="Layer1"></div> Para saber qual dos div's é o perfil post ou etc va em design clique sobre o retangulo e veja no properties em baixo do layer id o que esta escrito. Agora vamos colocar o codigo do seu servidor na area dos posts, os que eu tenho disponiveis são: o do Blogger e o do Weblogger (uol em breve).
Para Blogger:
Para Weblogger
4º Passo: Terminando...
[~] Preencha o perfil, posts e outros retangulos que você fez clique em code copie todo o código e cole no seu blog, lembrando que sempre é bom ter o código do seu blog guardado caso aconteça alguma coisa. Se tiver alguma duvida ou qualquer coisa é só mandar um e-mail!
Obeservação!
[~] Se você for fazer um lay igual o do side com barra de rolagem no post e no perfil não precisa fazer a linha Ok? E na hora de fazer os retangulos va em properties (la em baixo) > overflow > auto.
Tutorial desenvolvido por sidestars.blogger todo tipo de cópia proibida ok?
Duvidas? condominiosidestars@gmail.com
