Templates E Dicas DNB

Estamos de volta...

noreply@blogger.com (Fernando Lúcio) — Wed, 21 Nov 2012 18:36:00 +0000

Voltamoossssssssss...

Depois de quase um ano sem postar, o Templates E Dicas DNB está voltando a ativa, e iremos continuar se Deus quiser.
Ficamos inativos por esse tempo por causa de problemas pessoais, técnicos e falta de tempo.
Agraço a compreensão de todos.

40 dicas para salvar seu blog!//Promoção Ipad De Natal

noreply@blogger.com (Fernando Lúcio) — Sun, 27 Nov 2011 21:25:00 +0000

PROMOÇÃO IPAD

1º como funcinoa?

A promoção funciona assim, no final desta postagem irá ter uma ficha para você preencher seus dados, e quando chegar ao download de nº 10.000 o sistema irá automaticamente fazer um sorteio com todas as fixas.

OBS: não adianta se cadastrar sem ter baixado por que o sistema reconhecerá.

2º Como o premio vai chegar até você?

Se você for sorteado receberá um e-mail dizendo, e dizendo como você vai receber o prêmio.

Tah esperando oque? baixe e concorra a um Ipad novo!!

Antes Do Download Leia Isso

Bom esse PDF, com 40 dicas bastante interessantes irá ajudar você a salvar seu blog,

mais em troca do produto você será diretamente redirecionado para o twitter, que irá pedir para que você faça login, quando você entrar ele irá automaticamente tweetar o seguinte:

"Estou baixando o E-book:40-dicas-para-salvar-seu-blog do site►.http://t.co/USACuC1V◄#PROMONTATALNB http://dicas-noblog.blogspot.com"

o download encontrasse disponível abaixo:

Créditos do download: FB O DOWNLOAD NÃO CARREGA? INFORME PROBLEMAS SOBRE O DOWNLOAD ►RECLAMAR◄

O DOWNLOAD ESTÁ FUNCIONANDO NORMALMENTE AGORA!

Assinar o FEED

Tweet isso
Siga @rock_forever_1

Receba nossas atualizações:

É possível ganhar dinheiro com blog!

noreply@blogger.com (Fernando Lúcio) — Sun, 27 Nov 2011 17:17:00 +0000

Já pensou em ganhar dinheiro postando eu seu blog? Isso é possível e não é difícil! Todavia, você só pensa em ganhar dinheiro com isso? Esqueça! O primeiro passo para ganhar dinheiro com blogs é gostar do que faz.

Comece escolhendo algum programa de afiliados. Pode ser bom investir em mais de um, mas aconselho focar o máximo possível em uma única fonte. Em seguida escolha a melhor forma de anúncio dentre as oferecidas pelos programas de afiliados: links, banners, postagens patrocinadas, etc. Estude a forma que melhor se encaixe em seu blog, faça cadastro e comece a ganhar dinheiro.

Algumas dicas de programas de afiliados em português:

1) Google Adsense

O mais conhecido, seguro e mais utilizado na web atualmente. É rico em conteúdo, possibilidades de configurações e formas de anúncio.
Muitos reclamam por pagarem pouco, todavia, se seu blog tem uma estrutura boa (layout) e um conteúdo bom, dá pra ganhar um bom dinheiro.
Link: www.google.com/adsense
Leia também: Otimize sua renda no Adsense

2) Boo-Box

Você escolhe o que quer divulgar campanha por campanha, dentre várias formas e preços.

Existe plug-ins específicos para WordPress que podem ajudar na hora de selecionar o melhor conteúdo.
Link: www.boo-box.com

3) Mercado Sócios

Com porcentagens de venda relativamente altas que chegam a 55%, pode ser uma ótima alternativa para seu blog. Coloque anúncios de produtos relacionados ao blog, mas tenha cuidado com a quantidade, pois seu blog pode ficar bem poluído.
Link: http://pmsapp.mercadolivre.com.br/jm/pms

4) Uol Afiliados

Ganhe R$ 30,00 reais por indicação + comissão de 10% da mensalidade paga pelo cliente. Uma boa opção para blogs que falam sobre assuntos relacionados à tecnologia e/ou internet.

Link: www.uolhost.com.br/afiliados

5) Lomadee

Trabalhe com vários programas de afiliados, como Livraria Saraiva, Apple e Buscapé. Uma alternativa diferente, pois não fica anunciando um único produto ou marca.

Link: www.lomadee.com

Existem outros programas de afiliados, procure conhece-los. Caso você usa outro, gosta e recomenda, compartilhe nos comentários conosco.

Nunca se esqueça de que a melhor forma de aumentar os lucros é investindo bem no seu conteúdo e no design do blog. Não seja ansioso e tenha como principal foco a qualidade de suas postagens. Lucro é consequência de um bom trabalho.

Fonte:http://www.ferramentasblog.com/

Receba nossas atualizações:

Novidade! Crie/Personalize seu blog para celular no Blogger

noreply@blogger.com (Fernando Lúcio) — Sun, 27 Nov 2011 17:14:00 +0000

O Blogger inovando pesado ultimamente! Esse ano pode ser considerado O ano das novidades do Blogger.

A novidade da vez é a personalização total do seu blog para mobile. Basta conhecer HTML e estudar um pouco os novos códigos do Blogger.

Como modificar o template para mobile?

Por enquanto (não sei até quando) só é possível criar uma versão para celular trabalhando diretamente com códigos. Se você não está muito animado com isso, contrate um desenvolvedor ou escolha um modelo disponível no Blogger.

