Calendário
Este é um pequeno calendário, que você pode adicionar facilmente como um widget, isto é interessante pois seu blog ficará com cara de atualizado sempre pois data sempre será a atual o que dar a entender que você está sempre presente no seu blog. Para adicionar é simples clique no ícone do blogger abaixo faça seu login e escolha o blog que deseja que este script seja adicionado:






Referência: Bloggerstop
Todos os direitos reservados a Bloggerstop
Leia mais...

O Orkut é a maior rede social do mundo, ou pelo menos a mais conhecida no Brasil, agora está rede disponibilizou uma ferramenta que permite compartilhar com seus amigos, os links que você encontra na Web, para facilitar este envio encontrei este simples botão que faz todo o trabalho e pode ser facilmente instalado no Blogger, veja:

1.Acesse o painel do Blogger (blogger.com)
2.Vá em "Layout"->"Editar HTML"-> marque "Expandir Modelos de Widgets"
3.Procure pelo seguinte código (Utilize Ctrl e F para procurar):
<data:post.body/>4.Antes dele insira o seguinte código modificando de acordo com a "Nota":<div style='float:right;padding:4px;'>
<a expr:href='&quot;http://promote.orkut.com/preview?nt=orkut.com&amp;du=&quot; + data:post.url + &quot;&amp;tt=&quot; + data:post.title + &quot;&amp;tn=http://imgur.com/pWdpG.jpg&amp;cn=@noticiaeblog&quot;' target='_blank'>
<img src='http://i48.tinypic.com/9urbs9.png'/>
</a></div>
Nota: Em vermelho é a URL da imagem que será exibida nos links de suas postagens. Em verde é uma descrição que será exibida em todos os links de suas postagens, não coloque uma descrição especifica coloque uma neutra que servirá para todos seus links. Em azul é a imagem que servirá de botão a que está é uma padrão como está abaixo:

Se quiser outra basta substituir pela URL da imagem que desejá como botão.
5.Salve as alterações e visualize o resultado.
Leia mais...
QR-Code
(Se ficou curioso para ler o que está escrito na imagem baixe o zbarcam e leia com sua web cam)

Este Hack gera um QR-Code para cada url do post. QR-Code é um novo padrão de código de barras, é facilmente gerado sem o uso de scripts, veja o que diz a Wikipédia:
"O QR Code (ou Código de Barras em 2D), é uma matriz ou código de barras bi-dimensional, criado pela empresa Japonesa Denso-Wave, em 1994. O QR vem de Quick Response, pois o código pode ser interpretado rapidamente, mesmo com imagens de baixa resolução, feitas por cameras digitais em formato VGA, como as de celulares. O QR Code é muito usado no Japão."
Vamos inserir o QR-Code no seu blog veja abaixo como fazer:
1.Acesse o painel do Blogger(blogger.com)
2.Vá em "Layout"->"Editar HTML"->marque "Expandir Modelos de Widgets"
3.Procure pelo seguinte código, Utilize as teclas "CTRL e F":
 <p class='post-footer-line post-footer-line-3'/>ou<div class='post-footer-line post-footer-line-3'>4.Abaixo do código anterior adicione o seguinte:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<img src='http://imgur.com/jh224.jpg' style='vertical-align: middle;'/>Gerar: <a expr:href='&quot;http://chart.apis.google.com/chart?cht=qr&amp;chl=&quot; + data:post.url + &quot;&amp;chs=400x400&quot;' title='Gerar QR-code'>QR-code</a>
</b:if>
5.Salve as alterações e visualize. Só é exibido ao clicar no título da postagem, veja abaixo como vai ficar:
GERAR: QR-CODE
Leia mais...


Então é Natal! Para comemorar essa data que tal colocar neve no seu blog, é um efeito muito bonito feito em JavaScript. O Script gera penas bolinha de neve que vão se acumulando no final da página, ele não atrapalham a leitura, e dão um detalhe para seu blog veja como aplicar este efeito:

1.Acesse o painel do Blogger(blogger.com)]
2.Vá em Layout->Editar HTML
3.Procure pelo seguinte código utilizando as teclas "Ctrl" e "F":
</head>
Antes do código acima insira o seguinte:
<script src='http://www.yourjavascript.com/29407319462/Neve1.js' type='text/javascript'/>
4.Salve as alterações e visualize o belo efeito!

Referência:El Escaparate
Leia mais...


O Google entrou de vez na onda dos encurtador de URL, após o lançamento do goo.gl o encurtador  para URLs de sites, para seus principais serviços. Agora lança mais um, o encurtador youtu.be para vídeos do Youtube o que tornará mais seguro clicar em links de vídeos pois teremos certeza de que ele realmente redirecionará para um vídeo e não para um spam ou vírus. Para utilizar o serviço é simple basta pegar o id do vídeo e colocar depois do link do encurtador veja:

Link completo do vídeo:
1) http://www.youtube.com/watch?v=FdeioVndUhs
2) http://www.youtube.com/watch?v=Q7vV8f37VpY&feature=channel

Link encurtado:
1) http://youtu.be/FdeioVndUhs
2) http://youtu.be/Q7vV8f37VpY


Viu como é fácil ! Você pode usar este link para compartilhar um vídeo no Twitter, sites, blogs, Orkut. Vamos ver agora qual será o próximo encurtador.
Leia mais...

Está é uma postagem para corrigir o Hack de páginas numeradas que foi mostrado aqui no blog, este hack é sempre util pois como já falei na postagem antiga, deixa o blog com uma cara de site. Este hack é mais simples de instalar pois ele tem um Java Script embutido em forma de url, o que torna ele menos extenso e mais objetivo. Vamos então a instalação:

Adicionar a CSS

1.Acesse o Painel do Blogger(blogger.com)
2.Vá em Layout->Editar HTML->Marque Expandir Modelos de Widgets
3.Procure pelo seguinte trecho "Utilize Ctrl e F":
]]></b:skin>
Antes dele adicione o seguinte:
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

Adicionando o Script

4.Procure pelo seguinte código:
</body>
Antes dele adicione o seguinte:
&lt;script type='text/javascript'&gt;
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Voltar';
var downPageWord ='Próxima';
&lt;/script&gt;
&lt;script src='http://www.yourjavascript.com/19425042120/pagenav.js' type='text/javascript'&gt;&lt;/script&gt;

Corrigindo o Template

5.Procure pelo trecho seguinte:
'data:label.url'
Substitua pelo por:
'data:label.url + &quot;?&amp;max-results=7&quot;'
6.Salve as alterações e visualize.

UPDATE: Corrigido os erros no código 5
Referência:Abu Farhan
Leia mais...


Recentemente foi lançado o Goo.gl, encurtador de URL da Google. Diferente de outros serviços similares, o Goo.gl não estará a princípio disponível para todos, e será utilizado inicialmente em produtos da própria Google, marcando sua estreia na Google Toolbar e no serviço Feedburner.

A criação do Goo.gl é um ataque direto ao Bit.ly, encurtador de URL desenvolvido pela Betaworks Studio, que é o serviço mais utilizado no momento, sendo responsável por cerca de 75% de todos os links curtos no Twitter, de acordo com o site TechCrunch.

O Google cada vez mais vem lutando para conquistar a liderança em vários serviços seja navegadores, sistema operacional (SO) e agora encurtador. A grande rival "Microsoft" aos poucos vai perdendo a liderança os serviços da empresa de Bill Gates são quase sempre pagos e possuem muitos erros que exigem atualizações o navegador por exemplo já passou por centenas de atualizações e continua a ser encontrados erros, sei que na internet de hoje em dia os riscos são grandes mas como uma grande empresa pode deixa com que eles aconteçam sempre.

Voltando ao assunto, se você se interessou pelo encurtador pode testa-lo instalando a barra de ferramentas do Google para o "Internet Explore" ou instalando a extensão goo.gl shortener para o Google Chrome. Você pode também usar um serviço Shorten URL using goo.gl criado pelo Alexandre Gaigalas que faz com que você possa encurtar sem precisar destes requisitos impostos pelo Google, basta inserir a url com http:// e clicar em shorten.

Referência: Yahoo Notícias,Winajuda
todos os links da postagem estão usando o novo serviço
Leia mais...

Exibir posts randômicos significa mostra-los de forma aleatória sem respeitar a ordem imposta pelo sistema, isto é bom para trazer mais visitas para velhos posts que você criou a algum tempo. Ele é baseado em Java Script o que torna sua instalação muito mais rápida para instalar basta clicar no símbolo do blogger abaixo:


Referência: widgetsforfree
Leia mais...


Está dica é interessante mais deve ser usada como muita responsabilidade pois passar trote é feio  não é legal ficar ligando para os outros à toa, mas como estou aqui pra ensinar ai vai uma dica este site encontra todas as informações de sites/blog com domínio próprio. Basta digitar a URL dos site desejado para encontrar todas as informações. Veja alguns sites que você pode testar o serviço:

E muitos outros para utilizar acesse o site Domain Tools no espaço onde esta escrito "Enter a Domain Name to Lookup" digite a url do site desejado e clique em "Lookup". Pronto você encontrara todas as informações necessárias. Veja abaixo o teste que fiz aqui com o blog:

Searching for noticiaeblog.com.  Found 1 record(s) matching noticiaeblog.com.

Domain:              noticiaeblog.com
Nameserver:          ns1.dominios.uol.com.br
Nameserver:          ns2.dominios.uol.com.br
Nameserver:          ns3.dominios.uol.com.br
Created:             20090826
Updated:             20090826

Registrant:

Name:                FERNANDO FERREIRA PASSE
Organization:        FERNANDO FERREIRA PASSE
E-mail:              
Address:             Rua frederico Zanan 1384 null

Address:             36680000
Address:             SAO JOAO NEPOMUCENO - MG
Phone:               55 32 32614124
Country:             BRASIL
Created:             20090826
Updated:             20090826

Administrative Contact:

Name:                FERNANDO FERREIRA PASSE
Organization:        FERNANDO FERREIRA PASSE
E-mail:              
Address:             Rua frederico Zanan 1384 null

Address:             36680000

Address:             SAO JOAO NEPOMUCENO - MG
Phone:               55 32 32614124
Country:             BRASIL
Created:             20090826
Updated:             20090826

Technical Contact:

Name:                FERNANDO FERREIRA PASSE
Organization:        FERNANDO FERREIRA PASSE
E-mail:              
Address:             Rua frederico Zanan 1384 null

Address:             36680000
Address:             SAO JOAO NEPOMUCENO - MG
Phone:               55 32 32614124
Country:             BRASIL
Created:             20090826
Updated:             20090826

 Como você pode ver foi encontrado várias informações. Divirta-se!

Imagem: Earth Portals
Leia mais...


Um menu horizontal é a forma mais fácil de organizar seus links principais, facilitando o leitor a encontra-los, a caixa de busca também é uma forma de ajudar a buscar o que procura-se mais rapidamente sem ter que ficar navegando muito na página para achar. Como os dois são importantes para o blog o melhor é uni-los, é isso que você vai ver neste tutorial abaixo:

Dando Estilo ao menu

1.Acesse o painel do Blogger (blogger.com)
2.Vá para "Layout"->"Editar HTML"
3.Procure pelo trecho abaixo em seu template "Utilize Ctrl e F":
]]></b:skin>
Antes do trecho acima adicione o código seguinte referente a CSS:
/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#737374; font-size: 14px; border-bottom: 1px solid #afafaf;}
.nav {width: 950px; margin: auto;}

ul.navtop { padding: 0px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#737374; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;}
ul.navtop li a:visited { text-decoration: none; color: #737374;}
ul.navtop li a:hover { background: #e1477d; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; }
ul.navtop li a:active { text-decoration: none; color: #737374; }
ul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }

#searchcont { width: 100%; margin: 12px auto 12px auto; }

#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 0px;}
input#s {color: #e1477d; width: 283px; background:#fcfcfc; padding: 2px 4px 2px 4px; border: 1px solid #afafaf;}
input#searchsubmit{ background:#afafaf; color:#fff; font-size:13px; padding: 2px;}

Inserindo o menu

4.Agora vamos inserir o menu no template, procure pelo seguinte código:
<div id='header-wrapper'>
Abaixo dele adicione o seguinte código:
<!-- Menu Superior -->
<div id='navtop'>
<div class='nav'>
<ul class='navtop'>
<li><a href='/'>Ínicio</a></li>
<li><a href='http://url-do-seu-perfil-do-blogger' title='Perfil Blogger'>Sobre mi</a></li>
<li><a href='/feeds/posts/default' title='Assine o Feed'>Assine o Feed</a></li>
<li><a href='mailto:seu-e-mail@hotmail.com' title='Contato'>Contato</a></li>

<li><a href='/search/label/?max-results=999' title='Ver todas las entradas'>Ver todas as postagens</a></li>
</ul>
<form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>
</div>
</div>
<!-- Fim Menu superior -->

5.Substitua os trechos em negrito pelas respectivas urls.
6.Salve as alterações e visualize.

Referência:El Escaparate
Leia mais...
No natal a gente enfeita nossas casas com árvores, luzes, enfeites entre outras coisas. Porque não enfeitar seu blog/site também? É simples, no Site Design Swan você encontra 11 ícones de RSS para o Natal, são ícones em alta resolução que vão deixar seu blog/site ainda mais bonito, veja alguns exemplos de ícones do site:
Pegue já estes lindos ícones para seu blog:
Ver ícones
Leia mais...

Este é o meu primeiro template convertido de uma versão html de Free CSS Templates, no template eu tentei deixar tudo da forma mais automática possível, para que não seja necessário a edição pelo painel editar HTML veja os componentes "hacks,scripts" utilizados neste template:


Características:
Atenção: Não retire os credito do template a retirada deste pode ocasionar uma quebra de licença
Leia mais...
Primeiro vamos saber um pouco o que é rotear um modem, como eu não sei explicar muito bem isso, vou colocar um trecho de um fórum conhecido. Então vamos lá o que é rotear?
"Um modem roteador, "compartilha" a conexão com toda a rede. Um modem bridge, está obrigatoriamente ligado à apenas um computador.Neste computador ligado ao modem bridge pode-se instalar softwares de proxy, ou mesmo configurá-lo pra fazer o trabalho de um roteador, compartilhando, da forma que seja, a conexão com outros micros. Mas nesse caso, esse computador sorteado tem de estar ligado para que os outros tenham acesso a net. No caso do modem roteador, apenas o modem tem que estar ligado para que qualquer um dos computadores tenha acesso." fonte: Fórum PCs
Agora que você já sabe a verdadeira função de rotear o modem vamos começar o processo de roteamento, o processo é simples mas exige alguns cuidados ou seja leia atentamente o tutorial abaixo:

1. Vamos primeiro verificar a versão do seu modem "ADSL" para ver a versão digite na barra de endereço o seguinte: http://10.0.0.138 se não aparecer nada digite: http://192.168.1.254 aparecerá uma tela como está abaixo:

(Clique para ampliar)
2. Verifique se a "Versão do Software" é igual ou superior, a que utilizamos neste tutorial foi a versão "5.4.0.15" se o idioma da página estiver em inglês clique em "pt" no canto lá em cima da página. Se sua versão for uma anterior a "5.4.0.14" provavelmente você vai ter que atualizar o firmware.
3.Se tudo estiver certo podemos começar o processo de roteamento do modem.
4.No menu do lado esquerdo clique em "SpeedTouch" depois clique em "Configuração" e depois clique em "Configurar" veja a imagem abaixo:

(Clique para ampliar)
5.Após ter feito o passo anterior abrirá uma janela como está da imagem abaixo então é só clicar em "Avançar":

(Clique para ampliar)
6.Após o passo 5 você verá uma tela como a da imagem abaixo, basta selecionar a opção "Roteador" e clicar em "Avançar":

(Clique para ampliar)
7.Após o passo 6 você verá está tela da imagem abaixo, então é só selecionar "0.33" que é o padrão de "VPI/VCI" para rede (Oi Velox) e depois clique em "Avançar":

(Clique para ampliar)
8.Após o passo 7 você verá uma tela igual a da imagem abaixo, preencha com seu "Login" e "Senha" repita novamente a senha para confirmar e clique em "Avançar":

(Clique para ampliar)
9.Após o passo 8 você verá uma tela igual a da imagem abaixo, então basta preencher o nome de usuário com o seguinte termo sem aspas: "Administrator" deixe a "Senha" e "Confirmar Senha" em branco e clique em "Avançar":

(Clique para ampliar)
10.A próxima tela é apenas uma confirmação, então basta clicar em "Iniciar":

(Clique para ampliar)
11.Agora será iniciado o processo de roteamento é só aguardar e clicar em "Concluir".
12.Para testar reinicie o computador, abra o navegador em um site qualquer se funcionar está pronto. Não é necessário usar mais o discador do Velox, a conexão já deverá estar funcionando automaticamente.

Alguns esclarecimentos deste tutorial

Não no responsabilizamos por quaisquer erros ocasionado pelo uso deste tutorial, mas ele é super confiável pois já foi testado em vários modens e em todos eles obtivemos sucesso!

Curiosidade

O que é VPI/VCI ?
R: Os valores de VPI (Virtual Path Identifier) e VCI (Virtual Channel Identifier) são definidos como uma espécie de norma adoptada pelo país. O que diferencia este tutorial para Oi Velox é apenas isso então se souber o VPI/VCI da sua operadora pode funcionar.
Leia mais...

Centralizando imagens e links

Este recurso do html permite que você centralize qualquer código, link, imagem, sem a utilização de CSS facilitando e muito para os mais leigos, veja abaixo como é fácil:

Como exemplo vou utilizar o link que aprendemos a fazer no post anterior veja:
O código do link ficou da seguinte forma:
<a href='http://www.noticiaeblog.com'/>Notícia e blog</a>
O link gerado ficou assim:
Notícia e blog
Agora vamos aplicar a tag "center" para que ele fique no meio ou seja centralizado:
<center><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></center>
O resultado será este abaixo:
Notícia e blog

Outra forma de centralizarmos é utilizando a tag "div" veja:
<div align='center'><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></div>
O resultado é este abaixo ou seja o mesmo resultado da tag "center":

Colocando uma imagem a esquerda ou direita

Para colocarmos uma imagem, código ou link a esquerda ou direita da página também utilizaremos a tag "div" veja:
Para esquerda use: left
Para direita use: right


Veja o exemplo, para esquerda:
<div align='left'><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></div>
O resultado é este abaixo:

Veja o exemplo, para direita:
<div align='right'><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></div>
O resultado é este abaixo:




E aqui termina está pequena serie de tutoriais html em breve mais algumas dicas.

Para ver outras partes deste tutorial os links estão abaixo:
PARTE 1 , PARTE2.
Leia mais...

Como fazer um link

Os links são feitos utilizando a tag "a".Veja o exemplo abaixo:
<a href='http://www.noticiaeblog.com'/>Notícia e blog</a>
Em vermelho são os códigos que formam o link, em roxo página para qual o link será redirecionado e em verde texto que será exibido pelo link. O resultado é este abaixo:

Notícia e blog

Incorporando um link a imagem

Vamos usar como exemplo a imagem que utilizamos na primeira parte deste tutorial.
O código da imagem ficou da seguinte forma:
<img src='http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png' height='120pxwidht='128pxtitle='Este é um tutorial feito para o Notícia e blog' />
Para transformarmos ela em link basta substituir o texto do link pelo código da imagem veja:
<a href='http://www.noticiaeblog.com'/><img src='http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png' height='120px' widht='128px' title='Este é um tutorial feito para o Notícia e blog' /></a>
O resultado será este abaixo:


No próximo veremos um pouco de centralização IR PARA O PRÓXIMO
Leia mais...
Uma postagem bem editada garante um grande número de visitas pois o leitor vai se interessar por uma postagem que tem um conteúdo relevante e ao mesmo tempo bonito de se olhar. Para ter uma postagem bem elaborada é necessário saber alguns códigos "Tags" básicas do HTML, como inserir uma imagem um link, uma cor a letra, negrito,itálico. Vamos conhecer abaixo algumas dessas tags e sua aplicações:

Onde inserir

Se você usa o Blogger, pode inserir em "Postagem"->"Nova Postagem"-> E clicar na aba "Editar HTML". E se você tem uma página HTML pode inserir diretamente no código de fonte.

Inserir imagem

Para inserir uma imagem você deve primeiramente ter o link ou Url da imagem. A tag utilizada para inserir uma imagem é a "IMG" veja o exemplo abaixo de como ela é usada:
<img src='url-da-imagem' />
Um exemplo pratico seria inserir o logotipo do blogger veja:
A url do logotipo é http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png
Agora vamos inserir a url na tag veja:
<img src='http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png' />
O resultado será este abaixo:

Atributos da Tag IMG

Atributos são trechos que dão outras funções as tags um exemplo seria largura, altura e título.Vamos conhecer uma pouco mais esse atributos:
height: Define a altura da imagem
widht: Define a largura da imagem
title: Define um título a imagem

Vamos usar como exemplo o logotipo do Blogger que vimos acima. O código para inserir-lo ficou da seguinte forma:
<img src='http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png' />


Agora vamos definir para o logotipo uma altura de 120px e uma largura de 128px veja como ficaria o código:
<img src='http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png' height='120px' widht='128px' title='Este é um tutorial feito para o Notícia e blog' />
O resultado é este que vemos abaixo:

Se você está se perguntando,cadê o título? Passe mouse sobre a imagem para ver.

No próximo tutorial veremos como transformar a imagem em um link e como fazer um link. Até a proxima! IR PARA PARTE 2
Leia mais...


Personalizar a "setinha" pode parecer estranho, mas também deixa o layout bem personalizado e elegante. Alguns pensariam que isso não é possível para o Blogger mas isso é mentira você pode personalizar facilmente veja abaixo como:

1º Escolher o ícone

Quaisquer ícones que estejam no formato ".cur" podem ser usados como seta é só copiar o link do ícone. Abaixo a alguns apenas alguns dos muitos que podem ser encontrados na web:

1.Link: http://api.ning.com:80/files/sOqkGMK5dzt5hq1GCAMsJa1xjQvgiV9MnpUbo2ZaGG0_/cursor1.cur

2.Link:
http://api.ning.com:80/files/gSFSldBbObRb-SVTsc5Bfw5yOR4xwTEi58DCwclmqkE_/cursor2.cur

3. Link:
http://api.ning.com:80/files/4S0mMLSngQT25YPB7JHsTXUINHcP8jk*6FAKNUj*P-M_/cursor3.cur

Instalando o cursor

Agora vamos inserir o cursor escolhido no blog:
1.Faça login no painel do Blogger
2.Vá em "Layout"->"Editar HTML"
3. Procure pelo seguinte código "Utilize as teclas Ctrl e F para procurar":
body {
4.Abaixo do código anterior adicione o seguinte:
cursor:url(Link do cursor aqui),auto;
Nota: Substitua o trecho em vermelho pelo link do cursor escolhido.
5.Procure pelo seguinte código:
a:hover {
6.Abaixo do código anterior adicione o seguinte:
cursor: url(Link do cursor),auto;
Nota: Onde está em azul substitua pelo link do cursor. Se colocar um cursor diferente do primeiro escolhido apenas os links ficaram com cursor diferente, pois está parte do CSS define os links da página.
7.Salve as alterações e visualize.

Pronto seu blog possui agora um cursor diferente!


Imagem: Blog Tec
Leia mais...


Está ferramenta você já deve ter visto em vários sites, ele consiste em exibir o caminho feito pelo leitor desde o ínicio do blog e assim auxiliando o leitor a encontrar ou se localizar no blog. Aqui no blog possui está ferramenta clique no título do post para ver ela em funcionamento. Está função deixa o template mais bonito e atraente, vamos ver abaixo como aplica-la ao seu:

Instalando

1.Acesse o painel do Blogger (blogger.com)
2.Vá em "Layout"->"Editar HTML"->Marque a caixa "Expandir Modelos de Widgets"
3.Procure pelo código abaixo "Utilize as teclas Ctrl e F":
<b:includable id='main' var='top'>
4.Substitua o código anterior pelo seguinte:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- Sem breadcrumb na página inicial -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb para a página do post -->
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>&#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast == &quot;true&quot;'/>
</b:loop>
<b:else/>
&#187;Sem Marcador
</b:if>
&#187;<span><data:post.title/></span>
</b:loop>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb para o arquivo e página de buscas.. -->
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Arquivos de <data:blog.pageName/>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
Você está em: <b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Todos os Posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts da Categoria <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a>
</b:if>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

5.Procure pelo código abaixo:
<b:include data='top' name='status-message'/>
6.Substitua-a o código acima por:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>


Inserindo a CSS

1.Procure pelo código abaixo:
]]></b:skin>
2.Antes do código aceima adicione:
/*-----Breadcrumbs-----*/
.breadcrumbs {
font-size: 14px;
padding:5px;
font-weight: bold;
border-bottom:3px double #BEBEBE;
line-height: 1.4em;
}
.breadcrumbs a {
font-weight: bold;
color:red;
}

3.Salve as alterações e visualize.

Dica



Para remover aquela mensagem que aparece ao procurar no blog, ou clicar em um marcador é facil basta remover este código no seu template "É necessário marcar a caixa Expandir Modelos de Widgets":
<b:include data='top' name='status-message'/>

Referência:Beautiful Beta,Templates para Você,Blogger'SPhera
Leia mais...

Hoje em dia a maioria das funções do blog/site é baseada em Feed uns exemplos são exibir as ultimas postagens, os últimos comentários, os últimos links, entre outras coisas. Para mudar um pouco o jeito padrão de exibir que é uma lista feita com as tags ("<ul>" e "<li>") é legal colocar animado sendo está animação feita em JavaScript vamos ver abaixo como fazer com que o Feed/RSS fique animado:

1.Acesse o site RSS Pump em seu navegador.
2.Digite a url do Feed do seu blog ou site e clique em add como na imagem abaixo:

Clique para ampliar
3. Em "2. Set Options & Layout" você pode alterar a cor do fundo e da fonte blog como for do seu gosto.
4.Copie o código gerado pelo site, veja a imagem abaixo:

                                                      Clique para ampliar
5.Após ter copiado o código gerado pelo site utilize no seu site ou blog se seu blog for da plataforma Blogger basta acessar o seu painel em blogger.com->"Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript" insira o código e salve.
6.Veja abaixo como ficará seu Gadget depois de pronto:
<div style="background-color: none transparent;"><a href="http://www.rsspump.com/?Rss_widget" title="rss widget">Rss widget</a></div>
Leia mais...

Para uma postagem ser difundida é necessário que ela seja divulgada em todas ou na maior parte das redes sociais. Para que seu leitor te ajude nisso você deve colocar ícones das redes sociais mais conhecidas ou dos chamados Bookmarks no rodapé da postagem isso faz com que você ganha muitas visitas em pouco tempo pois se você apenas publicar uma postagem, como alguém saberá que publicou? Por isso é importante a divulgação para inserir no seu blog veja o tutorial abaixo:

1.Acesse o painel do Blogger (blogger.com)
2.Vá em "Layout"->"Editar HTML"->Marque a caixa "Expandir Modelos de Widgets"
3.Utilize as teclas Ctrl e F para procurar o seguinte código:
<div class='post-footer-line post-footer-line-3'/>
Se não encontrar pesquise por:
<div class='post-footer-line post-footer-line-1'/>
4.Adicione o código seguinte abaixo do código anterior:


<span class='bookmark'>
<table align='left' border='0' cellpadding='0' width='100%'>
<tr>
<td style='vertical-align:middle' valign='middle' width='10%'>
<div expr:id='&quot;sbtxt&quot;+data:post.id'>Compartilhe este post:</div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + &quot;<data:post.id/>&quot;,0)</script>
</td>
<td>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,20);&quot;' rel='nofollow' target='_blank'><img alt='StumpleUpon' src='http://files.bloggerplugins.org/icon_sb_stumb.gif'/></a>
<a expr:href='&quot;http://ma.gnolia.com/bookmarklet/add?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,6);&quot;' rel='nofollow' target='_blank'><img alt='Ma.gnolia' border='0' src='http://home.kpn.nl/oosti468/images/icon_sb_mag.gif'/></a>
<a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,1);&quot;' rel='nofollow' target='_blank'><img alt='DiggIt!' src='http://home.kpn.nl/oosti468/images/icon_sb_dig.gif'/></a> <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,2);&quot;' rel='nofollow' target='_blank'><img alt='Del.icio.us' src='http://home.kpn.nl/oosti468/images/icon_sb_del.gif'/></a> <a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;Title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,3);&quot;' rel='nofollow' target='_blank'><img alt='Blinklist' src='http://home.kpn.nl/oosti468/images/icon_sb_bli.gif'/></a> <a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,4);&quot;' rel='nofollow' target='_blank'><img alt='Yahoo' src='http://home.kpn.nl/oosti468/images/icon_sb_yah.gif'/></a> <a expr:href='&quot;http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,8);&quot;' rel='nofollow' target='_blank'><img alt='Furl' src='http://home.kpn.nl/oosti468/images/icon_sb_fur.gif'/></a> <a expr:href='&quot;http://www.technorati.com/cosmos/search.html?url=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,9);&quot;' rel='nofollow' target='_blank'><img alt='Technorati' src='http://home.kpn.nl/oosti468/images/icon_sb_tec.gif'/></a> <a expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,10);&quot;' rel='nofollow' target='_blank'><img alt='Simpy' src='http://home.kpn.nl/oosti468/images/icon_sb_sim.gif'/></a> <a expr:href='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; +  data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,11);&quot;' rel='nofollow' target='_blank'><img alt='Spurl' src='http://home.kpn.nl/oosti468/images/icon_sb_spu.gif'/></a> <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,17);&quot;' rel='nofollow' target='_blank'><img alt='Reddit' src='http://home.kpn.nl/oosti468/images/icon_sb_red.gif'/></a> <a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url +  &quot;&amp;title=&quot;+data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,19);&quot;' rel='nofollow' target='_blank'><img alt='Google' src='http://home.kpn.nl/oosti468/images/icon_sb_goo.gif'/></a>
</td>
</tr>
</table>
</span>  

5.Agora procure pelo código seguinte:
]]></b:skin>
6.Antes do código acima adicione o seguinte:
.bookmark{
padding:0px;
margin-top:15px;
background:#ddd;
}
.bookmark a:hover {
position: relative;
top: 1px;
left: 1px;
}
.bookmark img { border: 0;
padding:0px;
margin-top:15px;
}

7.Salve as alterações e visualize.
O resultado final será parecido com este da imagem abaixo:



Referência: Template99
Leia mais...


A grande maioria das plataformas de blogs não oferecem uma hospedagem que aceite o formato .js "JavaScript". Os scripts são importantes pois a maioria das funções de que um blog necessita são realizadas rapidamente com eles, o único inconveniente é ter de hospedar em um outro site que não seja o nosso blog, isto é muito ruim pois estamos dependendo dos outros ou melhor colocando o nosso blog nas mão de um serviço que pode sair fora do "ar" a qualquer momento.

Este site que encontrei hospeda os Java Scripts de maneira rápida necessitando apenas selecionar o local e digitar o e-mail. Veja como hospedar:

1.Acesse o site ( www.yourjavascript.com )
2.Selecione o local em que encontra-se o script no seu computador:

3.Preencha seu e-mail e clique em "upload" :

4.A URL do Java Script será enviada para seu e-mail verifique a caixa de entrada ou a caixa de lixo eletrônico "Spam" alguns e-mails costumam envia-lo para lá. Você receberá um link como esse "http://www.yourjavascript.com/111761291501/blogtocmin1.js" no seu e-mail este é o link do Script. Agora é só inseri-lo no local que precisar.

Leia mais...


A promoção foi um sucesso tivemos mais de 90 participantes, mas uma das exigências da promoção não foram cumpridas que era divulgar o Notícia e blog em outros blogs, site, comunidades. Já que ocorreu isto então resolvi colocar todos os e-mails que comentaram pedindo convites nas postagens, Orkut novo - Pegue seu convite (novo visual é apenas para convidados) e no formulários da promoção. Fiz o que eu não queria "um sorteio" o resultado está ai em baixo, se seu e-mail está ai e você ainda não recebeu seu convite aguarde, hoje ainda você receberá. Então vamos ao resultado:


1º Sorteado: gigi_gatinha11@yahoo.com.br
2º Sorteado: GreiceSmith@Hotmail.Com
3º Sorteado: pedrohsevero@ig.com.br


Foram sorteados 3 três e-mails os dois primeiros receberam um convite para o Google Wave e um para o Novo Orkut. Atenção entre em  contato com meu e-mail "fernandopasse@hotmail.com" se você ganhou em 1º ou 2º lugar pois o Google Wave tem algumas exigências para você receber o convite. Se ganhou em terceiro receberá normalmente um convite para o Novo Orkut.


Este foi o primeiro sorteio mas em breve teremos outros obrigado a você que participou e apoio o meu blog.
Atualização: Tive que mudar os sorteados pois alguns que foram sorteados eram spam


Imagem: CCNA
Para realizar o sorteio utilizei o random.org
Leia mais...

Fundo do seu blog a parte mais visível


Está é uma dica muito interessante para você que gosta de ter um blog bem atualizado, pois o fundo será sempre um diferente a cada visita do leitor dando uma impressão de que o blog muda o fundo várias vezes. Para fazer isso é necessário utilizar um pequeno JavaScript que muda os fundos do blog a cada atualização da página, veja como você pode ter está façanha no seu blog :

Hospede as imagens

Antes de começar você deve ter as imagens de fundo que deseja colocar, você pode ver algumas imagens nesta postagem aqui do blog. Depois de escolher as imagens e salva-las no seu computador é necessário hospeda-las em um servidor se não souber onde hospedar veja o Guia das Hospedagens de imagens escolha a melhor opção e hospede.

Instalando o script no blog

Depois já ter hospedado e já estar com as urls das imagens você deve inseri-las ao script, veja abaixo:
1.Acesse o painel do Blogger "blogger.com"
2.Vá para "Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript"
3.Insira o código abaixo adaptando de acordo com a nota:
<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>

Nota: A parte em azul deve ser substituída pela url da imagem que você hospedou, substitua cada parte por uma url diferente. Em vermelho você deve alterar de acordo com o número de banner que foi adicionado ao script.
4.Salve as alterações e visualize.

Referência:Tips for New Blogger
imagem:Baixaki
Leia mais...

O Blogger como qualquer outra plataforma, está sujeito a alguns defeitos, entre eles é não exibir a data em mais de uma postagens do mesmo dia. O que faz de um Layout que foi baseado na data ou mesmo foi estipulado um CSS para ajuste, uma cor, um fundo, pode ficar muito feio ou até mesmo defeituoso se a data não aparecer em todos os posts. Uma correção pode ser feita no HTML para corrigir este defeito é muito fácil veja abaixo como alterar:

1.Acesse o painel do Blogger
2.Vá em "Layout"->"Editar HTML"->marque a caixa "Expandir Modelos de Widgets"
3.Procure pelo código abaixo no seu template Utilize as teclas Ctrl e F para procurar:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

4.Substitua o código anterior pelo seguinte:
<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

5.Salve as alterações e visualize.

Referência:Anshuldudeja
Leia mais...

Meta Tags são trechos de palavras que indicam aos buscadores as palavras-chave "As palavras da busca", para que seu conteúdo possa ser indexado rapidamente é importantíssimo que seu HTML seja otimizado para isto, pois quanto mais os buscadores indexarem seu conteúdo mais visitas seu blog vai ter, pois vai aparecer em mais pesquisas "Google,Yahoo,Bing" entre outros. Abaixo outras definições de meta tags:
"Meta tags são linhas de código HTML, ou "etiquetas", que, entre outras coisas, descrevem o conteúdo do seu site para os buscadores. É nelas que você vai inserir as palavras chaves que facilitarão a vida do usuário na hora de te encontrar. Através delas você pode também "assinar" seu site, declarando sua autoria sobre o código fonte." Info Wester

Otimizando as Meta Tags do Blogger

1.Acesse o painel do Blogger(blogger.com)
2.Vá em "Layout"->"Editar HTML"
3.Procure agora pelo código abaixo Utilize Ctrl e F para buscar:
<b:skin><![CDATA[
4.Antes do código acima adicione o seguinte:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName + data:blog.title + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + data:blog.title + data:blog.pageName' name='Keywords'/>
</b:if>

5.Salve as alterações e visualize.
6.Agora toda vez que criar uma postagem ele já vai ter meta tags automaticamente.

Continuem participando da promoção

Referência: Blogger Stop
Imagem: kpmrs
Leia mais...