Altere o ícone da barra de endereço do seu blog!

Muita gente tem o seu blog a anos e ainda não alterou o ícone que aparece na barra de título do navegador. É legal escolher uma imagem que tenha a ver com o seu blog, pois ela também é salva nos favoritos, identificando o seu site . Bom primeiro vamos incluir o código para exibir o ícone. Esse código até agora tem funcionado em todos os navegadores.

• Crie uma imagem no formato .png e hospede em um site de hospedagem, como por exemplo o Imageshack.us. Agora é necessário converter a imagem para o formato de ícone (.ico). Existem vários sites de conversão, e até mesmo programas que fazem isso, mas um site que recomendo é o Converticon 2.1. ( clique no link, clique no botão "Get Started" e selecione a imagem de seu computador[não esqueça de selecionar em "Arquivos Tipo" o formato .png!, selecione a imagem que criou e clique em "Exportar" e marque a opção 16x16, após é só salvar clicando em "save as"].

• Agora vamos hospedar a imagem que criamos no formato .ico na tamanho 16x16! Hospede o ícone criado em um site que aceite o formato .ico, como por exemplo: MerryPic ou RipWay. Pegue o link gerado e cole no lugar do "endereço da imagem.ico" descrito abaixo em azul.
  

• Localize o código ]]></b:skin>
  

Cole logo abaixo dele o seguite código:
<link href='endereço da imagem.ico'
rel='shortcut icon' type='image/x-icon'/>

<link href='endereço da imagem.ico' rel='icon'
type='image/png'/>

Pronto! Cuidado para não colar o url errado do ícone. Tem que ser o do ícone e não o da página que exibe os urls do ícone.


+ Dicas: Encontre pacotes de ícones na internet, disponíves para download. Baixe e converta ou hospede caso já esteja no formato e tamanho do ícone (16x16)

Ler Mais

Termos

Termos:

É proibido copiar postagens completas desse blog, ou seja, não permitimos que copiem e publiquem nossas explicações na integra, por isso colocamos no final de cada postagem o código com o link para cada uma delas

Permitimos a copia de partes de nossas explicações desde que coloque na mesma postagem um link dizendo que o Dicas para Blogs foi a fonte de onde retirou as informações.

Você não pode criar outro blog usando o nome Dicas para Blogs, afinal já usamos o nome e isso seria uma tentativa de enganar os internautas.

Isso tudo não são regras criadas por nós existem uma base legal para isso:

Direitos Autorias Lei 9610
Cópia ilegal de conteúdo artigo 184 do Código Penal brasileiro

Além disso, agora o Blogger tem uma pagina para receber denuncias sobre cópias de conteúdo de outros blogs quando as pessoas publicam como se fossem elas as autoras(sem citar a fonte de onde retiram o texto ou imagens) e também sobre download de conteúdo protegido por direitos autorais, como: filmes, séries, jogos, programas de computador ou músicas.

Alguns podem pensar que achar cópias indevidas é difícil, mas existem muitos jeitos de fazer isso uma delas é usando o site http://www.copyscape.com/, aproveite e veja se alguém copiou algo do seu blog.

Qualquer duvida deixe um comentário ou escreva para nosso email.

Sobre pedidos de ajuda

Se você está em dúvida sobre algum artigo que foi publicado no blog, envie a sua pergunta nos comentários do artigo em questão e não em outros posts.

Já adianto que, devido ao excessivo número de pedidos de ajuda, nem todas as dúvidas serão respondidas e que, alguns artigos estão com a caixa de comentários desabilitada.

Antes de enviar a sua pergunta, pesquise no índice do blog, no arquivo e na caixa de busca .

Eu não estou disponível para responder dúvidas por Twitter, MSN ou Orkut. Este blog existe para compartilhar com vocês o que aprendi sozinho ou em outros sites.
Posso garantir que tudo o que aprendo está publicado aqui e que quase todas as dicas foram exaustivamente testadas. Se não deu certo com você, tente novamente. Tenha curiosidade!
Use e abuse do Google e conheça outros blogs do gênero.

Sobre cópia de conteúdo

Copiar textos alheios não é bem visto na Blogosfera. Se você deseja começar bem, não caia na tentação de cometer plágio. Plagiadores não chegam a lugar nenhum.

É terminantemente proibida a reprodução total dos artigos deste blog. A reprodução parcial é permitida, desde que seja colocado um link direcionando ao endereço do blog. Confira a nossa licença e a Lei 9.610 que regulamenta os Direitos Autorais no Brasil.

A violação dos Direitos Autorais está prevista no artigo 184 do código penal.

Considerações Finais

Estas regras foram criadas para organizar o blog e devem ser respeitadas.

Ler Mais

Como alterar a imagem do link enviar postagem para um amigo

