Favicon, abreviação para ‘Favorite
Icon’, são pequenas imagens no
formato *.ico que estão associados com um site ou uma
página. Esses
ícones são criados para melhor identificar o site
e para facilitar a
localização do mesmo em uma lista de favoritos.
Muitos criam seu
Blog mas esquecem de mexer nesse detalhe, muitas vezes por
não saber
como colocar ou mesmo por não achar importante;
Para muita gente,
quando adiciona seu blog aos favoritos, fica muito mais
fácil achar seu
blog quando se tem um ícone personalizado, pois seu
ícone vai aparecer
nos favoritos como se fosse uma marca registrada do seu site, ajudando
os seus visitantes a identificar seu blog muito mais rápido;
Use imagem nas dimensões 16×16 pixel, tamanhos
maiores como 24×24, 32×32 entre outros,
também podem ser usados;
Imagens com tamanho maior serão reduzidas para o tamanho
16x16
Onde
criar seu Favicon.ico?
Para criar seu favicon você deve usar programas de imagem
como o Ginp ou mesmo editores de imagens
próprios para ícones como o IcoFx,
Ou programas online para criar seu ícone;
Aqui tem alguns programas online para criação de
favicon
http://www.favicon.ru/en
http://shaheeilyas.com/favicon/
http://www.antifavicon.com/
http://www.favicontool.com/
http://www.favicon.cc/
o maior problema em criar o seu favicon no formato ICO é
onde hospedar seu ícone;
São pucos sites de hospedagem gratuitas que aceita o formato
ICO;
Um site que aceita hospedar no formato ICO é o Yahoo!GeoCities;
Achei esse site ConvertIcon que
converte suas imagem já hospedada no formato PNG para o
formato ICO,
foi nesse site que criei meu ícone, só
não sei se ele tem algum limite
de transferência, mas por enquanto ta funcionando bem;
Onde colocar o codigo no
HTML?
Faça login no Blogger, clique em “Modelo”
e depois em “Editar
HTML”
Procura a tag <head>, insira os dois elementos
“link” logo após a tag
<head>
<link rel="shortcut icon" href="http://url.do seu icone"
type="image/x-icon"/>
<link rel="icon" href="http://url.do
seu icone" type="image/x-icon"/>
Substitua a parte em vermelho pelo endereço url da sua
imagem.
Pronto agora é só salvar e ver a marca do seu
site na barra de endereço
Uma maneira de inserir banners e outros elementos de página
centralizados sob o cabeçalho facilmente é
procurar no código do seu
template (não é preciso Expandir Modelo de
Widget) este trecho:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
</b:section>
</div>
onde está no
substitua por yes
e salve. Vá em Modelo/Layout e já
poderá visualizar o espaço apropriado sob o
cabeçalho para inserir elementos de página.
Nota1: Esta
DIV pode ser encontrada em todos os templates originais do Blogger.
Templates modificados podem não conter esta DIV
Nota2: Esta
DIV pode ser personalizada no CSS assim:
#crosscol-wrapper{
width: estabeleça aqui a largura;
height: estabeleça uma altura, se desejar;
background: estabeleça cor ou imagem de fundo;
padding: estabeleça distância das margens;}
Nota3: esta
DIV sempre acompanhará a largura total de Outer-Wrapper se
nenhum valor em width for estabelecido.
É excelente para centralizar facilmente, links de
anúncios do Adsense sob o cabeçalho.
Para colocar cor ou mesmo uma imagem nos títulos da sidebar,
procure este trecho do código do seu template (lembrando
sempre que todos os tutoriais são feitos baseados nos
códigos do Mínima, do Blogger - sendo assim,
é normal que existam diferenças entre o que
apresento aqui e seu próprio template)
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
acrescente abaixo:
.sidebar h2{
color: $sidebartextcolor;
line-height: 1.5em;
background: #000000;
margin: 0px;
padding: 8px 0 0 15px;
text-align: center;
}
Se no seu template já existe este trecho do
código, é só colocar background:
(valor da cor); e ter certeza de que margin:0px;. Padding afasta o
título do topo da coluna - você pode alterar este
valor e ir visualizando, até que fique como desejado.
Se você deseja inserir uma imagem, é só
colocar:
* se a imagem tem as mesmas
dimensões estabelecidas para .sidebar h2:
background: url(link
da imagem) no-repeat;
* se a imagem for menor e você
deseja que ela se repita:
* background: url(link da imagem)
repeat-x;
Para inserir um código - de imagem, ou link - no
rodapé da postagem, faça o seguinte:
Vá no HTML do seu template e clique em Expandir Modelo de
Widget. Agora procure por este trecho:
<p class='post-footer-line post-footer-line-3'/>
(Coloque aqui o código que deseja que apareça no
rodapé da sua postagem)
</div>
Depois de colocar o código, antes de </div>,
visualize para ver se aparece corretemante e só
então salve. Só isso.
>
Para inserir Meta Tag no seu blog (o que facilita os sites de busca a
te encontrarem), coloque no seu blog o seguinte código, logo
depois de:
<title>Nome do Seu Blog</title>
Coloque este:
<meta content='COLOQUE AQUI O QUE QUER QUE APAREÇA
SOB O TITULO DO SEU BLOG NOS MECANISMOS DE BUSCA'
name='description'/>
<meta content='COLOQUE AQUI AS PALAVRAS CHAVES QUE DESCREVEM SEU
BLOG SEPARADAS POR VIRGULAS SEM ESPAÇOS'
name='keywords'/>
<meta content='index,follow' name='robots'/>
Depois de inserir o código, visualize e estando tudo ok,
salve o template.
Vá em Modelo, Adicionar Elemento de Página e
escolha HTML/JavaScript e cole este código:
<form id="searchthis" action="http://ENDEREÇO DO SEU
BLOG/search" style="display: inline;" method="get">
<table style="width: 200px; height: 100%;" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td valign="middle">
<input id="b-query" name="q" type="text"/>
</td>
<td valign="middle" class="navbutton">
<input id="submit" tabindex="1" value="Busca" name="submit"
type="submit"/>
</td>
</tr>
</tbody>
</table>
</form>
Coloque o endereço do seu blog onde está
sinalizado mas não altere o /search que vem em seguida. Em
width você estipula a largura da caixa de busca e em height a
altura.
Você não gosta da numeração
que aparece ao lado dos marcadores - entre parênteses assim:
música(6), poemas (5) Vá no HTML do seu blog,
clique em Expandir Modelo de Widgets e procure por:
<b:widget id='Label1' locked='false' title='Marcadores'
type='Label'>
<:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a
expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
Apague o que está em negrito, visualize e salve.
Font:http://templatesparanovoblogger.blogspot.com/
<center><img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/></center>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="PT" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>Português - Inglês
<option value="FR"/>Português - Francês
<option value="DE"/>Português - Alemão
<option value="IT"/>Português - Italiano
<option value="PT"/>Português - Português
<option value="RU"/>Português - Russo
<option value="ES"/>Português - Espanhol
</select>
<input value="http://ENDEREÇO DO SE BLOG.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 70%; width: 50px;" value="Traduza" type="submit"/>
</form>
A imagem está hospedada no ImageShack, mas é recomendável criar sua prórpia hospedagem.
essa dica eu encontrei no blog da Claudya
Font:http://templatesparanovoblogger.blogspot.com
Se você deseja apresentar apenas um resumo de sua postagem
com um link do tipo 'Leia Mais...' ou 'Continue Lendo..." em seu blog,
siga estes passos:
Vá ao HTML do seu blog e antes da tag </head>,
cole este código:
<b:if cond='data:blog.pageType !=
"item"'>
<script
type="text/javascript">
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans =
post.getElementsByTagName('span');
for (var i = 0; i <
spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background =
peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans =
post.getElementsByTagName('span');
for (var i = 0; i <
spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background =
peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans =
post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i <
spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink")
&& (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
Salve o template. Depois clique em Expandir Modelo de Widget e procure
este trecho:
<div class='post-body'>
<p><data:post.body/></p>
Substitua-o por:
<div class='post-body'
expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType ==
"item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a
expr:href='data:post.url'>Leia Mais…</a>
</span>
<script
type='text/javascript'>
checkFull("post-" +
"<data:post.id/>");
</script>
</b:if>
Salve. Agora em em
Configurações->Formatação->
e desça a página até ver Modelo de
Postagem. Cole alí o seguinte código:
Digite aqui o resumo do post
<span id="fullpost">
Digite aqui o resto do post
</span>
Salve. Toda vez que você iniciar uma postagem este
código aparecerá ( melhor visualizado no modo
HTML da postagem) e basta que você respeite os campos
correspondentes para o resumo e o restante da postagem. Se
não desejar resumir um determindo post, basta apagar o
código.
Este artigo foi completamente refeito em 19 de novembro de 2008, pois o
código anterior que aqui se encontrava não
funcionava perfeitamente. Ao contrário, este que coloquei
agora, funciona 100%.
Aconselho sempre, antes de qualquer mudança no seu template,
que você salve uma cópia do mesmo antes de tudo. E
mais, nunca salve antes de visualizar o resultado, por que se
não estiver bom, basta clicar em Limpar
Edições.
1º Parte:
Coloque antes de ]]></b:skin>
#navigation{
height:30px;
width: 800px;
line-height:2.9em;
margin:0px auto 0px;
background: url(link da sua imagem) repeat-x;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}
#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}
Todos os valores que aí estão (width, margin,
color, etc) podem e devem ser modificados conforme o layout do seu
template.
Antes de passar a segunda parte do código, vou explicar
algumas coisas que podem ser modificadas:
#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:0 auto 0;
background: url(ENDEREÇO DA IMAGEM) repeat-x;
}
Height é a altura que terá o menu
Width é a largura
line-height é a altura da linha (não confundir
com o tamanho da fonte)
Margin: do modo que aqui se apresenta, centraliza o menu na
página (0 auto 0)
Background é o plano de fundo, que pode ser uma cor ou uma
imagem. Repeat-x garante que uma imagem se repeti horizontalmente.
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}
border: aqui você define se terá borda em toda a
volta de cada item do menu (para isso deixe só Border: 1px
solid...), se só à direita (right), esquerda
(left), topo (top), ou base (bottom). Basta determinar antes dos
valores:
border-bottom: 1px solid etc etc...
border-top: 1 px solid etc etc....
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}
Color: determinará a cor que dos links antes que se passe o
cursor sobre eles.
#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}
Aqui se determina cor dos links e background quando se passa o cursor
por cima do link.
2º Parte:
Para deixar o menu sob o cabeçalho, coloque abaixo de (HTML):
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='false' title='Templates Novo
Blogger (Header)' type='Header'/>
</b:section>
</div>
Este código:
<div
id='navigation'><b:section class='navigation'
id='navigation'
showaddelement='yes'></b:section></div>
Salve as modificações. Vá ao painel do
Blogger (Modelo/Layout) e veja um novo espaço, sob o
cabeçalho, onde é possível adicionar
elementos de página. Crie uma lista de links e arraste para
este novo espaço. Salve e visualize.
Você tem um template que adora e não
está nem um pouco afim de trocar ele só para
conseguir uma coluna extra...Ok, seus problemas acabaram! Vou explicar
passo-a-passo como adicionar uma nova coluna no template.
Vamos nos familiarizar com o seguinte trecho do CSS do seu template
(pode haver pequenas variações mas o
básico é isso):
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}
#main-wrapper {
margin-left: 3px;
width: 468px;
float: left; (ou $startSide)
word-wrap: break-word; /* fix for long text breaking sidebar float in
IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar
float */
}
#sidebar-wrapper {
margin-right: 0px;
width: 210px;
float: right; (ou $endSide)
word-wrap: break-word; /* fix for long text breaking sidebar float in
IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar
float */
}
Onde Outer-Wrapper contém tudo o que está no
template, main-wrapper é a coluna do post e sidebar-wrapper
é a coluna lateral (perfil).
O que vamos fazer é adicionar outra coluna colando logo
abaixo de sidebar, este código:
#newsidebar-wrapper {
margin-left: 0px;
width: 210px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in
IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar
float */
}
Atenção para as medidas: a soma da largura do
post mais as duas colunas laterais tem que ser menor do que o valor
width de Outer-Wrapper. Não esqueça de somar
bordas e o espaçamento que talvez você deseje que
tenha entre as colunas.
Agora desça a página até encontrar
esta parte do código (HTML):
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>
e cole imediatamente ANTES este:
<div id='newsidebar-wrapper'> <b:section
class='sidebar' id='newsidebar'
preferred='yes'></b:section> </div>
Importante: No HTML os elementos (DIVs) precisam ser dispostos na ordem
estabelecida no CSS. Ou seja, se Newsidebar tem float: left;
(flutuação à esquerda) deve ser
colocado no HTML antes da DIV Main-Wrapper, ficando assim:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar'
preferred='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
Ou seja, Newsidebar flutua à esquerda, Main-Wrapper flutua
à direita e Sidebar-Wrapper flutua à direita e
esta disposição é obedecida no HTML.
Leia também: Como alinhar as colunas e textos do blog
1- Vá no site do Adsense e gere o código do anúncio. Vai ser assim: 2- Copie o código e cole no bloco de notas. Agora substitua os sinais em vermelho por estes códigos em azul: O anúncio deve ficar assim: 3- Agora vá em Modelo, Editar HTML (sempre salve uma cópia do seu template antes de qualquer alteração, caso dê alguma coisa errada...Basta clicar em Baixar Modelo Completo e uma cópia do seu template será salva no seu computador) e clique em Expandir Modelo de Widget. Agora encontre este trecho do código do seu template: 4- Insira, abaixo desta linha, o código do anúncio já modificado. Vai ficar assim: 5- Visualize e se tudo estiver ok, salve seu template. Bons lucros! Fonte: esta eu aprendí no excelente Blosque
Com, primeiramente será preciso se cadastrar em um website (clique na imagem):
Agora irá aparecer uma página de formulário, pedindo para você preencher alguns campos, preencha como o exemplo: (Obs.: Preencha tudo corretamente para o administrador não cancelar a conta!)
Agora marque o "Yes, I agree." em "Terms and Conditions" e clique em "Create Account".
Irá aparecer esta mensagem:
isto significa que você foi cadastrado com sucesso!
Agora vá na parte esquerda do site e ache os campos "e-mail adress" e "password" em "login". Digite o email e a senha do cadastro e clique em "Go":
Após ter efetuado o login, você será redirecionado para a página das informações da conta!
Procure por "Referrals" nesta mesma página das informações da conta:
Pedindo para as pessoas se cadastrarem com este link, você estará ganhando pontos quando estas pessoas ganharem pontos para os prêmios!
Agora, para ganhar os pontos sem precisar dos cadastros, procure por "offers" no menu do site:
Clique no link.
Agora irá aparecer umas ofertas com alguns links para você clicar, mais ou menos assim:
Agora basta acessar cada um dos links e finalizar o cadastro dos mesmos, com isso, o status da lateral direita do site, irá mudar de "Not confirmed" para "Pending":
E é só aguardar pelos seus pontos, e quando estiver com quantia de pontos suficientes para a troca, clique em "claim reward" no menu do site para trocar!
Se eu não me engano, com 300 pontos você consegue um domínio .info e com 1000 pontos você consegue domínios .net, .com e .us eu acho.
----+
vejam o video:
Feito pelo blog:http://dinheirotoclick.blogspot.com Veja mais!! Veja abaixo em etapas como se cadastrar no Alertpay. Para começar entre no site e clique em Sign Up no topo do site. Preencha os dados (Abaixo apenas os obrigatórios); First Name / Last Name: Nome e Sobrenome Address: Endereço City / County / Estado: Cidade, País e Estado Zip/Postal Code: Código Postal, seu CEP Primary Phone: Seu telefone principal, use apenas números; E-Mail Address: E-Mail Password: Senha Re-enter Password: Repita sua senha Security Question 1/ Security Answer 1: Pergunta e resposta de segurança (Ex.: City of birth? / Rio de Janeiro) Repita os caracteres da figura; Marque I agree to AlertPay’s terms and conditions e clique em Register Na próxima página, apenas clique em Continue Registration; Agora você será avisado que um e-mail de confirmação foi enviado a você com o intuito de continuar o registro; Acesse sua caixa de entrada e procure um e-mail com o assunto: AlertPay: Validate Your EmailEntre e clique no link para validar seu endereço de e-mail.
