» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Como Alterar o Espaço para Recados no seu Cbox




Sempre que vou mandar algum recado para alguém pelo Cbox dou enter e tenho que mandar mais de um recado, acho que isso acontece por causa da única linha que temos disponível para escrever, fica difícil ter uma noção do que estamos escrevendo.

No site do Cbox temos a opção de aumentar o espaço de digitação dos recados, como aumentar a largura e altura da caixinha do Cbox e até as cores da sua Cbox para combinar com o seu blog!

Assim que você entrar no seu login
Clique em Cbox Options e siga as instrucões da figura abaixo.
Unlimited Free Image and File Hosting at MediaFire
Clique na figura para ampliar.

Para alterar as cores Clique em Colors&Fonts--> Lá você pode alterar as cores do seu Cbox e o tamanho da fonte!

TEMPLATE COM BARRA DE NAVEGAÇÃO E 3 COLUNAS




Template Black-Red com barra de navegação superior!


Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

Especificações
Coluna da esquerda (sidebar-wrapper): 220px
Coluna do centro (main-wrapper): 430px
Coluna da direita (newsidebar-wrapper): 220px
Largura total do template (outer-wrapper): 900px


TEMPLATE CUTE SEM BARRA DE NAVEGAÇÃO E COM 2 COLUNAS




Aqui vai mais um template cute sem barra de navegação!

Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

Especificações
Coluna da direita (sidebar-wrapper): 260px
Coluna do esquerda (main-wrapper): 500px
Largura total do template (outer-wrapper): 780px

TEMPLATE CUTE SEM BARRA DE NAVEGAÇÃO E COM 3 COLUNAS




Aqui vai mais um template cute sem barra de navegação!

Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

Especificações
Coluna da esquerda (sidebar-wrapper): 230px
Coluna do centro (main-wrapper): 400px
Coluna da direita (newsidebar-wrapper): 230px
Largura total do template (outer-wrapper): 885px

PARCEIROS




O Templates para Você não faz parcerias.

Os links compartilhados no TPV são de blogs e sites do mesmo nicho com o intuito de agregar conteúdo aos nossos leitores sobre o assunto do blog.



TEMPLATE CUTE SEM BARRA DE NAVEGAÇÃO




Aqui vai um template cute com barra de navegação!

Image Hosted by ImageShack.us

Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

Especificações
Coluna da esquerda (sidebar-wrapper): 230px
Coluna do centro (main-wrapper): 390px
Coluna da direita (newsidebar-wrapper): 230px
Largura total do template (outer-wrapper): 900px


TEMPLATE CUTE COM BARRA DE NAVEGAÇÃO SUPERIOR E 3 COLUNAS




Aqui vai um template cute com barra de navegação!

Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

Visualise como fica esse template até dia 05/11/2007 AQUI.

Especificações
Coluna da esquerda (sidebar-wrapper): 230px
Coluna do centro (main-wrapper): 390px
Coluna da direita (newsidebar-wrapper): 230px
Largura total do template (outer-wrapper): 900px


TEMPLATE RED 2 COLUNAS COM MENU VERTICAL






Clique na imagem para ampliar

»FAÇA O DOWNLOAD AQUI«

Para configurar os links do menu vertical.
►Encontre o código: (Use Ctrl+F ou F3 que fica mais fácil de encontrar o código.)
<ul class="vert-one">
<li><a class="current" href="URLdoLink" title="CSS Menus" shape="rect">Home</a></li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item1</a></li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item2</a></li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item3</a></li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item4</a></li>
</ul>

► Em Home você coloca em URLdoLink o endereço do seu blog;
► Nos outros onde estiver escrito URLdoLink você substitui pelo endereço(link);
► No lugar dos Ítens 1, 2, 3 e 4 você coloca o título do link que você colocou o endereço na mesma linha em "URLdoLink".

ESTE BLOG VALE A PENA CONFERIR!




Photo Sharing and Video Hosting at Photobucket

Recebi este selinho do meu amigo Peres do Blog Pura Besteira.
É o primeiro "prêmio" do Templates para Você! Estou muito feliz!
Criar templates é muito gostoso e tem se tornado um vício muito bom, pena que não tenho tempo para criar com mais frequência!

De acordo com as regras devo indicar 5 blogs para o pessoal conferir!
Então vai:
Blog-Memories
Templates para Novo Blogger
Mamanunes Templates
Receitas da Tia Dete
Templates e Acessórios


Ah neeemmm! Só 5 blogs! São tantos que vale a pena conferir! Aos outros amigos, não fiquem tristes estou sempre conferindo vocês!Bjks



Como Alterar a Aparência das Colunas




Tá bom, você baixou o Template Black e quer deixar suas colunas com uma aparência mais colorida!
Então vou mostrar o lugar certo, onde você pode aprender a mudar a aparência das colunas do seu template!
É só clicar nesse link aí: ALTERAR A APARÊNCIA DAS COLUNAS, que você aprende direitinho como fazer isso com a mestra Ariane!

Adicionar Coluna ao Template




Você quer saber como adicionar uma coluna no seu template sem ter que mudá-lo completamente?

Então clique nesse link Adicionar uma Coluna no Template que você encontra como fazer isso!

TEMPLATE BLUE-A2 COM BARRA DE NAVEGAÇÃO SUPERIOR E 3COLUNAS




Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar e

FAÇA O DOWNLOAD AQUI

Especificações
Coluna do esquerda (main-wrapper): 360px
Coluna da centro (sidebar-wrapper): 208px
Coluna da direita (newsidebar-wrapper): 208px
Largura total do template (outer-wrapper): 800px


Como Alterar a Imagem no Topo do Template e o Tamanho do Cabeçalho




Este tutorial serve para os modelos do Blogger 2006. Com a atualização do Blogger 2010 ficou mais fácil mudar estas imagens pela própria interface do Blogger.

De qualquer forma vale a pena dar uma lida para aprender um pouco sobre o que é header (cabeçalho), medidas, margens, altura, largura, etc. Várias informações úteis para você aprender e personalizar o seu blog.

Clique nas Imagens e Siga as Orientações Contidas Nelas




INSTRUÇÕES PARA COLOCAR UMA IMAGEM NO CABEÇALHO (HEADER):

1º- O tamanho da sua imagem em pixels deve ser o mesmo do header;
2º- Você deve hospedar sua imagem em algum servidor de imagens; Ex: Tinypic ou o próprio blogger;
3º- Copie o endereço (URL) do link da imagem e cole entre os parênteses do código abaixo:
background: url("URL-link da imagem") top center no-repeat;
Se não tiver esta linha no bloco de códigos do #header, acrescente-a.
Entenda:
» top center no-repeat→ indica que a imagem irá se localizar no topo, centro e não vai se repetir.
             ♦Aprenda mais sobre códigos CSS-Folhas de Estilo nesse endereço: Introdução: o que são Folhas de Estilo? ;
» Se sua imagem for menor que o espaço destinado à ela e você queira colocar uma cor neste espaço, diferente da cor do fundo, coloque o código html da cor onde está representado em verde:
background: #FFFFFF url(URL link) top center no-repeat;

PARA COLOCAR BORDA NA SUA IMAGEM (BORDER):

» Se for colocar em torno de toda imagem (4cantos), use o código:
border: 1px solid #000000;

» Apenas do lado esquerdo:
border-left: 1px solid #000000;

» Apenas do lado direito:
border-right: 1px solid #000000;

» Apenas no topo:
border-top: 1px solid #000000;

