HTML Base para Templates

Segue o link de HTML Base para seus templates, lembrando que este é um template com 1 barra:

http://pastebin.com/KBf4n8rK

Clique em mais informações para explicações:

Como Editar seu HTML Base

No topo do blog está disponibilizado o HTML Base para vocês usarem na hora de fazer o template de seus blogs, certo? 
Bom, alguns trechos que devem ser editados por vocês deixaram de ser comentados e, por isso, criei este post. 

Como Fazer um Título de Gadget para seu Template

Olá pessoal!

Hoje, irei ensinar vocês a fazer um Título de Gadget para você colocar em seu template. Bom, irei usar o Adobe Fireworks CS4 (qualquer versão serve). Primeiro, abra um novo arquivo (Ctrl + N) e coloque as dimensões de sua preferência:

Como Fazer um Cabeçalho Solto ao Corpo

Bom, no blog já tem um tutorial de cabeçalho. Mas é preso ao corpo, ou seja, não tinha junção com a sidebar e também ocupava todo o tamanho possível de sua imagem. Assim:

Agora, terá duas diferenças. 1ª - Terá uma continuação da sidebar, fazendo como uma junção entre as duas partes do template. 2ª - O cabeçalho será arredondado e não ocupará as extremidades da imagem, com fundo transparente. Bom, vamos começar:

Como Fazer Sidebar com 2 Barras

Para fazer a sidebar do nosso blog com o Fireworks CS4 você irá abrí-lo e clicar em New Document. Coloque as seguintes dimensões:

Width: 982

Largura: 100 (de sua preferência)

Com tudo aberto, iremos clicar na Retangle Tool e fazer um retângulo ocupando toda a altura, porém só uma parte do largura que iremos ajustar o tamanho dele depois de criá-lo, mais ou menos assim:

Como Fazer Cabeçalho Junto ao Corpo

Bom, como fazer um cabeçalho foi o tutorial vencedor na nossa enquete, então vim trazer ele aqui. Não se esqueça, ainda terá o tutorial de cabeçalho solto, não grudado no corpo. Vamos começar, primeiro abra seu Fireworks.
Atenção: Todos os tutoriais que faremos de sidebar, rodapé e etc será para colocar no HTML Base disponibilizado nesse link, por isso, as dimensões serão sempre de 982 pixels de largura.

Como Linkar Partes de um Cabeçalho / Como Fazer um Menu Linkado

Usaremos duas coisas para fazer, o Adobe Fireworks CS4 e um site chamado Image Maps. Esse site tem a mesma função que o DreamWaver, mas considero ele bem melhor, pois é online e mais fácil de ser usado. Vamos começar...

Como Fazer um Menu com Efeito

A pedido do Conrado, eu, Nemon1, estarei passando-lhes um tutorial de como se fazer um menu com efeito. Primeiramente, o programa que iremos usar é o Dreamweaver (o que será apresentado nas imagens abaixo é o da versão CS4, mas você pode usar outras). Abra-o como um documento HTML:
OBS: link para download do DreamWaver no final da postagem.

Como Fazer um Rodapé com Gradiente de Transparência

O tutorial de hoje será de rodapé. O toque diferencial que eu vou dar nele será um efeito de gradiente de transparência, ou seja, ele vai sumindo para um dos lados. Vamos começar!

Como Fazer Raios de Luz

Bom, algumas pessoas me perguntaram como que faz o efeito que tem atrás do pinguim do rodapé do blog. Eu sabia de um jeito muito difícil, então, esperei descobrir a maneira mais fácil para ensinar à vocês.

Como Fazer um Botão de Voltar ao Topo

Hoje irei ensinar como fazer um botão de voltar ao topo (início do blog), semelhante a este do blog. Existirá duas etapas. E eu criarei a imagem com o FireWorks, mas vocês podem usar o programa que preferirem. Vamos lá:

1ª Etapa

Abra seu FireWorks e ponha o tamanho que acharem melhor. 130 por 60 pixels é um bom tamanho para começar. Então, faça o retângulo, seta ou qualquer elemento que prefira.

Agora ponha o texto e/ou imagens para finalizar a figura:

Lembre-se de deixar o fundo transparente:

Agora salve sua imagem e hospede-a onde preferir (recomendo http://imgur.com/). Vamos agora para a segunda e última etapa:

2ª Etapa

No seu painel do blogger, clique em Design (abaixo do nome do blog) e depois adicione um gadget em qualquer lugar. Selecione o tipo: HTML/JavaScript. Acompanhe:

Então bote este código no lugar de escrita:

<div style="position:fixed; bottom: 0px; margin-right: 6px; right: 0px;"><a href="#" title=""><img src="LINK DA IMAGEM" border="0" /></a></div>

No lugar onde está escrito LINK DA IMAGEM, bote o Direct Link da imagem hospedada (não remova as aspas). E a parte branca você pode ajustar o número conforme o comprimento que deseje para a margem. Deixe o resto como está e salve o gadget.

~Conrado

Efeitos de Texto - Fireworks

Vim apresentar-lhes alguns efeitos para aplicar em textos. Poderá usar na escrita de menus, rodapés, etc. Vamos começar.

Como Fazer Efeito de Espelho

Bom, vou ensinar a fazer um efeito para você colocar nas suas escritas, podendo aplicar em seus by's, cabeçalhos e quase tudo que há texto. Usaremos o Fireworks, vou começar com o efeito de espelho, chamado também de reflexo.

Como Fazer Barra de Novidades

Como fazer

Eu estarei utilizando o Fireworks cs5 para realizar a barra de novidades. Primeiro, abra um novo documento com a largura de 982 e a altura de 75. Muito bem, agora é só realizar a sua barra de novidades como quiser, essencialmente por gosto. Eu fiz uma barra e deixei ela editável no Fireworks cs5. Para pegar a barra clique aqui. Deixei a barra editável para facilitar as coisas se houver algum problema. Após acabar com a parte de edição de design, vamos aplicar a barra de novidades do blog.