Aprenda como fazer suas modificações:
1) Faça login no Blogger, acesse o “Modelo” do seu blog e clique na engrenagem abaixo da opção “Celular”.

2) Escolha “Sim, mostrar modelo para celulares em aparelhos celulares”. Depois em modelo para celular, escolha “Personalizar” e salve.

3) Agora a parte mais difícil (todavia não é um bicho de 7 cabeças), faça seu layout para mobile.

Fonte: http://www.ferramentasblog.com

Receba nossas atualizações:

Como criar uma página para seu blog no Google+

noreply@blogger.com (Fernando Lúcio) — Sun, 27 Nov 2011 17:12:00 +0000

A nova rede social do Google lançou uma novidade que já era esperada por todos há muito tempo! Agora é possível criar páginas de empresas, blogs, ONGs, etc. Como as páginas no Facebook mesmo.

Vale lembrar que essa opção é nova, por tanto podemos esperar uma personalização avançada e novos recursos em breve.

Se você quer um blog profissional, não fique de fora dessa! Crie sua página no Google Plus!

Criando uma página no Google Plus:

1) Faça login no Google Plus, depois abra o seguinte link: http://plus.google.com/pages/create

2) Escolha a categoria desejada, preencha o formulário e clique em “Criar”.

Recomendo usar a categoria: “Artes, entretenimento ou esportes”, depois escolha a subcategoria “Blog”.

3) Coloque uma “Frase” sobre seu blog ou sobre o que você está criando, escolha uma foto para o perfil e clique em “Continuar”.

4) Publique em seu perfil a sua nova página, depois clique em “Continuar”.

5) Agora sua página está pronta! Divulgue e publique novidades!

Navegando nas opções:

Seguindo as setas enumeradas da imagem acima, vamos explicar como funciona sua página:
1) Escolha a página que você quer navegar e publicar. Sendo elas: Suas páginas criadas e a página do seu perfil pessoal;
2) Navegue como no seu perfil padrão (Página Inicial, Fotos, Perfil e Círculos);
3) Postar algo na página criada (Links, textos, fotos, perguntas), como em uma página qualquer do Google+;
4) Escolha um dos vários ícones disponíveis para você usar em seu site/blog afim de divulgar a página criada;
5) O link da sua página.

Fique atento:
- Crie e atualize! Não é interessante ter uma página parada, sem novidades!
- Não divulgue apenas postagens do seu blog. Escreva novidades, faça perguntas, mantenha uma relação direta com os seus “seguidores”.

Fonte: http://www.ferramentasblog.com

Receba nossas atualizações:

Encontre o template ideal para seu blog

noreply@blogger.com (Fernando Lúcio) — Sun, 27 Nov 2011 17:09:00 +0000

Quando falamos em blogs não podemos deixar de falar da importância de um layout agradável ao leitor e que satisfaça o próprio blogueiro. Nenhum site consegue fazer sucesso só com um conteúdo bom, é necessário que esse site tenha uma aparência boa e que faça com que seus visitantes lembrem-se da sua página através da imagem transmitida pelo layout.
Porém muitos usuários do blogger não sabem onde encontrar o template dos seus sonhos. Então resolvi publicar aqui O site. Conheça o BTemplates.

O BTemplates é um site que reúne os melhores templates da blogosfera para o blogspot, colocando o download, o blog demonstração, o site autor e tudo mais. É muito simples, você navega pelos marcadores, olhando só o estilo que te agrada. E o melhor: Tudo grátis!

Fonte: http://www.ferramentasblog.com

Receba nossas atualizações:

Blogger Themes – Excelentes templates gratuitos para Blogger

noreply@blogger.com (Fernando Lúcio) — Sun, 27 Nov 2011 17:07:00 +0000

Sabemos que investir no design do blog é essencial. Todavia, muitos blogueiros não sabem fazer um layout e não têm condições de pagar um profissional para fazer o trabalho. No entanto isso não é desculpa para ter um template feio e mal estruturado. Existem milhares e milhares de templates paraBlogger, gratuitos! Muitos deles são de extrema qualidade, basta procurar.

Se você não sabe onde procurar, o Códigos Blog te dá o caminho! Conheça o Blogger Themes, um site com muitos templates gratuitos e pagos para blogs da plataforma Blogger.

Blogger Themes

Acesse o site, escolha o template, faça download e instale no seu blog.

Como instalar um template no Blogger?

1) Acesse a página “Modelos”;
2) Clique em “Fazer backup/Restaurar”;

3) Escolha ao arquivo XML do template escolhido;

4) Clique em “Fazer upload”. Caso o Blogger pergunte se você quer manter todos os widgets, basta você escolher entre Sim ou Não.

Fonte: http://www.ferramentasblog.com

Receba nossas atualizações:

Seja Postador

noreply@blogger.com (Fernando Lúcio) — Sun, 27 Nov 2011 15:50:00 +0000

Receba nossas atualizações:

Como Colocar Botões “Tweet” Para Enviar Posts Ao Twitter

noreply@blogger.com (Fernando Lúcio) — Fri, 25 Nov 2011 17:08:00 +0000

Com o novo botão ”Tweet “ (oficial do Twitter) qualquer um pode compartilhar o seu artigo em segundos. Ele carrega rapidinho. São três tipos de botões muito simpáticos: Vertical (com contagem de tweets), Horizontal e Sem contagem.

Nesse post vamos aprender como adicionar esses botões Twitter no seu blog Blogger.
Siga os passos:

1 -Entre na página do TWITTER e escolha o modelo que deseja exibir. Se quiser, também pode definir um texto para os tweets, clicando na aba “Tweet Text”