» Apenas no rodapé:
border-bottom: 1px solid #000000;
Entenda:
[1px] → Indica a largura da borda → é aí que entra a alteração da largura ou altura do [#header-wrapper]
Ex: Se colocar uma borda de 10px em todos os cantos da imagem terá que aumentar 20px na altura [height] e 20px na largura [width] do [#header-wrapper], ou se não der para aumentar o diminuir [#header-wrapper] por causa da largura total do template -> diminua a imagem essas medidas e depois coloque-a; [solid]->Indica o tipo de borda:
    • solid=linha
    • dashed=tracejada
    • dotted=pontilhada
    • ridget=cume
    • inset=inserido
    • outset=outset
    • none=nenhuma
[#000000]→ Indica a cor da borda. Nesse caso preta.

Se quiser saber mais sobre CSS e HTML clique na categoria: ♦APRENDA HTML E CSS


Imagens que Rolam na Tela




Já publiquei no Imagens para Você uma dica com o link do blog da minha amiga Claudya sobre imagens que rolam na tela, mas vou republicar esta dica aqui com uma observação:

No Blog-Memories a Claudynha explica assim:

Este é o código:
<center><marquee direction="up" scrollAmount="1" style="background-color: #542E55; text-align: center; width:100px;height:130px;border:2px solid #ffffff;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='1'">
<a href="URL do link" title="texto"><img src=" url da imagem"</a>
<a href="URL do link" title="texto"><img src="url da imagem"</a>
</marquee></center>


No código, todas as partes abaixo podem ser mudadas a gosto de cada um:
  1. Background-color (cor do back);
  2. Scrollamount (rolagem entre): minímo de 1;
  3. Width (largura da caixa): está em 100px, mas mude como quiser;
  4. Height (altura da caixa): 130px, mas pode ser mudada;
  5. Border (grossura da borda): 2px (pode alterar);
  6. Border (estilo da borda): solid (pode alterar);
  7. Border (cor da borda): #ffffff (este é o código html de cor→é só mudar);
Não esqueça também de mudar os seguintes campos:
  • Url link: endereço do que você quer mostrar;
  • texto: digite e aparece quando passa o mouse por cima; (Ex: Título da Imagem)
  • Url imagem: endereço de onde a imagem está hospedada.
_______________________________________________________________

Minha observação:

Da forma que está definido dá um espaço entre a primeira e a última imagens, então para corrigir este problema o código deve ficar assim:
<marquee direction="up" onmouseover="this.stop()" style="border: 3px ridge rgb(255, 0, 0);" width="160" onmouseout=" this.start()" scrollamount="3" height="250">
<center>
<a href="URL do link" title="texto"><img src=" url da imagem"</a>
<a href="URL do link" title="texto"><img src="url da imagem"</a>
</center></marquee>
No começo do código onde está escrito: marquee direction="up" indica para que lado as imagens vão passar, nesse caso "up" indica para cima.
  • Se você quiser que as imagens rolem para baixo deverá escrever "down";

  • Se quiser que rolem para a direita escreva "right";

  • E para esquerda "left";

  • Scrollamount (rolagem entre): minímo de 1; → se aumentar esse número as imagens rolam mais rápido (sugestão:3 ou 4).

  • Se escolher "right" ou "left" não coloque o código <br> que significa pular uma linha, senão as imagens ficarão aglomeradas. Use <a href="URL do link" title="texto"><img src=" url da imagem"</a> apenas um espaço aqui entre as tags das imagens
    <a href="URL do link" title="texto"><img src="url da imagem"</a>
É isso que gostaria de acrescentar à dica sobre imagens que rolam na tela.

OUTRO TEMPLATE PINK COM BARRA DE NAVEGAÇÃO!




Mais um template Pink-A2 com barra de navegação na vertical.

Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar

FAÇA O DOWNLOAD AQUI

Especificações
Coluna do centro (main-wrapper): 545px
Coluna da direita (sidebar-wrapper): 250px
Largura total do template (outer-wrapper): 800px
Tamanho da imagem
(newsidebar-wrapper): 250px X380px

Para configurar os links do menu vertical.
►Encontre o código: (Use Ctrl+F ou F3 que fica mais fácil de encontrar o código.)
<ul class="vert-one">
<li><a class="current" href="URLdoLink" title="CSS Menus" shape="rect">Home</a></li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item1</a></li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item2</a></li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item3</a></li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item4</a></li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item5</a></li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item6</a></li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item7</a></li>
</ul>

► Em Home você coloca em URLdoLink o endereço do seu blog;
► Nos outros onde estiver escrito URLdoLink você substitui pelo endereço(link);
► No lugar dos Ítens 1, 2, 3, 4, 5, 6 e 7 você coloca o título do link que você colocou o endereço na mesma linha em "URLdoLink".

TEMPLATE HALLOWEEN




Já que estamos em Outubro mês do Dia das Bruxas aqui vai um Template Temático.

Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar e

FAÇA O DOWNLOAD AQUI

Especificações
Coluna do centro (main-wrapper): 535px
Coluna da direita (sidebar-wrapper): 250px
Largura total do template (outer-wrapper): 800px
Tamanho da imagem
(newsidebar-wrapper): 250px X350px

Possui menu de navegação que você pode alterar o endereço e título encontrando esse código HTML do template:

<li><a
class="current" href="URLdoLink" title="CSS Menus" shape="rect">Home a> li>
<li><a href="URLdoLink" title="CSS Menus" shape="rect">Item1 a>li>
Substitua as URLdoLink pelo endereço que você quer e os Itens pelo Título do Link

TEMPLATE BLACK SEM BARRA DE NAVEGAÇÃO




Um template para quem gosta de fundo escuro SEM barra de navegação acima do título.

Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar e

FAÇA O DOWNLOAD AQUI

Especificações
Coluna da esquerda (sidebar-wrapper): 180px
Coluna do centro (main-wrapper): 430px
Coluna da direita (newsidebar-wrapper): 260px
Largura total do template (outer-wrapper): 900px

SE VOCÊ QUISER ALTERAR O TAMANHO DO CABEÇALHO CLIQUE NESSE TUTORIAL

As cores deste template podem ser todas mudadas na opção do blogger:
Modelo--> Fontes e cores


TEMPLATE COM 2 CORES SEM BARRA DE NAVEGAÇÃO




Um template com 2 cores totalmente customizáveis SEM barra de navegação.

Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar e

FAÇA O DOWNLOAD AQUI

Especificações
Coluna da esquerda (sidebar-wrapper): 180px
Coluna do centro (main-wrapper): 430px
Coluna da direita (newsidebar-wrapper): 260px
Largura total do template (outer-wrapper): 900px

SE VOCÊ QUISER ALTERAR O TAMANHO DO CABEÇALHO CLIQUE NESSE TUTORIAL

As cores deste template podem ser todas mudadas na opção do blogger:
Modelo--> Fontes e cores


 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger