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 Menu Drop Down

Hoje, mostrarei como fazer um menu que possui guias, isto é, sub-abas em seus links. Para começar, copie tudo do link abaixo e cole em um gadget de HTML/JavaScript no lugar em que o menu ficará. Acompanhe:


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 Mudar a Cor do Rodapé e Cabeçalho das Postagens de seu Blog

Quando os leitores do blog me mostram templates que foram feitos com a ajuda do blog, reparo que a cor do Rodapé e do Cabeçalho das Postagens não combinam com a cor geral do template. Então ensinarei como resolver esse problema de desarmonia em nossos templates, ok?

Não precisa de nenhum programa, apenas mexer no HTML do Template. No entanto, usarei o FireWorks para pegar o hexadecimal da cor do meu template.Para quem não sabe, as cores são definidas pelo HTML por códigos compostos de seis dígitos seguidos por um símbolo: o hashtag ou jogo da velha: #.

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 Botar Bordas nas Imagens de seu Blog

E aí, galerinha! Pedro por aqui mais uma vez.

Um leitor bem presente aqui no blog me pediu um favor.... Como gosto de ajudar vocês resolvi atender o pedido. Ele me pediu o código HTML das bordas coloridas, que muitos blogs tem usado ultimamente. O código é o seguinte:

.post img {
border: 3px solid #114a33;  /* Borda = Altere o número para obter a cor que quiser */
text-align: center;
background-color: #26AC77; /* Fundo. Altere os números ou as letras que vem depois do asterisco para outras cores */
padding: 4px 4px 4px 4px;
margin: 0px 0px 0px 5px;
moz-box-shadow: 1px 1px 10px #00f;
-moz-border-shadow: 30pc;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 5px 5px 0px 0px #cccccc;
-moz-box-shadow: 5px 5px 0px 0px #cccccc;
box-shadow: 5px 5px 0px 0px #cccccc; }

Bom, para colocá-lo no seu blog acompanhe o pequeno GIF abaixo:

Clique para poder entender!

É bem simples! As duas áreas em vermelho são editáveis de acordo com a cor que você quiser.

~Pedro G.

Como Fazer um Fundo de Paisagem

Olá, pessoal!

Nós costumávamos colocar um fundo com listras na diagonal, não é? Mas ensinarei como inserir e configurar um fundo de paisagem. Primeiro você terá que fazer um fundo com as seguintes dimensões:

1380 X 500 pixels

Com essas medidas, não terá importância o tamanho do monitor. O fundo ficará bom. Agora cabe a você escolher o que fazer. Você pode fazer uma paisagem com vários itens dos packs de design de Club Penguin. Há também paisagens já prontas neles. Enfim, isso é um escolha muito pessoal. Vamos para a última etapa.

Você poderá ajustar seu fundo de duas maneiras. A primeira é com ele fixo na tela. Ou seja, descendo ou não a página, ele continuará o mesmo.  Para colocar um fundo parado, vá em seu HTML e pesquise por background. Então vá passando as palavras encontradas até a terceira. Você verá algo mais ou menos assim:















Ponha o link da imagem de seu fundo dentro dos parênteses e apague tudo até o ponto e vírgula. Veja para não errar: 







Apague isso e insira o seguinte código no mesmo lugar (após os parênteses):
;
background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top center;

Com esse código, seu fundo irá ficar fixo igual ao daqui. Para fazer um fundo que não seja fixo, clique em Mais informações:

Como Comprimir Imagens

Introdução

Quando você acessa uma página é como se você estivesse fazendo download de um arquivo HTML, que linka muitas imagens. Assim, também seria como se você baixasse as imagens. Por isso, é muito importante que as imagens do seu template ocupem o mínimo de espaço possível, fazendo o blog carregar muito mais rápido. Nesta postagem, ensinarei a como comprimir suas imagens PNG de uma maneira muito eficiente.

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 Pegar Objetos de SWF's

Como muitos sabem, o Club Penguin Cut Outs fechou, ele era o site que fornecia imagens de penguins para os designers. Agora que ele foi fechado, precisaremos pegar os objetos diretamente dos SWF's do Club Penguin. O processo é bem simples.

Ferramentas de Desenho (Flash)

Olá Caro Leitor, estou voltando com minhas postagens de ajuda no Adobe Flash e irei trazer a vocês algumas postagens sobre Action Script 2.0 e 3.0, bom vamos começar com a segunda parte:

Compilado do Quadro Fonte Mania

Abaixo segue várias sugestões de fontes, feitas por leitores nos comentários, para baixarem e instalarem em seus computadores. Assim, poderão usar na hora de fazer qualquer coisa de design.

Usando Fontes no Template

Introdução

Hoje ensinarei a usar fontes de uma boa maneira em seus templates, ou postagens. Nesta exata postagem, uso a fonte Verdana. Vocês só conseguem visualizá-la porque ela está instalada em seu computador. Era com esse CSS que funcionavam as fontes das páginas de internet até pouco tempo:
#exemplo {
font: 80% Verdana, Comic Sans MS, sans-serif;
}
Preste atenção nas partes em negrito: no exemplo é usada a fonte Verdana. Se ela não estiver instalada no computador, é usada a Comic Sans MS. E se essa não estiver disponível, é mostrada a Sans-Serif. O problema disso? Era criada uma má experiência de usuário, pois várias fontes poderiam não estar instaladas, assim o usuário não veria sua página exatamente como você queria. Alguns designers também queriam usar fontes pouco conhecidas e inusitadas em seus layouts, que seria muito difícil de estarem no computador dos usuários.

Como Fazer Parcerias Rolantes

Olá, pessoal. Isandra5 aqui. O pessoal anda pedindo muito ''como faz aquelas parcerias que se mexem?'' ''como faz aquelas parceiras que rolam?'' e eu estou aqui para ajudá-los. Vamos começar.

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 Personalizar a Barra de Rolagem

Hoje, irei ensinar a como personalizar ou trocar de cor a barra de rolagem de seu blog. Se não sabe o que é, veja:




Lembrando que só funciona em Chrome, Safari e outros browsers que usam WebKit.

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.