2- Você verá abaixo o código que deverá ser copiado e colado em seu template. Copie e cole em um bloco de notas.

3 – Faça login no Blogger, clique em “Design” e depois “Editar HTML” e marque a opção “Expandir modelos de widgets”

Para exibir o botão abaixo do título do post, procure pelo trecho:

<div class='post-header-line-1'>

Cole o código do botão que você copiou, ABAIXO desse trecho.

Para exibir o botão no final das postagens, cole o código do botão ABAIXO do seguinte trecho:

<div class='post-footer-line post-footer-line-1'>

Prontinho!

Receba nossas atualizações:

Find Ícons – O Maior Banco De Ícones Da Web

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 13:12:00 +0000

O Find Icons é o mais completo buscador de ícones que eu conheço. São mais de 300.000 ícones.
Podemos encontrar exatamente o que procuramos, no tamanho e formato que queremos. Por exemplo : Se você procura um ícone para o Twitter, digita twitter na caixa de busca, certo? Na página com os resultados da busca você verá na coluna esquerda, todas as opções de fundo, filtro, modelo, etc….

Depois de escolher seu modelo você verá as opções de tamanho e formato (png, jpeg, etc.)

Se quiser buscar pelo Browse, encontrará os milhares de modelos de todos os autores

Outra possibilidade é transformar qualquer imagem do seu arquivo em ícone de qualquer formato. Clicando no botão “CONVERT” você faz o upload, da imagem, escolhe o formato e tamanho, clic em “Convert” e faça o download.

Podemos também fazer upload de nossas criações e enviar para o banco de dados do site.
Dê um pulinho lá e confira. Find Icons

Dica HTML para inserir uma imagem com link.
Hospede sua imagem no próprio Blogger ou num site tipo Tinypic . Depois edite o código abaixo.

<a href="ENDEREÇO DO LINK"><img src="ENDEREÇO DO ÍCONE"></a>

Para colocar um ícone na Sidebar, vá em “Layout” ► “Adicionar um Gadget” e escolha a opção “HTML/JavaScript”. Cole o código editado, dentro do box. Se quiser que seu ícone ou imagem fique centralizado, escreva assim:

<center>
<a href="ENDEREÇO DO LINK"><img src="ENDEREÇO DO ÍCONE"></a>
</center>

Post de número 100 =) follow me on twitter

Receba nossas atualizações:

Sua Página Pessoal Com Muito Estilo – Flavors.Me

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 13:11:00 +0000

@Gemablog publicou a matéria e eu, curiosa que sou, fui conferir. Sou leitora assídua da Gema, li há alguns dias uma matéria (aqui) onde ela faz referência a Tina Chen, uma das desenhistas do novo Designer Blogger e também me surpreendi com a beleza e simplicidade da página dela. Não imaginei que seria um site disponível, free, para criar páginas lindas.
Ontem no Twitter Gema enviou o link para sua página http://flavors.me/gemablog. Outra vez fui conferir e me encantei. Claro que já fiz a minha também.http://flavors.me/mamanunes

Flavors.me é uma excelente ferramenta para criar sua página pessoal, supreendentemente fácil de se configurar e com resultados estéticos e funcionais muito bons. A vantagem é que podemos exibir todo o conteúdo de nossa atividade na rede graças as aplicações que conectam a página ao Twitter, Facebook, Flickr, RSS, YouTube e outros
No Twitter podemos ver algumas páginas que servem para se ter uma idéia e no vídeo abaixo, você poderá aprender a criar a sua Flavors.me. Muito fácil!

Flavors.me from Jack Zerby on Vimeo.

Receba nossas atualizações:

Anexar Arquivo Ao Gmail – Drag And Drop

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 13:09:00 +0000

Hoje descobri um novo método para anexar qualquer arquivo a uma mensagem no Gmail: Foto, imagens, documentos, etc. O Google adicionou um recurso conhecido como Drag and Drop, que permite arrastar e soltar qualquer documento de uma pasta, ou do desktop do seu computador. Por ser do próprio Gmail, não há necessidade de nenhuma configuração para usar o recurso. A novidade só está valendo, por enquanto, para usuários do Google Chrome e Mozzila Firefox 3.6ou superior. A equipe do Google afirma que assim que os outro navegadores forem compatíveis, a função será liberada.
Veja um vídeo muito bom, feito pelo Ricardo Fraga do GOOGLE DISCOVERY para quem vão os créditos da matéria, com a recomendação Vale um Clicão no site dele

Receba nossas atualizações:

Códigos Blog – Um Excelente Blog Para Consultas

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 13:08:00 +0000

Se você é blogueiro, gosta de se aventurar na personalização de templates para a plataforma Blogger ou é curioso sobre o tema, não deixe de visitar o CÓDIGOS BLOG do Paulo Estevão. Assine a newsletter para receber as atualizações do site que traz sempre boas dicas, com explicação clara sobre novidades e outros assuntos relacionados ao Blogger.
Hoje a publicação é muito útil e eu recomento:

10 Códigos específicos para criação de um template para Blogger

......

Paulo Estevão, cursa Engenharia de Computação é blogueiro e Twiteiro nas horas vagas. Louco por internet, tecnologia e design. Apesar de geek é a apaixonado em esportes de uma forma geral.

Receba nossas atualizações:

Menu Inspirado Macintoch OSX Docks

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 13:06:00 +0000