Para os que gostam de personalizar tudo no blog uma boa dica é mudar aquela imagem da cartinha que serve para enviar uma postagem para um amigo que fica no final de cada postagem. E trocar aquela imagem é mais simples do que parece.

Entre na pagina editar html, clique para expandir o modelo e procure por esse trecho:

<a expr:href=’data:post.emailPostUrl’ expr:title=’data:top.emailPostMsg’>
<img alt=” class=’icon-action’ height=’13′ src=’http://www.blogger.com/img/icon18_email.gif‘
width=’18′/>

Então é só colocar o endereço de outra imagem no lugar que está em negrito e alterar os valores height 13(altura da imagem) e width 18(largura da imagem) e agora já está tudo pronto. Quando visualizar seu blog essa nova imagem aparecerá no final dos posts do seu blog para que seus visitantes possam indicar seu blog por email, apenas tenha cuidado para usar a url correta da imagem.

Ler Mais

Barra de Menu Horizontal

Nesta postagem vocês vão aprender como fazer uma barra de menu com um efeito muito legal chamado "Lava Lamp". A cor padrão do menu será verde, porém você poderá alterar para a cor que mais se enquadrar ao padrão do seu blog.

Let's go!

Primeiro salve o seu template fazendo um backup do mesmo.

• Agora, cole o código abaixo após /* The Top */ ou após a tag <b:skin><![CDATA[

/*top menu*/
#foxmenucontainer{
height:32px;
background:url(http://img14.imageshack.us/img14/2479/menursk.jpg)
repeat-x;
display:block;
padding:0px 0 0px 0px;
border-bottom:4px solid #fff;
font: 14px "Century gothic",verdana,
Arial, sans-serif;
font-weight:normal;
}

• Agora vamos configurar o efeito. Para isso copie e cole o código abaixo após o código anterior:

.lavaLampNoImage {
position: relative;
height: 30px;
width: 990px;
padding: 0px 5px;
margin: 0px 0;
overflow: hidden;

}
.lavaLampNoImage li {

float: left;
list-style: none;
margin:0px 0px;
padding:0px 0px;
}
.lavaLampNoImage li.back {

background-color: #6c943d;
width: 5px;
height: 22px;
border:1px solid #74a446;
top:3px;
z-index: 8;
position: absolute;
}
.lavaLampNoImage li a {
font: 14px Century gothic, Arial, Tahoma, sans seriff ;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 4px;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
border: none;
color: #fff;
}

• Após isso, cole o próximo código após a tag: ]]></b:skin>

<script
src='http://web2feel.com/demosite1/wp-content/themes/forexpress/js/lava.js'
type='text/javascript'/>

<script
src='http://web2feel.com/demosite1/wp-content/themes/forexpress/js/jquery.lavalamp.js'
type='text/javascript'/>

E por último, cole o código abaixo após <body> ou

<div id='foxmenucontainer'>
<div style='float:left; '>
<ul class='lavaLampNoImage' id='A'>

<li><a
expr:href='data:blog.homepageUrl'>HOME</a></li>

<li><a
href='Endereço do link'
title='Título que aparecerá quando colocar o mouse'>Título que aparecerá no menu</a></li>

<li><a
href='Endereço do link'
title='Título que aparecerá quando colocar o mouse'>Título que aparecerá no menu</a></li>

<li><a
href='Endereço do link'
title='Título que aparecerá quando colocar o mouse'>Título que aparecerá no menu</a></li>

<li><a
href='Endereço do link'
title='Título que aparecerá quando colocar o mouse'>Título que aparecerá no menu</a></li>

</ul>

</div>

</div>

<div class='clear'/>

Substitua as frases em azul, verde e laranja:
"Endereço do link"= Endereço do link
"Título que aparecerá quando colocar o mouse"= Escreva o tipo de link que você colocou(ex: Contato, ou Filme etc...)
"Título que aparecerá no menu"= Escreva o nome do link(ex: Contato, Filmes, Jogos etc...)

Um abraço!

Ler Mais

Barra de pesquisa no topo

Não se esqueça de antes de começar, salvar umacópia de seu template, caso não dê certo, é só reinstalá-lo.

Depois de salvo, encontre o código <b:skin><![CDATA[

Cole depois dele o código abaixo:

/*
The Search */

#search
{

height:40px;

width:auto;

padding:20px 0px 0px 5px;

width:225px;

float:right;

}

#search
form {

margin: 0;

padding: 0;

}

#search
fieldset {
margin: 0;

padding: 0;

border: none;

}

#search
p {

margin: 0;

font-size: 85%;

}

#s
{

margin-left:0px;

float: left;

width:160px;

padding: 6px 2px 6px 15px;

background:#ff0000 url(http://img193.imageshack.us/img193/4766/botopesquisa.png)
no-repeat;

border:none;

font: normal 100% "century Gothic", Arial, Helvetica, sans-serif;

color:#fff;

}

#searchsubmit
{

width:40px;

float: left;

background:#ff0000 url(http://img193.imageshack.us/img193/812/botook.png);

border:none;

font: bold 100% "century gothic", Arial, Helvetica, sans-serif;
color: #FFFFFF;

height:29px;

margin-right:5px;

}

.input{

margin-left:5px;

float: left;

width: 194px;

padding: 5px 3px 4px 3px;

background: #EFEFEF url(imagem do fundo da caixa de texo) repeat-x;

border: none;

font: normal 100% "century Gothic", Arial, Helvetica, sans-serif;

color:#333;}

.sbutton
{

margin-right:10px;

float: right;

margin-top: 0px;

background: #97cb10 url(imagem do botão pesquisar) repeat-x;

border: none;

font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;

color: #FFFFFF;

height:26px;

line-height:24px;

}

/*

Após isso encontre o código <!--Top -->

Cole após esse, o código abaixo em vermelho:

<div
id='search'>

<form
action='/search' id='searchform' method='get'>

<input id='s' name='q' type='text' value='Pesquise o
Conteúdo'/>

<input id='searchsubmit' type='submit' value='OK'/>

</form></div>

Agora vamos tentar entender os códigos:

No primeiro código (em azul) temos dois links de imagem destacados com a cor verde.

A imagem atual é de uma barra de pesquisa vermelha.

Você poderá modificar o botão pesquisar e o
botão OK;

Para isso é só você criar ou encontrar outras imagens de barra de pesquisa e salvar em seu computador, hospedar a imagem e colar o seu link no lugar do link da imagem atual que enviei.

Obs:

Na tag: #s
{

Na linha: background:#ff0000
url(http://img193.imageshack.us/img193/4766/botopesquisa.png) , temos o formato da caixa de pesquisa:

Cor por trás da caixa: #ff0000 = vermelho

Imagem: url(endereço
da imagem da barra de pesquisa)

Na tag: #searchsubmit
{

Na linha: background:#ff0000 url(http://img193.imageshack.us/img193/812/botook.png); temos as mesmas configurações, só que a imagem é somente do botão OK

Você poderá modificá-los como quiser( mudar a imagem e a cor do fundo) Se quiser mudar o tamanho, além de encontrar uma imagem maior, deverá mudar o tamanho no código
“Width”( width:40px ou width:160px;) etc..

No segundo código destacado em vermelho temos o código que vai definir o que fará a caixa de pesquisas= PESQUISAR NO SEU BLOG. Na internet encontramos
vários códigos para essa barra de pesquisa. O código que envio faz com que seja pesquisado sem nenhum erro no seu blog. Porém, você poderá aperfeiçoá-lo, se quiser.

SEMPRE QUE MUDAR ALGUMA COISA NOS CÓDIGOS DO TEMPLATE, ANTES DE
SALVAR, CLIQUE EM “VISUALIZAR” ASSIM, SE DER ALGUM ERRO VOCÊ PODERÁ CORRIGIR OU “LIMPAR EDIÇÕES” E COMEÇÃR DE NOVO. ( SE VOCÊ CLICAR EM SALVAR E DER ERRO, É UM POUCO CHATO TER DE ENCONTRAR OS CÓDIGOS DE
NOVO).

Ler Mais

Caixa de pesquisa no seu Blog!

Para colocar uma caixa de busca no blog para que os visitantes façam pesquisas dentro do blog para que as pessoas encontrem o que procuram, é necessário usar código abaixo:

<div align="center"><FORM method=GET action="http://www.google.com.br/search">
<INPUT TYPE=text name=q size=25 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Pesquisar">
<input type=hidden name=domains value="endereço do seu blog"><br><input type=radio name=sitesearch value="">Web<input type=radio name=sitesearch value="endereço do seu blog" checked>Neste site<br>
</FORM></div>

Se quiser pode modificar o tamanho do campo de texto mudando o numero 25, outra coisa é o texto Neste site você pode escrever o que desejar, por exemplo o nome do seu blog.

Isso faz o Google pesquisar as palavras digitadas somente dentro do endereço que colocamos no local indicado, assim fica fácil achar qualquer coisa no blog. Você só precisa colocar o endereço do seu blog nos locais indicados no código e depois colocar o código pela pagina layout, adicionar gadget, html/javascript e já está pronto.

Se quiser você pode criar um código parecido com esse no site do Adsense e além de mostrar um sistema de busca no seu blog ainda pode ganhar algum dinheiro quando as pessoas utilizarem as pesquisas Google através do seu blog.

Fonte: dicasparablogs

Ler Mais