Paginação Numerada

Editar HTML e procure por ]]></b:skin> Antes dela adicione:

.showpageArea {font-family:verdana,arial,helvetica;color: #000;font-size:11px; margin:10px;}.showpageArea a {color: #000;text-shadow:0 1px 2px #fff;font-weight: 700;}.showpageNum a {padding: 3px 8px;margin:0 4px;text-decoration: none;border:1px solid #919106;-webkit-border-radius:3px;-moz-border-radius:3px;background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -50px repeat-x;}.showpageNum a:hover {border:1px solid #aeae0a;background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -25px repeat-x;}.showpageOf{margin:0 8px 0 0;}.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 #919106;background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 0 repeat-x;text-decoration: none;}




E Salva!  Depois  Vai em editar html e procure por </body> Antes dele coloque:




<!-- Inicio do codigo de navegacao --><b:if cond='data:blog.pageType != &quot;item&quot;'><script type='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord =&#39;&#39;;var downPageWord =&#39;&#39;;</script><script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/></b:if><!-- Final do codigo de navegacao -->




Inportante alterar o valor var pageCount=5; com o numero de postagens que vc tenha na home para fica ajusta sem erros.

Dominios Gratis

Você tem um Site e/ou Blog, mas ainda não tem Dominio próprio ? Hoje em dia é muito simples resolver uma situação como essa.

Existem sites que você GANHA o dominio em trocar de outros cadastros, é facil, veja um exemplo:

Você consegue 9 cadastros pelo seu link de referencia, e ja ganha um dominio .com .org ou .net gratis.

Não perca tempo Comece já :

Clique Aqui

Player de áudio com HTML 5

A tag <audio>, que é bem fácil de usar, promete facilitar a vida de todos nós: blogueiros, desenvolvedores e demais internautas. Vamos amar não depender mais de JavaScript, Flash e plugins para executar músicas e outros arquivos de áudio na web. Aprenda como funciona esse recurso e comece a usar desde já. Viva a simplicidade!

► O código

Como ainda não temos uma extensão que funcione em todos os navegadores, é preciso ter o áudio em pelo menos dois formatos: ogg e mp3. É necessário subir os arquivos para um host de site, não adianta colocá-los em um site específico dedownload porque o link não é executável.

Código:

<audio controls="controls" loop preload="preload title="Abaçaiado - O Teatro Mágico"> <source type="audio/ogg" src="http://htmhelen.webcindario.com/music/Abacaiado.ogg" /> <source type="audio/mpeg" src="http://htmhelen.webcindario.com/music/Abacaiado.mp3" /> <a href="http://htmhelen.webcindario.com/music/Abacaiado.mp3">Abaçaiado - O Teatro Mágico.mp3</a> </audio>

As partes marcadas são aquelas que você deve personalizar. O resultado é o seguinte:

Caso seu navegador não seja compatível com HTML 5, você verá apenas um link para baixar ouvir a música no Yahoo! Web Player em formato mp3.

► Só um formato

Para disponibilizar o arquivo em apenas um formato (o que não é recomendado ainda), o código é o seguinte:

<audio src="http://htmhelen.webcindario.com/music/Quermesse.mp3" controls="controls" loop preload="preload" title="Quermesse - O Teatro Mágico"><a href="http://htmhelen.webcindario.com/music/Quermesse.mp3">Quermesse - O Teatro Mágico.mp3</a>

</audio>

Resultado em formato ogg (não vai funcionar no Internet Explorer nem no Safari):

Resultado em formato mp3 (não vai funcionar no Firefox nem no Opera):

► Tabela de extensões

Saiba quais formatos funcionam em cada navegador:

Formatos:	mp3	ogg	wav*
Chrome:	sim	sim	sim
Firefox:	não	sim	sim
Internet Explorer 9:	sim	não	não
Opera:	não	sim	sim
Safari:	sim	não	sim

*Apesar de ser compatível com quase todos os navegadores, o formato wav não é muito adequado para a web, por ser muito pesado e, consequentemente, ter carregamento lento.

Transição suave com CSS

Este é, sem dúvida, um dos efeitos mais divertidos de CSS 3. A propriedadetransition (transição) faz com que as mudanças de posição, cores, cantos e tamanhos de um elemento sejam gradativas. Quanto maior a duração, mais suave será o fade.

Para ver o recurso em ação, coloque o cursor do mouse dentro do retângulo abaixo. Mantenha o ponteiro sobre o retângulo durante toda a transição para ver a mudança até o final.

— O que é isto?

— Apenas um teste legal!

► Exemplo simples

<style> div#facil {margin:auto; color:#000000; background:yellowgreen; width:100px; height:100px; transition:all 5s; -moz-transition:all 5s;

-o-transition:all 5s; -webkit-transition:all 5s;} div#facil:hover {background:greenyellow; width:450px;} </style>

<div id="facil">Este exemplo é mais fácil de entender.</div>

Resultado:

Este exemplo é mais fácil de entender.

► Exemplo complexo

No primeiro exemplo deste post foi utilizado o seguinte código:

<head> <style type="text/css"> div#muda {padding:10px; margin:20px; margin-left:auto; margin-right:auto; color:#40E0D0; font-size:30px; width:400px; height:100px; background-color:#40E0D0; box-shadow: 10px 10px 35px #40E0D0; border:13px solid #AFEEEE; transition:all 5s linear; -moz-transition:all 5s linear;

-webkit-transition:all 5s linear; -o-transition:all 5s linear;} div#muda:hover { margin:40px; margin-left:auto; margin-right:auto; color:white; font-size:50px; width:300px; height:300px; background-color:salmon; box-shadow: 10px 10px 10px #F08080; border:1px solid #F08080;} </style> </head> <body> <div id='muda'><span style='color:salmon;'>— O que é isto?</span><br/>— Apenas um teste legal!</div> </body>

Resultado:

— O que é isto?

— Apenas um teste legal!

Esperam que tenham gostado..

Como colocar Botão “Curtir” ou “Recomendar” do facebook no blog

Colocar o botão curtir no seu blog, é super fácil, apenas copie um dos códigos abaixo, sendo que o primeiro é de Curtir e o segundo para recomendar. Ao copia-los, acesse o painel principal do seu blog, clique em “Layout” –> “Adicionar um Gadget” –> “HTML/Javascript”, faça as devidas modificações necessárias conforme destacado no código e depois salve.

<iframe src="http://www.facebook.com/plugins/like.php?href=ENDERECODOSEUBLOG&layout=standard& 

show_faces=false&width=380&action=like&colorscheme=light&height=25&locale=pt_BR" scrolling="no" allowTransparency="true" frameborder="0" style="border:none; overflow:hidden; width:250px; height:25px;" ></iframe>

  

Além do botão “Curtir” Também existe o botão “Recomendar” que segue a mesma função que o de “Curtir”, veja o código:

<iframe src="http://www.facebook.com/plugins/like.php?href=ENDERECODOSEUBLOG&layout=standard& 

show_faces=false&width=380&action=recommend&colorscheme=light&height=25&locale=pt_BR" scrolling="no" allowTransparency="true" frameborder="0" style="border:none; overflow:hidden; width:250px; height:25px;"></iframe>

Valeu (: 

Marcadores em colunas com efeito Hover

Aprenda agora, como fazer um Menu com efeito Hover:,

Como deixar em colunas

1. Já feito o login no blogger, acesse o painel principal do seu blog.
2. Clique na guia “Modelo” –> “Editar HTML”.
3. Procure por:

]]></b:skin>

4. Acima dessa tag cole o código abaixo:

.list-label-widget-content {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
.list-label-widget-content li {
-webkit-transition: All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
.list-label-widget-content li:hover {
-webkit-transition:All 0.5555s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);
background: whitesmoke;
border-radius: 2px;
color: #666;
border-radius:3px;
text-align: center;
font-size: 12px;
font-weight: bold;
}

Personalizando

Você deve ter percebido que no código existem algumas partes em destaque. Veja o que são cada uma delas:
Vemelho: Quantidade de colunas, altere os 3 em destaque colocando o mesmo valor.
Azul: O azul é a cor do fundo do item quando no estado Hover, altere pra outra cor hexadecimal ou o nome da cor em inglês.
Verde: Corresponde a cor da fonte quando no estado Hover.
Depois de ter personalizado do seu jeito, apenas Salve e pronto!

Tráfego em tempo real no blog - FEEDJIT

O widget conhecido por Live Traffic Feed, criado pela feedjit, tem como objetivo exibir uma lista pessoas que visitaram seu blog  recentemente. O widget conta com uma interface bem elaborada e que se adapta perfeitamente em qualquer blog depois de configurada. Ao decorrer deste tutorial você vai estar aprendendo a configurar o widget corretamente e como instalar no blog. O Live Traffic Feed além de exibir avatares das pessoas que visitaram seu blog ou site, exibe também vínculos com redes sociais como Twitter e Facebook, duas conhecidas redes sociais. O widget faz questão de mostra onde a pessoa reside, claro que, com uma certa restrição de informações como você pode perceber na imagem acima.,

Configurando e instalando no blog:

Agora que você já sabe um pouco sobre do que se trata este widget, vamos ver como configurar-los para ser implantado no seu blog.
1. Entre no link Abaixo:

http://feedjit.com/freeLiveTrafficFeed/

2. Preencha o formulário conforme mostrado na imagem abaixo. Depois clique no botão “Get your Traffic Feed”.

3.  Agora configure seu widget como quiser, alterando cores ou escolhendo um tema pronto. Configure também o tamanho para ser adaptado perfeitamente no seu blog. Por fim, clique em“GO”.

4. No próximo passo clique no botão mostrado na imagem abaixo.

5. Finalmente, é hora de instalar no blog, apenas escolha um blog um título para o gadget e clique em “Adicionar Widget”.


Pronto, agora é só move-lo pra qualquer lugar do blog. E esse foi mais um simples tutorial que poderá ajudar quem não conhece esse sistema ainda. Espero que tenha gostado, até mais!