Pure CSS Fish Eye Menu
Desenvolvido por Jamp Mark Web Creations . Menu de navegação com ícones exibidos em forma linear, bem interessante. Ao passar o mouse sobre o ícone ele expande dando um efeito muito bacana.

Aqui vamos ver dois tipos de CSS Fish Eye menu:

Fish Eye 1.Expand-Down Menu
Expande imagem para baixo. Veja demo.

Código CSS Copiar e colar dentro do seu HTML, abaixo do código: ]]></b:skin>

<style type="text/css">
<! --
. expandir-down (
font-family: Arial, Helvetica, sans-serif;
line-height: normal;
margin-top: 20px;
height: 150px;/*-----Altura do menu-----*/
width: 500px; /*-----Largura do menu-----*/
background: #000000 url (ENDEREÇO DA IMAGEM DO BACKGROUND) no-repeat;
margin-bottom: 30px;
)
/ * Reset margens e paddings * /
. expandir-down * (
margin: 0;
padding: 0;
)
. expandir-down ul (
padding-top: 10px;
margin-left: 10px,
)
. expandir-down ul li (
float: left;
list-style-type: none;
)
. expandir-down ul li a (
text-decoration: none;
)
. expandir-down ul li uma img (
width: 50px; / * largura inicial de imagens, 50% da largura * /
height: 50px; / * altura inicial de imagens, 50% da altura * /
border: none;
)
/ * Inicialmente, não mostrar o rótulo dentro <span> tag * /
. expandir-down ul li um span (
display: none;
)
. expandir-down ul li: hover um span (
/ * Mostrar rótulo mouse hover * /
display: block;
font-size: 14px;
text-align: center;
color: # fff;
)
/ * Expandir a imagem para 100% em rato pairar.
** Uma imagem torna-se activa quando rato que paira
** Idealmente, a imagem deve ter mesma largura e altura conforme abaixo
* /
. expandir-down ul li: hover (uma img
width: 100px;
height: 100px;
)
/ * Expandir a imagem ao lado do direito da imagem ativa a 60% usando + selector * /
. expandir-down ul li: hover (+ li uma img
width: 60px;
height: 60px;
)
/ * Expandir a imagem segunda à direita da imagem ativa a 55% usando selectores + * /
. expandir-down ul li: hover li + + li uma img (
width: 55px;
height: 55px;
)
->
</ style>

Codigo HTML (Copiar e colar abaixo da tag </head>)

<div class="expand-down">
<ul>

<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> home </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> twitter </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> recados </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> email </ span></ a>
</ li>

</ ul>
</ div>

Fish Eye 2. Expand-Up Menu
Expande imagens para cima . Veja demo.

Código CSS Copiar e colar dentro do seu HTML, abaixo do código: ]]></b:skin>

<style type="text/css">
<! --
. expandir-up (
fonte-family: Arial, Helvetica, sans-serif;
line-height: normal;
height: 150px;
width: 500px;
background: #000000 url (ENDEREÇO DA IMAGEM DO BACKGROUND) no-repeat;
overflow: visible;
margin-bottom: 30px;
)
/ * Reset margens e paddings * /
. expandir-up * (
margin: 0;
padding: 0;
)
. expandir-up ul (
margin-left: 10px;
)
. expandir-up ul li (
float: left;
list-style-type: none;
/ * Criar um espaço reservado para a imagem ampliada para fazer este trabalho no IE * /
padding-top: 65px;
/ * Margem para colocar o menu na parte inferior * /
margin-top: 25px;
)
. expandir-up ul li a (
text-decoration: none;
)
. expandir-up ul li uma img (
width: 50px; / * largura inicial de imagens, 50% da largura * /
height: 50px; / * altura inicial de imagens, 50% da altura * /
border: none;
)
/ * Inicialmente, não mostrar o rótulo dentro <span> tag * /
. expandir-se uma ul li span (
display: none;
)
. expandir-up ul li: hover um span (
/ * Mostrar item rótulo mouse hover * /
display: block;
font-size: 14px;
text-align: center;
color: # fff;
/ * Rótulo mover-se para passar imagem acima * /
margin-top:-65px;
)
/ * Expandir a imagem para 100% em rato pairar.
** Novamente, ideal dimensão da imagem é igual a largura e altura abaixo
* /
. expandir-up ul li: hover (uma img
width: 100px;
height: 100px;
)
/ * Expandir a imagem ao lado do direito de imagem ativa a 60% usando + selector * /
. expandir-up ul li: hover (+ li uma img
width: 60px;
height: 60px;
/ * Movimento imagem por 10px tão fundo alinha com outras imagens * /
margin-top:-10px;
)
/ * Expandir a segunda imagem, à direita da imagem ativa a 55% usando selectores + * /
. expandir-up ul li: hover li + + li uma img (
width: 55px;
height: 55px;
/ * Movimento imagem por 5px tão fundo alinha com os outros itens * /
margin-top:-5px;
)
->
</ style>

Codigo HTML (Copiar e colar abaixo da tag </head>)

<div class="expand-up">
<ul>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> home </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> twitter </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> recados </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> email </ span></ a>
</ li>

</ ul>
</ div>

Se quiser, confira o tutorial original, aqui.

Receba nossas atualizações:

Efeito “Opacity” Menu-Redes Sociais

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 13:05:00 +0000

Ter um menu para suas redes sociais além de muito charmoso é bastante útil para a divulgação do seu blog não é? Agora que tal dar um efeito especial a ele.

Veja exemplo aqui

Esse código CSS permite criar efeito bem simpático, e muito simples de customizar. Usei esses ícones como exemplo mas você pode e deve procurar os que mais combinam com seu layout e, é óbvio, ícones das redes as quais você pertence.

