Bloguear botão direito

Para colocar o codigo vc deve ir em layout vai adicionar um gadget você vai add um html/javascript e vai colocar o codigo que vcs vam baixar abaixo

Como criar uma conta de e-mail personalizada?

Antes de tudo quero informar que para criar seu email personalizado (NOME@SEUBLOG.com) é necessário que você tenha um domínio próprio (.com / .com.br / .net / .blog.br / etc).

Para entender um pouco mais sobre domínio, leia:

• Uol Host ou Locaweb? (Domínio e Hospedagem)


• Domínio Próprio... Saiba mais!

Para criar uma conta de email personalizado é necessário um serviço de email confiável que faça o papel de caixa de email. Para isso utilizaremos o serviço Google Apps.



Por que utilizar o Google Apps?

- Confiável

- Seguro

- Personalização básica da caixa de email

- Permite criação de até 50 emails Grátis

- Painel de controle do serviço

- Serviços extras



Vamos começar o trabalho:

1º - Acesse o site Google Apps, especificamente em www.google.com.br/apps/intl/pt-BR/group/index.html.



2º - Clique em “Primeiros Passos”:

3º - Preencha a fica de inscrição de acordo com que se pede.

4º - Após fazer a sua conta no Apps é hora de configurar o sistema de email.

Acesse o seu painel de controle:

http://google.com/a/SEUDOMÍNIO

Exemplo:

http://google.com/a/codigosblog.com.br



Faça login e seja bem-vindo ao Google Apps:

5º - Primeiro temos que confirmar a propriedade do domínio. Clique em “Confirmar propriedade de domínio”.

Escolha o método de confirmação: “Altere o seu registro CNAME”.

Agora é necessário que você entre no painel de controle onde foi registrado seu domínio e fazer as mudanças de acordo com que se pede:

Na parte de configurações de DNS crie uma entrada “CNAME”, no valor gerado pelo Apps (exclusivo) e apontando para “google.com”.

Obs.: Caso você não tenha acesso na parte de configuração de DNS do seu domínio, entre em contato com o suporte da empresa onde contratou o serviço e solicite as mudanças necessárias.



Depois clique em “Verificar”.



Obs.2: Essa atualização e confirmação podem demorar até 48 horas.



6º - Vamos enfim ativar sua caixa de email! No painel do Apps, clique em “Ativar e-mail”

Na mesma zona de configuração de DNS do seu domínio, siga as instruções:

Apague TODOS os tipos de entrada “MX”. Depois crie as seguintes entradas “MX”:

Endereço do servidor MX	Prioridade
ASPMX.L.GOOGLE.COM.	10
ALT1.ASPMX.L.GOOGLE.COM.	20
ALT2.ASPMX.L.GOOGLE.COM.	20
ASPMX2.GOOGLEMAIL.COM.	30
ASPMX3.GOOGLEMAIL.COM.	30
ASPMX4.GOOGLEMAIL.COM.	30
ASPMX5.GOOGLEMAIL.COM.	30

Veja o exemplo de como vai ficar (painel Locaweb.com.br):

Obs.: Caso você não tenha acesso na parte de configuração de DNS do seu domínio, entre em contato com o suporte da empresa onde contratou o serviço e solicite as mudanças necessárias.



Após ter incluído todas as entradas MX, clique em “Concluir essa etapa” no painel Apps.



Agora é esperar! Quando estiver tudo confirmado o serviço vai funcionar perfeitamente.



Depois, para acessar a caixa de entrada entre no link:

http://mail.google.com/a/SEUDOMÍNIO

Exemplo:

http://mail.google.com/a/codigosblog.com.br



OBS.: Enquanto as configurações não forem aceitas, não é possível enviar emails.

OBS.2: Caso tenha dúvidas na configuração de seu DNS, entre em contato com a empresa onde contratou o serviço de email.



Até mais!

Fazendo seu template – Parte 4 – Configurando efeitos da(s) sidebar(es)

Estamos chegando à parte final da estrutura do template. Após essa postagem nos restam apenas alguns detalhes e opcionais. Aqui vou ensinar como mudar os efeitos da sidebar, e na próxima postagem ensino como fazer para definir o tamanho das colunas.



1º - Faça login no Blogger, entre em “Layout” -> “Editar HTML”;



2º - Vamos editar o título da sidebar. Encontre (Ctrl + f):

.sidebar h2 {

Fiz as seguintes mudanças:

padding: 5px;

border: 1px solid #000;

font-size: 13px;

Onde padding define as distancias do escrito das bordas. Border é a configuração das bordas, coloquei 1px solido de cor preta. Font-size é o tamanho da fonte, usei 13px como vocês podem ver.

“Brinque” um pouquinho, vale a pena você testar efeitos, fontes, tamanhos, etc. O Google oferece diversas fontes para isso.



A cor de fundo e a cor da letra estão como variáveis, sendo possível sua modificação diretamente na aba “Fontes e cores”. Assim não é necessária a mudança direta no CSS.



3º - Procure:

.sidebar li {

Vamos editar o "li" da sidebar. Podemos dizer que está é a parte em que mudamos os links da sidebar, a parte básica.

Apague TUDO que está entre {...}.

Depois adicione:

margin: 0;

padding-top: 0;

padding-bottom: 5px;

Assim retiramos as configurações inicias e colocamos 5px de distância de um link para o outro.



4º - Depois de definir as distâncias dos links da sidebar, nos resta configurar as cores, ícones, sublinhados, etc.



Por isso vamos CRIAR novas caracterisitas, dentro do CSS depois de sidebar li:

.sidebar a, sidebar a:link{

}



.sidebar a:hover{

}



.sidebar a:visited{

}

Em sidebar a, sidebar a:link, adicione as configurações iniciais dos links, as configurações que serão aplicadas quando alguém visitar seu blog.



Em sidebar a:hover vai ser aplicada as configurações quando o visitantes passarem o mouse sobre o link.



Em sidebar a:visited vai ser aplicada as configurações no link após o clique. Assim vai ficar marcado como se fosse um aviso que a pessoa já visitou este link.



Exemplo que vou utilizar:

.sidebar a, .sidebar a:link{

text-decoration: none;

padding-left: 20px;

background: url(http://codigosblog.net/servidor/li.gif) no-repeat;

}



.sidebar a:hover{

text-decoration: underline;

}



.sidebar a:visited{

background: url(http://codigosblog.net/servidor/livisited.gif) no-repeat;

}

• O que eu fiz?

Text-decoration: none; -> Retirei o sublinhado.

Padding-left: 20px; -> Coloquei 20px de distância da palavra linkada ao canto esquerdo.

Background: url...; -> Coloquei um ícone no link antes e depois de já visitado (a:visited).

Text-decoration: underline; -> Coloquei um sublinhado no link quando passa o mouse.



O template seu deve estar parecido estruturalmente com esse:

Acompanhe as mudanças do template: http://fazendoseutemplate.blogspot.com/



Pronto, basicamente é isso. Procure ser curioso e modifique o quando quiser as configurações da sidebar. Mas lembre sempre de verificar as mudanças em alguns navegadores (Firefox, Chrome, Internet Explorer 7 ou superior, etc).

Continue lendo >>

Fazendo seu template – Parte 3 – Adicionando um Menu Horizontal

Antes de mais nada, quero pedir desculpas mais uma vez, estou meio ausente do blog e principalmente do Twitter, problemas pessoais e escola. Paciência. =/



Agora vamos continuar com mais uma parte da nossa seria “Fazendo seu Template”. É hora de adicionarmos um menu superior no template, isso ajuda muito na navegação interna de seu blog. Os leitores agradecem...



1º – Entre em “Layout” -> “Editar HTML”.



2º – Procure (Ctrl + f):

<div id='header-wrapper'>

</div>

Adicione logo depois:

<div id='front_menu'>

<li><a class='s' href='URL DO SEU BLOG' title='Início'><span>Início</span></a></li>

<li><a class='s' href='#' title='Sobre'><span>Sobre</span></a></li>

<li><a class='s' href='#' title='Vídeos'><span>Vídeos</span></a></li>

<li><a class='s' href='#' title='Contato'><span>Contato</span></a></li>

</div>

Isso que você acabou de adicionar é o menu, vamos editar o conteúdo do menu e depois aplicar os estilos.



É bem simples configurar, troque URL DO SEU BLOG pelo link do seu blog.

As outras opções é só trocar # pelo link e os nomes (Sobre, Vídeos, Contato...) substitua por aquilo que você quiser nomear.



Se você não quiser alguma das opções é só apagar de <li> a </li>. E para adicionar mais uma opção, é só duplicar uma das opções e editar o conteúdo.



3º – Vamos colocar o estilo do menu. Procure (Ctrl + f): ]]></b:skin>



Adicione ANTES desse código, o seguinte CSS:

#front_menu {

float:left;

overflow:hidden;

position:relative;

text-transform:uppercase;

width: 100%;

background: #c1c1c1;

}

#front_menu li {

float:left;

padding: 5px;

list-style-image:none;

list-style-position:outside;

list-style-type:none;

margin-right:4px;

}

* html #front_menu li {

display:inline;

}

#front_menu li a {

background:transparent;

color:#0960a3;

cursor:pointer;

display:block;

font-family:Arial,Helvetica,sans-serif;

font-size: 12px;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:700;

line-height:26px;

padding-left:15px;

text-decoration:none;

}

#front_menu li a span {

background:transparent ;

display:block;

line-height:24px;

padding-right:15px;

}

#front_menu a {}

#front_menu a:hover{

color: #489ddf;

background-position:left bottom;

}

#front_menu li a.s {

background-position:left bottom;

}

#front_menu li a:hover span, #front_menu li a.s span {

background-position:right bottom;

}

No estilo: #front_menu { você vai editar o fundo do menu, no lugar de background adicione o código da cor desejada, ou adicione uma imagem. Para substituir a cor por uma imagem use:

background: CÓDIGO COR url() no-repeat;

ou

background: url() repeat;

Leia mais sobre como colocar uma imagem com CSS clicando aqui.



No estilo: #front_menu li a { faça as mudanças nas letras, cores, tudo sobre a parte escrita do menu.

Lembrando:

color:#0960a3; é a cor da letra.



As outras mudanças depende do gosto de cada um, seja curioso, apague, modifique e aprenda o que cada coisa significa.



Apos fazer as modificações, teste e salve.



Obs.: Você pode adicionar outro tipo de menu, existe vários e vários sites que trabalham só com menu CSS, procure no Google por "Menu CSS". Se quiser uma dica: CSS Menu Maker, um ótimo gerador de menu. Lembre-se de hospedar as imagens do menu e substituir onde necessário no CSS do menu.

Fazendo seu template – Parte 2 – Criando um topo com imagem

Vamos continuar com nossa seria de como fazer um template para Blogger. Para ler todas as postagens da serie clique aqui



Parte 2 – Criando um topo para seu blog usando uma imagem.



Não tenho dúvidas que é muito melhor um blog com um topo desenhado, trabalhado, ou com um simples logotipo que identifique o blog. Isso faz seu blog ficar bem mais profissional do que usando um simples escrito com o nome do seu blog no topo (header). Então vamos aprender a substituir esse escrito por uma imagem.



1º - Entre em “Layout” -> “Editar HTML”.



2º – Procure (Ctrl + f):

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Só testes! (Cabeçalho)' type='Header'/>

</b:section>

Apague tudo!



Depois encontre:

#header {

width: 760px;

margin: 0 auto;

background-color: $headerBgColor;

border: 1px solid $headerBgColor;

color: $headerTextColor;

padding: 0;

font: $headerFont;

}



h1.title {

padding-top: 38px;

margin: 0 14px .1em;

line-height: 1.2em;

font-size: 100%;

}



h1.title a, h1.title a:visited {

color: $headerTextColor;

text-decoration: none;

}



#header .description {

display: block;

margin: 0 14px;

padding: 0 0 40px;

line-height: 1.4em;

font-size: 50%;

}

E apague tudo também. Teste, se topo saiu completamente e está mais ou menos igual a imagem abaixo, salve.

Assim, acabamos de deletar o antigo topo e suas configurações.



3º – Precisamos criar o topo do blog, para isso vamos editar a div “header-wrapper”, então encontre:

#header-wrapper {

Apague:

background-color: $headerCornersColor;

text-align: $startSide;

margin:0;

Onde background era a cor do fundo, text-align era o tipo de alinhamento do texto e margin é a margem da div.



Agora vamos criar nossas próprias configurações. Use: widght para definir a largura, height para definir a altura e margin para definir a distância do topo das laterais. Caso queira adicionar outros efeitos, procure na web algo mais, porém isso não é necessário.



Vou usar no exemplo:

width: 980px;

background: url(http://codigosblog.net/blogs/serie/header.jpg) no-repeat;

height: 180px;

Onde background: url(...) no-repeat vai a imagem do topo (usando uma imagem já hospedada), colocamos também 180px de altura (height) e 980px de largura (width).



Teste e salve.

Seu template deve estar parecido com esse:

Seja criativo, crie uma imagem moderna, evite letras grandes de mais e muitos paparicos.



Espero que essa seria ajude muito a todos. Aguardem mais postagens.

Até mais.

Fazendo seu template – Parte 1 – Configurações Iniciais

Como prometi, vamos aprender a fazer um template passo-a-passo e para isso vamos usar um template de base, o template “Denim” disponível no próprio Blogger.

Não vai ser uma serie de postagens de como fazer do inicio, do 0, mas assim fica mais fácil para todos aprenderem um pouco de CSS, HTML e Loops (códigos) do Blogger.



Essa série de postagens vai gerar várias dúvidas, vou tentar ajudar todos e dependendo da quantidade de perguntas repetidas, vou criar uma página de perguntas e respostas sobre cada parte da montagem do seu template.



Antes de mais nada, crie na sua conta um blog de testes, para você fazer as modificações. Escolha o template “Denim” e clique em salvar.

Parte 1 – Configurações Inicias (largura, cores, fontes, etc)



Vamos criar os “limites” do template: os limites de espaço, fonte e determinar cores.

Para entender mais sobre CSS e HTML, recomendo que leia o seguinte post antes de começar: Um pouco sobre CSS e Mudando o fundo do seu template.



1º - Entre em “Layout” → “Editar HTML”.



2º – Vamos usar a div “outer-wrapper” já inserida no template para limitar a largura e posicionamento.

Então procuramos (Ctrl + f) o CSS:

#outer-wrapper {

Vamos inserir a largura (width) e como exemplo vou usar 980px, uma largura perfeita para quem quer criar um template com três colunas.

Coloque:

width: 980px;

Se quiser mudar a largura, basta trocar 980 pelo tamanho desejado.



3º – Na mesma div (outer-wrapper), vamos inserir a cor de fundo (background) onde vai ficar todas as colunas e textos e depois centralizar tudo.

Coloque:

background: #FFF;

margin: 0 auto 0;

Onde a margin vai centralizar o template e background é a cor do fundo. Você pode trocar a cor do fundo, basta adicionar o código de acordo (tabela de cores aqui).



Obs.: Recomendo uma cor clara, de preferencia branco (#FFF), para não cansar a vista de quem lê.



Depois teste e salve.



4º – Agora vamos apagar a outra formatação antiga que também está limitando o template.



Procure (Ctrl + f):

#content-wrapper {

Apague:

width: 760px;

margin: 0 auto;

padding: 0 0 15px;

border: 1px solid $borderColor;

border-top: 0;

Onde: Width é a antiga largura, margin é a antiga centralização, padding a distância do conteúdo até a borda da div e border é a borda.



Teste e salve.



5º – A navbar do Blogger não fica muito bem, então vamos retira-la:



Procure (Ctrl + f):

body {

e ANTES disso cole:

#navbar-iframe {display:none}

Salve.



Troque as cores dos textos, links, fontes, usando a aba “Fontes e cores”.



Mais ou menos seu template está assim:

Por hoje é só, amanha tem mais... Fique calmo, aos poucos você vai perceber as mudanças.

abraços

Continue lendo >>

Menu pronto

Fiz mais um Menu simples com imagens, mas é muito eficiente e útil.

Substitua onde esta pedindo pelos links e pelo e-mail onde esta de letra maiúscula e de vermelho.

Exemplo do menur:

Código:

<!--################# começa aqui (não retire os créditos - codigosblog.com.br)##################-->

<center>

<a href="URL DO SITE">

<img border="0" src="http://www.iconlet.com/icons/futurosoft/32x32/actions/gohome.png" title="Home"/></a>

<a href="mailto:EMAIL@PROVEDOR.COM">

<img border="0" src="http://www.iconlet.com/icons/crystal09/32x32/xchat.png" title="Fale Conosco"/></a>

<a href="URL DO PERFIL ">

<img border="0" src="http://www.iconlet.com/icons/nuvola/32x32/personal.png" title="Perfil "/></a>

&lt;a href="URL DO FEED">

<img border="0" src="http://www.iconlet.com/icons/sweetie/png-24/24-rss-square.png" title="Feed"/></a>

<a href="http://codigosblog3000.blogspot.com">

<img border="0" src="http://www.iconlet.com/icons/crystalsvg/32x32/kpersonalizer.png" title="Menu Feito por Codigos Blog"/></a>

</center>

<!--################# termina aqui ##################-->

Agora entre em: "Layout" -> Elementos da página".

Clique em "Adicionar Gadget" e escolha a opção: "HTML/Java Script". Cole todo código lá e salve!



Agora seu menu está pronto! =D