Coloque o jogo do Pac Man no seu site ( Código de Fonte do PACMAN do Google)

No dia 21 de Maio de 2010, em comemoração aos 30 anos do jogo Pac Man, o Google colocou em sua home uma versão do Jogo toda desenvolvida em JavaScript, alguns pensaram que era só de enfeite, mas os mais espertos viram que era possível jogar e em consequência tomar vários esporros do chefe por conta disso.

Caso queira vê-lo em funcionamento, basta dar uma olhada aqui. Para jogar clique em Insert Coin. Ao contrário do que muita gente pensava, não é feito em HTML5, é feito em puro JavaScript, além de usar do Flash para o som do jogo.

E para aqueles que gostaram do Joguinho PACMAN, estou disponibilizando o código de fonte do Jogo para você poder coloca-lo em seu site ou blog, é só copiar e colar:

<p> </p><p><script>window.google={kEI:"Quz2S63qIYeglAfw8oHGCg",kEXPI:"17259,23663,24477,24661,24745,24770,24808",kCSI:{e:"17259,23663,24477,24661,24745,24770,24808",ei:"Quz2S63qIYeglAfw8oHGCg",expi:"17259,23663,24477,24661,24745,24770,24808"},ml:function(){},pageState:"#",kHL:"en",time:function(){return(new Date).getTime()},log:function(b,d,c){var a=new Image,e=google,g=e.lc,f=e.li;a.onerror=(a.onload=(a.onabort=function(){delete g[f]}));g[f]=a;c=c||"/gen_204?atyp=i&ct="+b+"&cad="+d+"&zx="+google.time();a.src=c;e.li=f+1},lc:[],li:0,j:{en:1,l:function(){},e:function(){},b:location.hash&&location.hash!="#",bv:3,pl:[],mc:0,sc:0.5},Toolbelt:{}};(function(){for(var d=0,c;c=["ad","bc","p","pa","zd","ac","pc","pah","ph","sa","xx","zc","zz"][d++];)(function(a){google.j[a]=function(){google.j.pl.push([a,arguments])}})(c)})();</p><p> window.google.sn="webhp";window.google.timers={load:{t:{start:(new Date).getTime()}}};try{window.google.pt=window.gtbExternal&&window.gtbExternal.pageT();}catch(u){}window.google.jsrt_kill=1;</p><p> </script> </p><p> <style> </p><p> body{background-color:black}</p><p> </style> </p><p> </p><p><script>var _gjwl=location;function _gjuc(){var b=_gjwl.href.indexOf("#");if(b>=0){var a=_gjwl.href.substring(b+1);if(/(^|&)q=/.test(a)&&a.indexOf("#")==-1&&!/(^|&)cad=h($|&)/.test(a)){_gjwl.replace("/search?"+a.replace(/(^|&)fp=[^&]*/g,"")+"&cad=h");return 1}}return 0}function _gjp(){!(window._gjwl.hash&&window._gjuc())&&setTimeout(_gjp,500)};</p><p> google.y={};google.x=function(e,g){google.y[e.id]=[e,g];return false};if(!window.google)window.google={};window.google.crm={};window.google.cri=0;window.clk=function(e,f,g,k,l,b,m){if(document.images){var a=encodeURIComponent||escape,c=new Image,h=window.google.cri++;window.google.crm[h]=c;c.onerror=(c.onload=(c.onabort=function(){delete window.google.crm[h]}));if(b&&b.substring(0,6)!="&sig2=")b="&sig2="+b;c.src=["/url?sa=T","",f?"&oi="+a(f):"",g?"&cad="+a(g):"","&ct=",a(k||"res"),"&cd=",a(l),"&ved=",a(m),e?"&url="+a(e.replace(/#.*/,"")).replace(/\+/g,"%2B"):"","&ei=","Quz2S63qIYeglAfw8oHGCg",b].join("")}return true};</p><p> window.gbar={qs:function(){},tg:function(e){var o={id:'gbar'};for(i in e)o[i]=e[i];google.x(o,function(){gbar.tg(o)})}};</script> </p><p>  </p><p> <!-- textarea id=csi style=display:none></p><p> 

Pesquisa por VOZ no Blog ou Site

Depois do Google Disponibilizar a pesquisa por voz tanto para seu navegador, buscador e também para celulares agora disponibilizo para vocês a pesquisa por Voz para Blog ou Site. Logo Abaixo o código de fonte é só copiar e colar:
</span><span class="Apple-style-span" style="font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; white-space: pre-wrap; -webkit-text-size-adjust: none; "><section id="search"></span></p><p><span class="Apple-style-span" style="white-space: pre-wrap; -webkit-text-size-adjust: none; "> <h3>Search</h3> <div class="box-content"> <form action="http://www.pinceladasdaweb.com.br/blog/" method="get" id="searchform"> <div> <input type="text" size="20" value="" name="s" id="s" x-webkit-speech="true" onwebkitspeechchange="this.form.submit();"> <input type="submit" tabindex="2" value="Search" class="btn" name="searchsubmit" id="searchsubmit"> </div> </form> </div> <div class="box-footer"></div> </section></span><span class="Apple-style-span" style="font-family: 'Trebuchet MS', Trebuchet, sans-serif; font-size: 13px; line-height: 18px; ">

Favicon: como criar e hospedar imagens .ico

Para quem não sabe, favicon, é aquele pequeno ícone que aparece na barra de navegação, do lado esquerdo da url de uma página web.

Nos posts anteriores, ensinei como criá-lo em formato .png. Agora, para que ele seja visualizado em outros navegadores, é preciso transformar a imagem .png em .ico. Uma forma simplificada de se fazer isso é acessando este site:http://www.favicon.ru/en

Devemos clicar em arquivo e procurar a imagem já salva no computador. Depois, iremos clicar em create favicon.ico. Feito isso, aparecerá uma nova janela para o download.

Legal! Mas, neste ponto, apareceu um novo problema: nem Picasa, nem ImageShack, nem Photobucket hospedam imagens no formato .ico. Nova pesquisa no Google e encontrei diversos sites com esta função. Escolhi o Image Boo Hosting.

Para hospedar a imagem, devemos clicar em arquivo, procurar a imagem com formato .ico recém-criada, fazer o upload dela e copiar a url, conforme nos mostra a imagem abaixo:

Agora, vamos adaptar o código e inserir no html do nosso template. Este código é de autoria do Compulsivo, com todos os direitos reservados.

<link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/>

Na primeira linha colamos a url da imagem .ico e na segunda, a url da mesma imagem em .png. Agora, é só entrar no html, procurar (Crtl+F) por ]]></b:skin> e colar o código logo abaixo, devendo ficar assim:

Vamos visualizar o template e, se tudo estiver bem, salvar. Para criar a imagem em .png, podemos usar o Paint ou o Photshop e hospedar no Picasa. Não tem erro!

Para que funcione também no Google Chrome, visualize um novo código aqui.

Imagem para o cabeçalho do Blogger com Photoshop

Continuando a série sobre o Adobe Photoshop, hoje vou explicar como criar uma imagem para o cabeçalho do Blogger/Blogspot.

Como o Dicas Blogger não é um blog sobre o Photoshop, estou tentando escolher temas que sejam do interesse de todos os blogueiros.

Pra saber o tamanho da imagem a ser usada em seu blog, vá em design>elementos de página> gadget cabeçalho. Clique em editar. No final do gadget, irá aparecer a largura máxima permitida (figura 1). Quanto à altura, a escolha é livre.

Vamos usar como exemplo o Template Magazine, cuja largura máxima é de 970 px.

Para ampliar as imagens deste tutorial, clique sobre as elas.

No Photoshop, clique em arquivo>novo. Escolha o tamanho de 970 (largura) por 150 (altura), com fundo transparente (figura 2). O resultado está na figura 3.

Agora vamos escolher uma ícone para incrementar nosso cabeçalho. Não sabe onde encontrar? Então acesse - 15 sites para busca de ícones web.

Clique em abrir e procure dentro do computador por um ícone de sua preferência. Para este tutorial, eu vou escolher um do Blogger (óhhhhh).

Agora temos duas abas abertas no Photoshop: uma com o fundo transparente e a outra com o ícone. Dependendo do tamanho do ícone, será necessário ajustar a sua altura à da futura imagem do cabeçalho. Em nosso exemplo, o cabeçalho vai ter 150px de altura, então o ícone deve ter menos do que isso.

Para ajustar o tamanho da imagem, clique em imagem>tamanho da imagem (figura 4) e altere para o valor desejado (figura 5)

Agora dê um Crtl+A e um Crtl+C no ícone. Abra a aba onde está a outra imagem e cole o ícone aí. Para uma melhor visualização, use o zoom. (figura 6). Agora selecione aferramenta de texto e escreva o nome do seu blog (figura 7)

Para alterar as cores, passe o mouse sobre o texto e selecione a cor (figura 8). Siga o mesmo procedimento para alterar o tipo da fonte (figura 9)

Para movimentar o texto e o ícone, use a ferramenta mover (figura 10). Com a ferramenta mover ativada, clique com o botão direito do mouse sobre a parte a ser movimentada (figura 11) e deslize a imagem com a seta do mouse.

A imagem do cabeçalho está pronta (figura 12). Agora é só salvá-la (figura 13) no formato .png e fazer o upload para o seu blog.

Este foi um tutorial super básico. Recomendo que vocês explorem os maravilhosos recursos do Photoshop.

Novo Blog Na Área

Em minhas navegações pela internet conheci um blog, bem interessante. Quem se interessar em acessar o endereço é esse:
http://soccernetlanhouse.blogpot.com

Como postar no Blog pelo celular

Eu uso no meu celular o Opera mini 4 uso normalmente o Painel do Blog como se fosse um PC convencional, além de poder postar novas atualizações e ate mesmo fotos.
Aconcelho usarem o Opera mini 4 mas pelo almenos no meu é preciso aceitar a estalação de arquivos java (jar).
Qualquer duvida é só perguntar.
Um exemplo de postagem é essa que eu postei.

Uma dica se você usa uma conta comum do Google deixe suas informações salvas no seu celular como se fosse no computador, dessa forma quando você for se conectar ao painel do blogger você nem ira precisar fazer o login.

Gente estou procurando uma pessoa para ajudar a postar atualizações no Blog PC 100%. Quem se interessar é só me mandar um email ou postar no Blog.

Entrando no espírito NATALINO

Como colocar gorro de Natal em Uma foto
Neste tutorial iremos aprender a colocar gorro de Natal em pessoas ou em objetos. Vale lembrar que é uma ótima dica para deixar o ambiente em clima Natalino, tanto no avatar do messenger, como no perfil do orkut ou twitter. Aproveitando a oportunidade, gostaria de desejar um Feliz Natal para todos, e o meu agradecimento aos leitores que acompanham o site o ano inteiro!

Escolha seu Gorro de Natal

Salve seu gorro de Natal antes de começar o tutorial. Para o tutorial abaixo, usarei o "Gorro de Natal UM"(Clique com o botão direito do mouse sobre a imagem do gorro, e escolha "Salvar Imagem como...", e escolha o local que deseja salvar a imagem).

Atenção: A imagem está em formato .PNG, ou seja, com fundo transparente. Caso você copie utilizando "copiar e colar" com o mouse, este fundo não irá ficar transparente, e sim preto ou branco. Por isso que você deve SALVAR a imagem em seu computador e e abrir no programa pressionando as teclas "Ctrl+O".

Tutorial

1. Abra a imagem da pessoa ou do objeto que deseja colocar o gorro, e abra também o gorro de Natal.
2. Copie (Ctrl+C) o gorro de natal e cole (Ctrl+V) sobre a imagem da pessoa ou do objeto.
3. Arraste o gorro pra cima do local que deseja colocar.
4. Provavelmente não ficou certo o gorro na cabeça da pessoa, então clique com o botão direito do mouse sobre o gorro e selecione "Transformar livremente" (Foto abaixo). (No Photoshop CS5 é só clicar CTRL+T)
5. Caso não tenha dado certo, então clique com o botão direito do mouse sobre o gorro novamente e selecione "Distorcer" e ajuste manualmente o gorro com a cabeça da pessoa.
6. Pressione (Shift+Enter) para juntar as camadas!

Imagem Usada

Ícones Estilo NATAL

Aqui tem uma seleção de ícones bem legais para vocês que gostam de personalizar até mesmo o MSN. 

E por Ultimo...

para aqueles que gostam de personalizar os seus blogs para entrar no espírito natalino vou ensinar como colocar neve no Blog.

Chegando o final de ano algumas pessoas pediram um código para colocar neve caindo no blog, então preparamos esse código:

<script type="text/javascript">
endereco = "http://img42.imageshack.us/img42/5508/neve1.png";
</script>
<script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/neve.js"></script>

Copie e coloque no seu blog pela pagina layout, adicionar gadget, html/javascript. Este gadget pode ficar em qualquer parte da sua pagina. Você pode usar com a imagem que desejar, ou seja, não é necessário utilizars somente com imagens que simulem neve poderiam ser corações caindo pelo blog ou qualquer outra imagem, você só precisa hospedar a imagem e colocar no lugar indicado no código. Abaixo temos 4 imagens que podem servir como neve para utilizar alguma delas sugerimos salvar, depois hospedar no ImageShack e colocar o endereço da imagem no código no lugar que está http://img42.imageshack.us/img42/5508/neve1.png, se precisar de ajuda veja aqui como hospedar e usar o endereço certo da imagem.






Não fizemos o código já com o endereço de cada imagem, pois se muitas pessoas usarem a mesma imagem isso pode fazer com que ela seja removida do site de hospedagem por se tratar de um serviço grátis. Espero que esse código seja útil para enfeitar o seu blog para o Natal e outras ocasiões também, afinal como já dissemos você pode colocar qualquer imagem flutuando pelo seu blog de maneira bem fácil e rápida.

Quando visualizar seu blog pode ter a impressão que os flocos de neve passam apenas uma vez, mas não é isso que acontece, na verdade eles percorrem a pagina inteira até o final e não somente a parte que aparece na tela, então depois de aparecer a primeira vez os flocos demoram alguns segundos para começar novamente, mas isso é normal, veja que após ficar na pagina alguns segundos o efeito fica muito melhor que no inicio.

Para utilizar esse código com os novos modelos de template do blogger(designer do modelo) você deve colocar o código na pagina editar html, logo após a linha que abre o body:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Talvez no seu html não seja examente igual mas o importante é <body ......>, então logo abaixo desta linha cole o código que citamos no inicio deste tutorial sobrecolocar o efeito neve no seu blog.

Adicione um Caixa de Texto ao blog

Com esta caixinha de texto é possível também publicar códigos ou mesmo dar um destaque em um post.

<textarea style="COLOR: rgb(0,0,0); BACKGROUND-COLOR: #ffffff" rows="5" cols="40">ESCREVA AQUI O SEU TEXTO</textarea>

Exemplo:

ESCREVA AQUI O SEU TEXTO

Cursor Personalizado Para Blogger

Confirmado com Internet Explorer e com o Firefox - Confirmado em Blogspot em miniaplicações (HTML/Javascript) Dentro da caixa com o código, altera "ESCREVA AQUI O SEU TEXTO", só o texto que está dentro dos apóstrofos ' Podes também alterar a velocidade, distância das letras ao cursor, espaço que cada letra ocupa, cor do texto
Depois clica aqui, faz CTRL+C para copiares e depois colares


<script language="javascript"></p><p><br></p><p>//Alterar o Texto que stá dentro das Aspas em baixo:</p><p>var text='Escreva aqui o Seu Texto';</p><p>var delay=40; // altere aqui velocidade </p><p>var Xoff=20; // distancia a contar para a direita do cursor (- Valores em negativo vão para a esquerda)</p><p>var Yoff=0; //distancia a contar para baixo desde o cursor (- Valores em negativo vão para cima)</p><p>var txtw=14; // Espaço que cada caracter ocupa</p><p>var beghtml='<font color="#527F76"><b>'; </p><p>var endhtml='</b></font>'; </p><p>//********** Não alterar o código seguinte **********\\</p><p>ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;</p><p>ie4 = (document.all && !document.getElementById)? true : false;</p><p>ie5 = (document.all && document.getElementById)? true : false;</p><p>ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;</p><p>var txtA=new Array();</p><p>text=text.split('');</p><p>var x1=0;</p><p>var y1=-1000;</p><p>var t='';</p><p>for(i=1;i<=text.length;i++){</p><p>t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';</p><p>t+=beghtml+text[i-1]+endhtml;</p><p>t+=(ns4)? '</layer>' : '</div>';</p><p>}</p><p>document.write(t);</p><p>function moveid(id,x,y){</p><p>if(ns4)id.moveTo(x,y);</p><p>else{</p><p>id.style.left=x+'px';</p><p>id.style.top=y+'px';</p><p>}}</p><p>function animate(evt){</p><p>x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);</p><p>y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);</p><p>}</p><p>function getidleft(id){</p><p>if(ns4)return id.left;</p><p>else return parseInt(id.style.left);</p><p>}</p><p>function getidtop(id){</p><p>if(ns4)return id.top;</p><p>else return parseInt(id.style.top);</p><p>}</p><p>function getwindowwidth(){</p><p>if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;</p><p>else return window.innerWidth+pageXOffset;</p><p>}</p><p>function movetxts(){</p><p>for(i=text.length;i>1;i=i-1){</p><p>if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){</p><p>moveid(txtA[i-1],0,-1000);</p><p>moveid(txtA[i],0,-1000);</p><p>}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));</p><p>}</p><p>moveid(txtA[1],x1,y1);</p><p>}</p><p>window.onload=function(){</p><p>for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);</p><p>if(ns4)document.captureEvents(Event.MOUSEMOVE);</p><p>document.onmousemove=animate;</p><p>setInterval('movetxts()',delay);</p><p>}</p><p></script></p><p>

Como Colocar Musicas em seu Blog

Aprenda a colocar Musicas em seu Blog,Bom Gosto muito de musica mais nem todos os visitantes do The Blog Tools Gostam,Intão ai vai a dica,Evite colocar AutoPlay.
Player com Musica:
Pegue o codigo Abaixo do Player:
</p><blockquote><p><embed type="application/x-shockwave-flash"<br> src="http://static.4shared.com/flash/player.swf"<br> width="200" height="22"<br> allowscriptaccess="always"<br> allowfullscreen="false"<br> flashvars="height=115&width=280&file=<font style="background: rgb(0, 153, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"><b>LINK DA SUA MUSICA.mp3</b></font>&screencolor=0xFFFFFF&showstop=true&usefullscreen=false&showdownload=false&autostart=false"/></p></blockquote><p>

Troque o Que esta selecionado em Verde e Coloque o Link de sua Musica!
Player de Rádio Online:
Rádio Fusion:
- Entre No Site: http://www.radiofusion.com.br/
- Clique no Menu Players;
- Escolha seu Player e Clique em Gerar Codigo:

 

- Agora Adicione um novo gadget do tipo html/javascript e Cole Codigo do Player.

Como Alterar um template no Blogger/Blogspot

Para muitos mudar o Template do Blogspot é uma tarefa difícil,
para quem ainda não sabe ai vai o tutorial de Como Alterar ou Adicionar um Template no BlogSpot,
Siga os Passos Abaixo:
- Entre No site blogger.com ou blogspot.com, logue com seu usuario e senha do google:

- Em seguida escolha seu Blog no Painel do Blogger,e clique em Layout,
- agora clique em Editar HTML:
- Agora por segurança selecione Expandir modelos de widgets e clique em Baixar modelo completo,causo der augum erro tera o Back-up do seu Template.
- Veja a Imagem a Baixo e siga os Passos:

- Agora Basta clicar No botão "Arquivo..." e Procure seu template em seguida clique no botão "Fazer Upload",depois de carregado Podera visualizar seu Template primeiro clicanco no botão "Vizualizar" ou Salvar direto clicando no Botão "Salvar Modelo"