Primeiro passo: Escolha os ícones, salve em seu computador e hospede em um site tipo Phobucket, Picasa ou Tinypic.
Sugestão: No site Iconfinder você vai encontrar 100.000 ícones FREE para fazer download.

Muito bem, tendo os ícones salvos e hospedados, vamos editar aos códigos.
Código CSS

<style type="text/css">
img {
border: 0;
}
#menu {
width:400px;
position:relative;
height:100px;
margin:100px auto;
}
#menu a:visited, #menu a {
text-decoration:none;
color:#d00;
font-weight:bold;
#menu a:visited img, #menu a img{
filter: alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.40; opacity:0.4;
}
#menu a:hover {
background-color:transparent;
color:#06a;
}
#menu a span {
display:none;
}
#menu a:hover span {
display:block;
position:absolute;
top:50px;
left:0;
font-size:12px;
height:18px;
padding:4px;
font-weight:normal;
color:#a40;
}
#menu a:hover img {
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.00; opacity:1;
}
</style>

Codigo HTML

<div id="menu">
<a href="ENDEREÇO DO LINK"> <img src="ENDEREÇO DA IMAGEM" alt="" title="" /> <span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span></a>
<a href="ENDEREÇO DO LINK"> <img src="ENDEREÇO DA IMAGEM" alt="" title="" /> <span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span></a>
</div>

O Código CSS é o que dá o estilo (opacidade, estilo das letras, largura, altura) e podem ser alteradas de acordo com seu gosto, espaço e número de ícones que serão inseridos.
O Código HTML, define o link, a imagem (ícone) e texto que aparecerá ao clicar. Observe o trecho entre as tags <div id="menu"> e </div> :

.
<a href="ENDEREÇO DO LINK"> <img src="ENDEREÇO DA IMAGEM" alt="" title="" /> <span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span>
.

Repita o código para cada ícone que quer no menu.

Caso não queria que o texto apareça, é só apagar o trecho:

.
<span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span>
.

Sim, agora você quer saber onde e como colocar no seu template, claro. Eu sugiro que você use um blog de testes antes de se aventurar no seu template, é mais seguro.

Faça Login, no painel clic em Layout, em layout clic “Editar HTML”.
Copie e cole o Código CSS acima da tag </head>

Para que o menu apareça na Sidebar

Copie e cole o Código HTML abaixo seguinte trecho:

<div id='sidebar-wrapper>

Para que o menu apareça no final do post

Clic em “Expandir modelo de widgets” e procure o seguinte trecho:

<div class='post-footer-line post-footer-line-1'>

Copie e cole o Código HTML abaixo dele.

Receba nossas atualizações:

Barra De Navegação Com Menu Expansível

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 13:04:00 +0000

Networkbar Generator permite que você crie uma barra de navegação personalizada, com menu expansível para quantos links forem necessários e você não precisa entender nada de Java Script ou HTML.
Para criar essa simpática e prática navebar, você só precisa fazer um registo no site Networkbar Generator e depois começar a construção. Recomendo assistir o vídeo Demo (em inglês) bem explicativo. Não tem erro.

CSS Style Preset: Escolha Estilo
Title Font: Fonte do título
Title Size: Tamanho da fonte do título
Title Color: Cor da fonte do Título
Select Font Color: Cor do texto dos menu
Select Background: Cor do fundo dos menus
Bar Background: Cor principal da navebar

Não tenha pressa , vá fazendo alterações e clicando em “preview” até que fique mais adequado ao seu layout.

