Template Meu cantinho

Novo template fofo!!

Este é o projeto do template.

Bom, sei que meus templates são simples, mas são todos feito com muito carinho, porque eu sempre quis aprender a fazer e corri atraz e aprendi pelo menos o basico. Estou a procura de coisas novas, pois quero aprender a fazer templates tipo os que a Elaine Gaspareto ou Cherry Boomb fazem...

Vai demorar um pouquinho, mas quero muito aprender, e ajudar a quem tambem tem vontade de aprender assim como eu. Pois sei que assim como eu fico procurando aprender algo existem outras pessoas tambem que procuram.

Então vamos ao template?

Esta imagem é do template feito no blog

Como eu disse é Simples, mas foi feito com todo o carinho...

As cortininhas do template foram todas feitas por mim. (dê créditos ao blog Glass Glitter)

Bom vamos aos detalhes...

Neste template não coloquei menu, mas vou colocar o código para você coloca-lo em um novo Gadget abaixo do cabeçalho.

Codigo:

<div style="text-align: center;"> 

<span style='border-radius: 3px; 

background-color:#FFC0CB; 

padding: 5px 15px 5px 15px;'> 

<a href="Link1 ">Inicio</a></span>

<span style='border-radius: 3px; 

background-color:#FFC0CB;  

padding:  5px 15px 5px 15px;'> 

<a href="Link2">Editar 2</a></span>

<span style='border-radius: 3px;

background-color:#FFC0CB; 

padding: 5px 15px 5px 15px;'> 

<a href=" Link3 ">Editar 3</a></span>

<span style='border-radius:3px;

background-color:#FFC0CB; 

padding: 5px 15px 5px 15px;'> 

<a href=" Link4">Editar 4</a></span>

<span style='border-radius: 3px;

background-color:#FFC0CB; 

padding: 5px 15px 5px 15px;'> 

<a href="Link5/">Editar 5</a></span>

</div> 

Você pode trocar as cores do menu, e deixa-los arredondados também.

Aqui está o cabeçalho do template. Você pode edita-lo e colocar o nome do seu blog.

O cabeçalho é de 970 x 342

A fonte usada no cabeçalho que está no template esta neste site abaixo, basta baixa-la e instalar na pasta de fontes do seu computador, e poderá usa-la em qualquer editor. É só clicar em download quando abrir a pagina.

http://www.fontesgratis.com.br/a/Angle.php

O download do template abaixo:

Espero que gostem, é de coração!

Abraços

Continue lendo ...

Menu Editável

pitacosdelua.blogspot.com

Bom, já perceberam que estou empolgada com os menus né?

Então, mes este menu que venho trazer não é mapeado, é um menu editavel. Você poderá mudar os links e o nome da pagina que vai aparecer... Legal né?

Vamos lá, este que coloquei é rosa, mas voce pode colocar a cor que quiser, até colorido...

O site para ver as cores é este aqui

Menu 

Código

<div style="text-align: center;"> 

<span style='border-radius: 3px; 

background-color:#FFC0CB; 

padding: 5px 15px 5px 15px;'> 

<a href="Link1 ">Inicio</a></span>

<span style='border-radius: 3px; 

background-color:#FFC0CB;  

padding:  5px 15px 5px 15px;'> 

<a href="Link2">Editar 2</a></span>

<span style='border-radius: 3px;

background-color:#FFC0CB; 

padding: 5px 15px 5px 15px;'> 

<a href=" Link3 ">Editar 3</a></span>

<span style='border-radius:3px;

background-color:#FFC0CB; 

padding: 5px 15px 5px 15px;'> 

<a href=" Link4">Editar 4</a></span>

<span style='border-radius: 3px;

background-color:#FFC0CB; 

padding: 5px 15px 5px 15px;'> 

<a href="Link5/">Editar 5</a></span>

</div>  

Entendendo Melhor

Copie e leve ao bloco de notas para fazer as alterações.

Border-radius é o arredondado do menu, quanto maior o numero mais redondinho fica.

Background-color é a cor do fundo do menu em cada um você pode colocar uma cor diferente se quiser.

E onde está Link, Link 2, Link 3... Você coloca o link da pagina que quer no menu, 

Onde está Editar 1, Editar 2... Você coloca o nome da pagina...

Legal né? Aprendi no Site da *Elaine Gaspareto*

Para usar vá em layout-Adicionar gadget-HTML/JavaScript e cole la.

Posicione onde quiser...

Espero que tenha gostado...

Comente!

Continue lendo ...

Menus Verticais

http://wallpapersuggest.com

Obaa, mais menu mapeado, como eu disse na postagem anterior, este menu só da para mudar os links, pois se trata de uma imagem mapeada.

Então vamos lá??

Ah!! mais uma coisinha, o tutorial de como usar esta bem  ➙ aqui 

Agora sim, vamos aos menus??

Menu Vertical Rosa com bolinhas 

Código

<img id="Image-Maps-Com-image-maps-2014-02-11-145640" src="http://www.image-maps.com/m/private/0/9bnu50f1dgr88qcunnbb0h9901_sem-ttulo-2.png" border="0" width="250" height="250" usemap="#image-maps-2014-02-11-145640" alt="" />

<map name="image-maps-2014-02-11-145640" id="ImageMapsCom-image-maps-2014-02-11-145640">

<area  shape="rect" coords="34,33,213,66" alt="" title="Inicio" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="35,69,212,102" alt="" title="Sobre" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="34,106,211,139" alt="" title="F.A.Q" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="35,144,212,177" alt="" title="Extras" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="34,183,211,216" alt="" title="Contato" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area shape="rect" coords="248,248,250,250" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />

</map></div>

Menu azul com bolinhas

Código

<img id="Image-Maps-Com-image-maps-2014-02-11-151238" src="http://www.image-maps.com/m/private/0/9bnu50f1dgr88qcunnbb0h9901_sem-ttulo-22.png" border="0" width="250" height="250" usemap="#image-maps-2014-02-11-151238" alt="" />

<map name="image-maps-2014-02-11-151238" id="ImageMapsCom-image-maps-2014-02-11-151238">

<area  shape="rect" coords="33,34,213,68" alt="" title="Inicio" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="34,71,214,105" alt="" title="Sobre" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="34,108,214,142" alt="" title="F.A.Q" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="33,145,213,179" alt="" title="Extras" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="34,183,214,217" alt="" title="Contato" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area shape="rect" coords="248,248,250,250" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />

</map></div>

Menu verde com bolinhas

Código

<img id="Image-Maps-Com-image-maps-2014-02-11-151635" src="http://www.image-maps.com/m/private/0/9bnu50f1dgr88qcunnbb0h9901_sem-ttulo-23.png" border="0" width="250" height="250" usemap="#image-maps-2014-02-11-151635" alt="" />

<map name="image-maps-2014-02-11-151635" id="ImageMapsCom-image-maps-2014-02-11-151635">

<area  shape="rect" coords="34,34,213,68" alt="" title="Inicio" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="34,69,213,103" alt="" title="Sobre" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="33,105,214,139" alt="" title="F.A.P" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="35,142,212,176" alt="" title="Extras" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="35,179,212,213" alt="" title="Contato" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area shape="rect" coords="248,248,250,250" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />

</map>

Menu Cinza Simples

<img id="Image-Maps-Com-image-maps-2014-02-11-153056" src="http://www.image-maps.com/m/private/0/9bnu50f1dgr88qcunnbb0h9901_sem-ttulo-24.png" border="0" width="250" height="250" usemap="#image-maps-2014-02-11-153056" alt="" />

<map name="image-maps-2014-02-11-153056" id="ImageMapsCom-image-maps-2014-02-11-153056">

<area  shape="rect" coords="33,34,213,67" alt="" title="Inicio" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="34,69,214,102" alt="" title="Sobre" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="34,107,214,140" alt="" title="f.a.q" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="34,144,214,177" alt="" title="Extras" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="34,179,214,212" alt="" title="Contato" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area shape="rect" coords="248,248,250,250" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />

</map></div>

Acho que ja esta bom neh...

Não se esqueça de que só da para usar se tiver essas paginas no seu blog...

Qualquer dúvida comente!!

Abraços

Continue lendo ...

Menus prontos e Como usar

Kon'nichiwa amores...

No post de hoje vou disponibilizar alguns menus simples mapeados para vocês.

Já avisando são beeem simples, este menu é mais para quem ta começando, vou deixar o menu e o código, e o tutorial de como usa-los.

Então mãos a obra??

Menu Simples

(634 x 31)

Código

<img id="Image-Maps-Com-image-maps-2014-02-10-084734" src="http://www.image-maps.com/m/private/0/9bnu50f1dgr88qcunnbb0h9901_sem-ttulo-6.png" border="0" width="700" height="90" usemap="#image-maps-2014-02-10-084734" alt="" />

<map name="image-maps-2014-02-10-084734" id="ImageMapsCom-image-maps-2014-02-10-084734">

<area  shape="rect" coords="11,14,130,45" alt="" title="" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="145,15,264,46" alt="" title="" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="282,15,401,46" alt="" title="" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="417,15,536,46" alt="" title="" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="552,13,671,44" alt="" title="" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area shape="rect" coords="698,88,700,90" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />

</map></div>

----------------------------------------------------------------------------------------------------------------------------------

Menu simples rosa

(422 x 32)

Código

<img id="Image-Maps-Com-image-maps-2014-02-10-092502" src="http://www.image-maps.com/m/private/0/9bnu50f1dgr88qcunnbb0h9901_sem-ttulo-7.png" border="0" width="434" height="49" usemap="#image-maps-2014-02-10-092502" alt="" />

<map name="image-maps-2014-02-10-092502" id="ImageMapsCom-image-maps-2014-02-10-092502">

<area  shape="rect" coords="8,9,93,39" alt="" title="" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="92,9,177,39" alt="" title="" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="177,9,262,39" alt="" title="" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="259,9,344,39" alt="" title="" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area  shape="rect" coords="344,9,429,39" alt="" title="" target="_self" href="http://glass-glitter.blogspot.com.br/"     />

<area shape="rect" coords="432,47,434,49" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />

</map></div>

------------------------------------------------------------------------------------------------------------

Já temos 2 menus simples...

Vamos aprender a usar?

Pegue o código do menu que escolheu e cole no seu bloco de notas, colocou?

bem, agora perceba que este menu tem 5 partes não é? Partes que são: INICIO-SOBRE-EXTRAS-F.A.Q-CONTATO

não tem como mudar os nomes, seu menu tem que ter essas páginas, (se não tiver mande um comentario que eu faço um com os links das suas paginas.)

beleza...!

Agora onde está escrito ***http://glass-glitter.blogspot.com.br/*** você muda para o link da pagina onde esta escrito.

EXEMPLO: http://glass-glitter.blogspot.com.br/        ( * inicio * )

                    http://glass-glitter.blogspot.com.br/p/sobre.html

                    http://glass-glitter.blogspot.com.br/p/extras.html

E por ai vai...

Entendeu?? não tem como mudar os nomes a não ser que faça outro com os seus links.

Agora que colocou os seus links abra o blog - LAYOUT - ADICIONAR GADGET - HTML/JavaScript

e cole o código do bloco de notas.

Posicione abaixo do cabeçalho. Pois este menu é Horizontal só vai conseguir colocar abaixo ou acima do cabeçalho...

Bom, só quero ajudar então se gostou e foi útil comente... :)

Curta a FP D'ELIZ

Ficarei feliz :D

Qualquer dúvida, só comentar!!

Abraços

Continue lendo ...

Fazer Menu

Depois de um tempinho sem postar pelo fato de ter um bebê novinho, resolvi postar este tutorial que aprendi no blog Eu Amo HTML

Bom, muitas pessoas ficam dias procurando um tutor que ensine a fazer menus, ou que ja tenha um codigo de um menu legal pronto...

Depois de varias tentativas, eu encontrei este.

Vamos começar?

Como fazer um menu para o seu blogger
Ele vai ficar igual a esse, você pode modificar as cores

Para começar abra o HTML do seu blog em MODELO - EDITAR HTML

Agora procure por 

]]></b:skin>

Achou?

Agora acima cole esse 

código:

.NomeDAclasse {

font-family: Verdana; /* fonte */

font-size: 13px; /* tamanho da fonte */

line-height: 16px; /* altura da linha */

text-align: center; /* centralização do texto */

width: 90px; /* largura do menu */

color: #000; /* cor do texto */

background: #666666; /* fundo */

border-bottom: 2px solid #000; /* borda preta */

border-radius: 10px 10px 0px 0px; /* borda arredondada */

padding: 5px; /* espaço entre o texto e as bordas */

margin: 5px; /* espaço entre os links */

display: inline-block;}

Salve!

Agora vá em layout-adicionar gadget-HTML/JavaScript

e colar este codigo até que dê o numero de paginas que você deseja:

<div class="NomeDAclasse"><a href="LINK DA PAGINA">NOME DA PAGINA</a></div>

Prontinho

Se quiser faça as modificações do seu jeito...

Abraços

Continue lendo ...