Veja que há três janelinhas = Links:(include http://).
Clic em “Add a row” , escreva o nome e endereço dos links. Para cada link que queira adicionar, clic novamente “Add a row”
Exemplo:

Nome: Recomendo
Link1: Templates E Dicas DNB
URL: http://dicas-noblog.blogspot.com
Link2: Rock Forever
Url: http://rockforever1.blogspot.com

Quando ficar pronta, clic em “Get the Code”.
Copie todo o código que vai aparecer na janela.
Faça login, no painel clic “Layout”, em layout clic “Editar HTML”. Procure pelo seguinte trecho

<head> .

Cole todo o código que você copiou, imediatamente abaixo.
Uma vez registrada e criada, o site vai guardar a navebar e sempre que você acessar o site e fizer o login, sua navebar estará disponível para ser editada novamente caso seja necessária alguma alteração, como acrescentar um link, por exemplo.

Receba nossas atualizações:

Barra De Navegação - Skysa

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 13:01:00 +0000

Talvez você já tenha reparado que muitos blogs e sites apresentam uma barra de navegação no rodapé da página para oferecer mais informações e maior interação com redes sociais. A mais famosa é a barra do wibiya, mas não é a única opção, há também o Skysa e o Meebo. Escolhi o Skysapara compartilhar porque me pareceu bem funcional, totalmente costumizável, com várias aplicações como chat, links, busca, tradutor, interação com twitter, facebook… E é relativamente fácil de instalar.

Vamos ver o passo a passo nesse tutorial.

Faça o registro e aguarde a confirmação por email, faça o login, etc…

Você poderá escolher entre os modelos oferecidos pelo site ou customizar.

Se escolheu customizar, veja as possibilidades, vá testando até encontrar o resultado que mais combina com seu layout. Aqui ressaltei apenas a cor básica e o estilo das bordas da barra que pode ser arredondada no ângulo que queira, ou não arredondada, depende do seu gosto. Depois clique em “Continue an Get Code”

Para instalar as aplicações, tipo: Facebook, Twitter, Tradutor, Chat, etc… clique em “Get Apps”.

A próxima página apresentará todos os aplicativos disponíveis. Neste exemplo eu escolhi exibir um link para o Youtube. Veja:

Ao clicar “Add” você será dirigido para sua pagina de aplicações onde poderá organizar do seu modo,(clique com botaõ direito do mouse e arraste). Observe o resultado na vista prévia..

Depois é só clicar em “Bar Code”

Se seu blog está hospedado no Blogger, Wordpress, Ning ou Spruz, o site encaminha para instalação automática, senão, você terá o código HTML do script para inserir manualmente.

Mãos a obra. Espero que dê tudo certo.

Receba nossas atualizações:

Tutorial Para Criar Menu ► “Menubuilder”

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 13:01:00 +0000

Veja como criar um menu de maneira fácil e gratuita, sem precisar de cadastro ou registro, usando o aplicativo “Menubuilder” .
Para quem não sabe, menu é aquela área com links para outras páginas ou sites que você queira indicar, muito útil para direcionar seus leitores para página com informações tipo: “contato”, “sobre o blog”, “home”, etc..., como vemos no modelo. O Menu pode ser horizontal ou vertical. Em geral usamos o vertical
acima ou abaixo do cabeçalho do blog/site, mas também poderá ser horizontal, mais usado na sidebar. Vamos aprender a cria-la com o Menubuilder e depois aprender como instalar no Blogger.

Acesse o site, depois escolha uma cor que combine com seu modelo de template.
Escolha também a cor que queria para o efeito hover (muda de cor ao passar o mouse). Marque a opção escolhida.
Faça o mesmo com o formato “Menu Type”, marque a opção “Horizontal” ou “Vertical”
Clic em “Generate/Previw” e veja se está do seu agrado.
Clic em download para baixar o arquivo.

Você receberá as imagens necessárias e os códigos CSS e HTML em uma pasta zipada. Salve na área de trabalho (ou em em alguma pasta de arquivo)

...................................................................

....................................................................

Clique com o botão direito do mouse sobre o arquivo que você salvou e marque a opção “Extrair Aqui” você terá aberto duas imagens (left e right) e o código do menu.

......................................................................

.............................................................................................

Muito bem, até aqui, estamos com tudo arquivado, agora vamos copiar os códigos.
Clic sobre o ícone “menu” . Seu menu abrirá em outra pagina. Clic com o botão direito do mouse sobre essa página e depois clic em “Código Fonte”. Eba!! Tcharannn!!! Aparecerá todo o código.

................................................................................................

.........................................................................

Salve todo esse código e copie dentro de um bloco de notas.
Agora, no bloco de notas, vamos editar primeiro o código CSS, inserindo as imagens “left” e “rigth” do arquivo que você salvou.
Hospede as imagens num site tipo Tinypic, Photobucket ou até mesmo no próprio Blogger.
Veja: Dentro da sua caixa de postagem, clic no ícone de imagem, envie e clic OK

....................................................................

Hospede as duas imagens (_left e _right), copie todo o endereço e cole no dentro do código CSS, onde está grifado em vermelho.

<style type="text/css"&gt
#menu ul,#menu li { margin:0; padding:0}
#menu li {list-style:none;width:160px;clear:both;}
#menu a { display:block;margin:0 auto;color:#fff;text-decoration:none; background:url(AQUI.ENDEREÇO.DA.IMAGEM_right.png) right top no-repeat;}
#menu a span { display:block;text-align:left;background:url(AQUI.O.ENDEREÇO.DA.IMAGEM_left.png) left top no-repeat; font:bold 12px/30px Arial, Helvetica, sans-serif; padding:0 20px; }
#menu a:hover { background-position:right bottom;text-decoration:underline}
#menu a:hover span { background-position:left bottom; }
</style>

Sim, depois de tudo isso, vamos aprender como colocar esses códigos lá dentro do seu blog.
Vamos usar como referencia, um modelo “Minima” do Blogger.

#Dica: Tenha sempre um modelo de testes para fazer suas experiencias.

Faça login no Blogger em seu painel clic na opção “layout” e depois clic em “Editar HTML”.
NÃO ESQUEÇA DE FAZER UM BACKUP DO TEMPLATE ANTES DE QUALQUER ALTERAÇÃO.
Se você criou um meu vertical e quer coloca-ló na sidebar faça o seguinte:
Dentro dos códigos do template, procure pelo trecho:

]]></b:skin>

Copie e cole todo o seu código já editado, ANTES/ACIMA de ]]></b:skin>

Salve o template.

Clic na aba “layout” e depois “Adicionar um Gadget”. Escolha a opção“HTML/Javascript”

Volte ao seu bloco de notas para editar o HTML

<div id="menu">
<ul>
<li><a href="ENDEREÇO"><span>Home</span></a></li>
<li><a href="ENDEREÇO"><span>About</span></a></li>
<li><a href="ENDEREÇO"><span>Blog</span></a></li>
<li><a href="ENDEREÇO"><span>Contact</span></a></li>
</ul>
</div>

Escreve o endereço e o nome (link) , com muito cuidado para não apagar nenhum sinal.

Copie o código editado dentro da caixa do elemento HTM/Javascript e salve.

Se você criou um menu horizontal e quer exibi-lo abaixo do cabeçalho, faça todos os passos anteriores para editar o CSS e o HTML do arquivo que você salvou.

Depois volte em “Editar HTML” cole o código CSS do menu horizontal (já editado)ANTES/ACIMA de ]]></b:skin>

Depois procure pelo seguinte trecho:

<div id='content-wrapper'>

Cole todo o código HTM já editado, ANTES/ACIMA do trecho.

Visualize e se estiver tudo OK, SALVAR O TEMPLATATE.

Veja DEMO dos dois modelos.

#Dica: Para acrescentar mais links, basta repetir o trecho no HTML e editar

<li>
<a href="ENDEREÇO"><span>Outro Link</span></a>
</li>

Receba nossas atualizações:

Menu Vertical Deslizante (Dropdown) Apenas Com CSS/HTM

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 12:58:00 +0000

Vamos aprender a criar um belo menu deslizante, também chamado de “Acordeom” ou “Drop-down menu”. Publicado por SOHtanaka e por JMiur (Vagabundia). Muito simples de montar, sem usar nenhum script, apenas “truques” de CSS. Ideal para economizar espaço na sidebar.
Modelo criado por JMiur

Faça login ► Clique em “Design” e depois ► “Editar HTML”
O código CSS deve ser colado acima da tag </head>:

<style type="text/css">
ul.sidenav {
/* el rectángulo contenedor */
list-style: none;
margin: 0 auto;
padding: 0;
width: 250px;
/* propiedades optativas */
background-color: #CD853F;
border: 1px solid #300;
outline: 1px solid #FFF;
}
ul.sidenav li a {
/* el enlace de cada item */
display: block;
text-decoration: none;
/* propiedades optativas */
background: transparent url(URL_imagen_icono) no-repeat 5px 7px;
border-bottom: 1px solid #AD651F;
border-top: 1px solid #300;
color: #FFF;
font-size: 18px;
padding: 15px 10px 10px 45px;
width: 195px;
}
ul.sidenav li a:hover {
/* propiedades optativas */
background: #CD853F url(URL_imagen_icono) no-repeat 5px 7px;
border-top:1px solid #300;
}
ul.sidenav li span {
/* el contenido permanece oculto por defecto */
display: none;
}
ul.sidenav li a:hover span {
/* el contenido se muestra al pasar el cursor encima */
display: block;
/* propiedades optativas */
font-size: 12px;
padding: 10px 0;
margin: 0 0 0 -30px;
}
</style>

Você poderá alterar o tamanho e cor do box, cor das letras e os ícones.

Agora vamos ao HTML que pode ser colocado em um elemento de página (dentro da página Design)

<ul class.="sidenav">
<li>
<a ref.="URL_DO_O_LINK">Home <spam>
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Blog <spam>
Blandit turpis patria euismod at iaceo appellatio,
</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Tutorial <spam>
Blandit turpis patria euismod at iaceo appellatio,.</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Arquivo<spam>
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
</ul>

Em azul o endereço para direcionamento
Em negrito o nome do link
Em vermelho, o texto que se desprende ao passar o mouse

Se quiser acrescentar mais abas, repita o trecho abaixo colando sempre ANTES de </ul>

<li> <a ref.="URL_DO_O_LINK">TÍTULO <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Cátion utrum utrum abigo demoveo immitto aliquam sino aliquip. </spam> </a> </li>

Receba nossas atualizações:

Retirar A Navebar Do Blogger

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 12:56:00 +0000

NAVEBAR é aquela barra do Blogger que fica no topo do seu template (blog) onde você acessa página para login. Muita gente, inclusive eu, não gosta porque compromete a estética do layout, deixa a página mais pesada visualmente .
Então, se você quiser retirá-la siga os seguintes passos:

Faça login e no painel clic em "Layout" depois clic em "Editar HTML" . Dentro da página, procure pelo trecho abaixo. #Dica: use as teclas Ctrl + F

]]></b:skin>

Agora copie o código abaixo e cole ANTES de ]]></b:skin>

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

Visualize e se estiver tudo OK, sale o template.

Receba nossas atualizações:

Navebar Do Blogger Em Estilo Transparente

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 12:54:00 +0000

O que é a Navebar do Blogger? É a barra de navegação original do Blogger, que fica bem no topo do template, antes do cabeçalho. Como o Blogger apresentava apenas quatro possibilidades de cores, ficava difícil adequar ao desenho do template, por isso a maioria dos designers a ocultam. Agora o Blogger nos oferece duas opções transparentes, que não vão “brigar” com o desenho.

Confira em sua página “Layout” (imagens abaixo)

Caso você use um template sem a Navebar Blogger e queira recoloca-la, clic na aba “Editar HTML”. Procure pelo trecho abaixo:

# navbar-iframe {
height: 0px; visibility: hidden; display: none; }

Apague todo o código, visualize, se estiver tudo bem salve o template.
Volte a sua página “Layout” escolha sua Navebar.

Obs.: Esse recurso não funciona no Internet Explorer 6. Se você “ainda” usa essa tranqueira, que tal pensar em mudar para o IE8 ou Firefox ? o_0

Fonte: Ipietoon

Receba nossas atualizações:

Corretor Ortográfico Do Blogger

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 12:53:00 +0000

Essa é uma ferramenta indispensável para qualquer pessoa que se preocupe em escrever corretamente. Até quem domina bem a lingua portuguesa pode esbarrar em teclas erradas e digitar um palavrão (hehe). Não “pague mico”! Use o corretor e pronto.
Há tempos eu sentia falta desse recurso no box de postagens do Blogger, mas como uso o Windows Live Riter (muito melhor), não dei muita importância. Hoje descobri que a ferramenta voltou a funcionar para quem escreve seus posts pelo Blogger in Draft.

Pois é, nada melhor do que um texto escrito com capricho e devidamente corrigido.

Receba nossas atualizações:

Tudo Sobre O Google Buzz

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 12:51:00 +0000

Li sobre o assunto em vários sites e blogs para tentar entender e aprender a usar a novidade , o Google Buzz . A nova ferramenta inserida no Gmail permite compartilhar suas atualizações dos blogs, fotos, vídeos e mais. Acho que é mais uma das tentativas do Google para se integrar as redes sociais. Compartilho aqui uma relação dos artigos mais esclarecedores sobre o assunto, na minha humilde opinião. Saiba o que é, como ativá-lo, vantagens e desvantagens, como desativá-lo, etc..Enfim... Lá vamos nos...

Saiba como funciona o Google Buzz, a nova ferramenta social do Google
►por Fernando Panissi para o G1 Notícias/Tecnologia/Tira dúvidas

As Vantagens e Desvantagens do Google Buzz
► por Cammyl para o site Under Linux

11 DICAS PARA GOOGLE BUZZ ► por Edu Chaves para o site Sequelanet

Como remover ou esconder Google Buzz do seu Gmail
►por Cilene Bonfin

Imagem (ilustração): Digital Journal

Receba nossas atualizações:

Compartilhar Posts No Google Buzz

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 12:50:00 +0000

Este tutorial explica como adicionar alguns modelos de botões Google Buzz ao seu blog Blogspot.
Siga os passos abaixo:
Faça login no Blogger e no painel clic em “layout”. Em seu layout clic na aba “Editar HTML” e clic na opção “Expandir modelos de widgets”

CÓDIGO PARA EXIBIR ESTE MODELO

<div style='padding: 4px; float: right;'>
<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title+ "&srcURL=" + data:blog.homepageUrl ' rel='nofollow' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih-BSV2MU69_k_VWbIhVytUA49pR3yhF7W3tdT9QYtnLmymfNiAU0TSjBo8suvC5jEVfpBSxie1Vk_YbHdWVAq4H0RtrFAkinHWckuN3BuFkWwmw_iCER4Tezxs5J5lsFTuqfOm5o9Zd16/' style='border:0px;'/></a>
</div>

CÓDIGO PARA EXIBIR ESTE MODELO

<div style='padding: 4px; float: right;'><a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title+ "&srcURL=" + data:blog.homepageUrl ' rel='nofollow' style='text-decoration:none;' target='_blank'><img alt='Buzz It' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLObe3HgjcOXJfA5QbDmH6yz4Cc57Zz7pRo43v4adaT0-x6j6dfLfr3YuqXJnu7BUhMiDI5-u7qpzPNofdOMnYkN7x5ul1VQoLWuaztrs77pmP-cQq0jMMMf8QyluPlB9ODtbASf70MOUd/' style='border:0px;'/></a></div>

Escolha o modelo que mais te agrada, copie o código correspondendente. Procure em seu HTML o seguinte trecho:

<data:post.body/>

Cole o código imediatamente ABAIXO desse trecho para exibir o botão no início do post. Se preferir que ele flutue à esquerda, troque onde está escrito “right” por“left”.

Se quiser exibir o botão no rodapé do post, procure pelo seguinte trecho

<p class='post-footer-line post-footer-line-1'>

Cole o código do botão escolhido, ABAIXO desse trecho.

#dica►Repare no código e seguinte trecho:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLObe3HgjcOXJfA5QbDmH6yz4Cc57Zz7pRo43v4adaT0-x6j6dfLfr3YuqXJnu7BUhMiDI5-u7qpzPNofdOMnYkN7x5ul1VQoLWuaztrs77pmP-cQq0jMMMf8QyluPlB9ODtbASf70MOUd/

Este é o endereço do ícone, então, caso você queira substituir por outro ícone mais a seu gosto, hospede no Blogger ou em um site tipo Tinypic e mude o endereço.

Veja esse, por exemplo do Blogger Widgets

Ou este do Smashing Webs 2.0

Faça uma pesquisa e lembre-se de que sempre vale a pena ter opções para compartilhar conteúdo.

Receba nossas atualizações:

Detecção Automática De Spam Para Os Comentários - Blogger

noreply@blogger.com (Fernando Lúcio) — Mon, 14 Nov 2011 12:44:00 +0000

O Blogger anuncia a boa nova, detecção de spam para comentários. Ainda não liberada para todos os blogs, pelo menos no meu e não achei a nova guia, mas aguardo ansiosamente.

...

Veja a matéria publicada no mural de ajuda do Blogger.

Caixa de entrada de comentários

Para que você gerencie seus comentários com mais facilidade, criamos uma nova guia Comentários, na qual você pode acessá-los diretamente. Nela, você pode gerenciar comentários publicados, comentários marcados como spam e comentários aguardando moderação, caso tenha ativado a Moderação de comentários.
Os usuários que ativaram a Moderação de comentários continuarão a ver os comentários que precisam de moderação e que ainda não foram sinalizados como spam em Comentários | Aguardando moderação. Os usuários que não ativaram a Moderação de comentários não verão nenhum comentário em Comentários | Aguardando moderação.

Caixa de entrada de spam

Agora o Blogger filtra comentários que possivelmente são spam e os armazena naCaixa de entrada de spam, bem semelhante à pasta de spam do seu e-mail. Quando alguém deixar um comentário no seu blog, o comentário será analisado pelo nosso detector de spam e aqueles identificados como possíveis spam serão enviados para a Caixa de entrada de spam do seu blog, localizada em Comentários | Spam.

Receba nossas atualizações: