Mostrando postagens com marcador tutoriais. Mostrar todas as postagens
Mostrando postagens com marcador tutoriais. Mostrar todas as postagens

Tutorial - Slider lateral para banners ou publicidade no blog

Algumas pessoas tem me pedido para fazer um tutorial de como inserir um slider lateral para blogger que fique passando as imagens de promoções ou mesmo uma publicidade. Separei aqui um código bem simples e que deve suprir essa necessidade de quase todos os blogueiros. O slider que vou mostrar como montar é semelhante ao do lado, ele fica passando em ordem as imagens com um efeito de pagina de livro sendo virada. Caso queiram ver ele em funcionamento podem dar uma olhada no blog da minha namorada http://www.vicio-de-leitura.com/ que lá esta ele instalado.

Para começar devemos adicionar um widget na lateral do blog onde você deseja que apareça o slider, o widget deve ser do tipo HTML.
Após inserir vamos copiar o código abaixo e colar no corpo do widget que adicionamos.


<style>

#slide_lista ul, li{
 display: block;
}
 
#publicidade{
 margin: auto;
 padding: 10px;
 width: 250px;
 height: 300px;
 overflow: hidden;
 border: 1px solid #fff;
 border-radius: 5px;
 background: rgba( 255 , 255 , 255 , .5 );
 position: relative;
}
 
#box-1, #box-2, #box-3, #box-4{
 width: 250px;
 height: 250px;
}
#pub_pager{
text-align:center;
}
#pub_pager a{
padding: 5px;
margin: 3px;
background: grey;
font-size: 8px;
color: white;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/151407432/jquery-cycle-all.js"></script>

<script type="text/javascript">

 $( document ).ready( function(){

  $( "#publicidade ul" ).cycle({ 
      fx: "shuffle",
   //exemplo: shuffle, zoom, curtainX, turnDown. scrollHorz
      pager: "#pub_pager"
   });
 } );

</script>

<div id="publicidade">
 <ul id='slide_lista'>
  <li id="box-1"> aqui dentro voce vai colocar o codigo da sua imagem </li>
  <li id="box-2"> aqui dentro voce vai colocar o codigo da sua imagem </li>
  <li id="box-3"> aqui dentro voce vai colocar o codigo da sua imagem </li>

 </ul>
 <div id="pub_pager"></div>
</div>



Notem que destaquei onde vocês devem colar o código da sua imagem ou link para que apareça no slider. Caso seja necessário mais de 3 sliders, deve-se adicionar linhas iguais as que estão no código e seguir a sequencia numérica que ele apresenta. "<li id="box-4.>".

Espero que ajude! qualquer dúvida podem deixar nos comentarios. ;)

Alterando porta do WAMP para 81

Hoje precisei rodar o WAMP no computador da empresa porém ele já estava com o ISS instalado e ocupando a porta 80. Então a saída foi alterar a porta do WAMP para 81 ou qualquer outra porta que esteja vaga. Preparei um tutorialzinho para quem precisar fazer esta modificação também.





Abra o arquivo  httpd.conf do Apache. Geralmente se encontra em:
 C:\wamp\bin\apache\apache2.2.8\conf\httpd.conf
Procure o trecho "Listen 80" e altere para "Listen 81".
Salve e feche o arquivo.

Abra o arquivo wampmanager.tpl.  Geralmente se encontra em:
 C:\wamp\wampmanager.tpl
Procure por "http://localhost/" e altere para "http://localhost:81/" (São três no total).
Procure por "${w_testPort80}" e altera para "${w_testPort81}".
Salve e feche o arquivo.

Abra o arquivo testPort.php. Geralmente se encontra em:
C:\wamp\scripts\testPort.php
Procure por  "80" e altera para "81" (São três no total).
Salve e feche o arquivo.

Abra o arquivo english.lang. Geralmente se encontra em:
 C:\wamp\lang\english.lang
Procure por “$w_testPort80 = ‘Test Port 80";” e altera para “$w_testPort81 = "Test Port 81";.
Salve e feche o arquivo.
Abra o arquivo testPortForInstall.php. Geralmente em:

C:\wamp\scripts\testPortForInstall.php
Procure por “80” e altera para “81”.
Salve e feche o arquivo.

Reinicie o seu WampServer e teste.


Enviar formulário php sem refresh com JQuery

E aí pessoal! Estou bastante sumido, vários meses sem postar no blog, porém estou com várias novas ideias para o blog e em breve vocês vão acompanhar essas mudanças! (para melhor haha). Mas vamos ao que interessa! Andei procurando formas de enviar um formulário comum em HTML para o php sem sair da pagina e a forma mais fácil que encontrei foi usando a nossa querida biblioteca JQuery que vem facilitando a vida de todos os web designers! Bom então vamos ao tutorialsinho haha.





Vamos adicionar este código abaixo da tag <head>. Ela irá chamar a JQuery.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  jQuery(document).ready(function(){  
  jQuery('#nosso_form').submit(function(){  
   var dados = jQuery( this ).serialize();  
   jQuery.ajax({  
   type: "POST",  
   url: "processa.php",  
   data: dados,  
   success: function( data )  
   {  
    alert( data ); //Aqui irá dar um alerta conforme o retorno do php  
   }  
   });  
    return false;  
  });  
  });  
  </script>  


 Notem que destaquei dois trechos do código. Onde está "nosso_form" vamos substituir pelo ID da nossa form. Onde está "processa.php" vamos colocar o arquivo php que receberá as informações do form.
E o nosso formulário ficara assim:

 <form method="post" action="" id="nosso_form">  
           <label><input type="hidden" name="id" value="" /></label>  
           <label>Nome: <input type="text" name="nome" value="" /></label>  
           <label>Email: <input type="text" name="email" value="" /></label>  
           <label>Telefone: <input type="text" name="telefone" value="" /></label>  
           <label><input type="submit" name="enviar" value="Enviar" /></label>  
      </form>  

Espero que seja util para todos! qualquer dúvida podem perguntar que eu tentaria ajudar!

Backup Original GPS Mio Moov m400 + Atualização

E ai pessoal? beleza? Então, trago hoje o backup do GPS Mio Moov m400 que é o GPS que eu possuo. Venho a algum tempo sofrendo com ele por estar desatualizado demais, comprei ele em 2010 e desde então não atualizei mais por falta de suporte do fabricante e aparente descontinuação do navegador dele. Pois bem, para quem já fuçou e brincou com seu m400, trago aqui o backup original dos arquivos do aparelho. Fiz este backup pois instalei o navegador IGO 8.3 que também vou ensinar aqui para como instalar no m400 e se não me engano serve para o m300 da MIO também. 

Aqui você pode baixar o backup original do GPS m400: Cliquei Aqui
Então vamos logo para o tutorial!

Instalando o navegador IGO 8.3

 1º Passo
Faça o download do navegador IGO 8.3 Aqui . Em seguida descompacte o arquivo, nele contém duas pastas e um arquivo. 

2º Passo
Agora com seu GPS conectado no computador, abra a unidade de disco dele, você vai localizar a pasta "Navigation" e deletar ela. Logo pós deletar esta pasta, entre na pasta "program files" e delete a pasta "alerta" pois esta pasta pode entrar em conflito com o navegador novo e é melhor removermos.

3º Passo
Ok, ja estamo quase no final. Agora você vai pegar as pastas e o arquivo que voce descompactou, e jogar para dentro do GPS.

4º Passo
Note que ficaram duas pastas novas dentro do GPS, a "IGO8.3" e a pasta "Backup". Vamos renomear a pasta "IGO8.3" para "Navigation". Não esqueça de colocar a primeira letra maiúscula, como está aqui.

5º Passo
Ultimo passo, voce vai entrar na pasta "Navigtion" que você acabou de renomear, e vai encontrar um arquivo executavel chamado "IGO8.3" e vai renomear também para "Navigation".
Porque fizemos isto? Porque o sistema da mio não permite você configurar o caminho e o nome do arquivo de navegador que quer utilizar, igual os outros GPS que temos no mercado, então, devemos manter o padrão original.

Pronto, seu GPS já esta pronto para utilizar. Para configurar o Satélite nele, entre no navegador e vá em opções, cliquei na flecha da direita e entre no botão 'GPS'. desmarque a caixinha de seleção do GPS ativado. e clique no botão "detectar gps". Pronto. Ele vai configurar o satélite sozinho.


Espero ter ajudado pessoal! qualquer duvida, crítica e elogios postem ai nos comentários. Elogios são sempre bem vindos ;) hehe


Como arrumar erro do windows 7


Três dias após liberar uma atualização de Windows 7 que travou computadores de usuários brasileiros, a Microsoft publicou na sexta-feira instruções de como desinstalar o pacote e resolver o problema. A falha impede os computadores de voltarem a operar com a reinicialização realizada depois do processo.
Segundo a empresa, o erro ocorre quando a atualização de segurança 2823324, criada para r
esolver uma brecha do sistema, é "colocada lado a lado com certos softwares de terceiros", sem especificar quais seriam esses programas.
Na nota publicada em seu blog, a Microsoft ainda afirma que o problema não causa perda de dados nem afeta todos os computadores que operam com o Windows 7. Mas usuários relataram em redes sociais ter perdido dados ao tentar corrigir o problema operacional.
Segundo usuários, após a instalação do pacote que foi liberado na terça-feira passada, as máquinas deixaram de iniciar. A animação com o logotipo do Windows chega a ser exibida, mas volta à etapa zero logo em seguida, e o sistema nunca é acessado.
Bom pessoal, la na empresa onde trabalho aconteceu muito isso, e seguindo os passos abaixo garanto que funciona pois testamos nos nossos micros lá e deu certo! Espero que funcione com vocês.


Diferentes soluções
Veja como a Microsoft recomenda que o problema seja resolvido

SITUAÇÃO 1
A atualização já foi instalada, mas o computador não foi reiniciado

Opção 1
Desinstalar manualmente a atualização
No Painel de Controle, abra "Programas" e depois "Atualizações instaladas de modo de exibição"
Selecione "Atualização de Segurança para Microsoft Windows (KB2823324)" e clique "Desinstalar".

Opção 2
Incorporar uma linha de comando de desinstalação num script personalizado
Se vários computadores foram afetados e você quiser rodar um script remotamente para remover a atualização, pode usar o seguinte comando para fazê-lo: wusa.exe /uninstall /kb:2823324 /quiet /norestart

Opção 3
Rodar um script de remoção remotamente usando PSEXEC
Se vários computadores foram afetados e você quiser rodar um script remotamente para remover a atualização, pode usar o seguinte comando para fazê-lo: Psexec -d -s \remotemachine wusa.exe /uninstall /kb:2823324 /quiet /norestart

SITUAÇÃO 2
A atualização já foi instalada no seu computador e está impedindo que o Windows seja iniciado normalmente

Opção 1
Recuperar o último ponto de restauração
Pressione a tecla F8 repetidas vezes durante a inicialização
Selecione "Reparar seu computador"
Escolha o idioma e faça login (se não souber a senha, precisará iniciar o sistema através de um DVD do Windows ou de um disco de inicialização USB).
Escolha "Restauração de Sistema" no menu.
Restaurar o último ponto de restauração. Isso desinstala a atualização de segurança.
Reinicie o computador normalmente

Opção 2
Recuperar o último ponto de restauração
Pressione a tecla F8 na inicialização
Selecione "Reparar seu computador"
Escolha o idioma e faça login. (Se não souber a senha, precisará iniciar o sistema através de um DVD do Windows ou de um disco de inicialização USB)
Selecione "Prompt de Comando" no menu
Na janela do Prompt de Comando, rode o seguinte comando: dism /image:C: /cleanup-image /revertpendingactions
Reinicie o computador normalmente para finalizar o procedimento

Opção 3
Desinstalar a atualização de segurança 2823324 pela linha de comando
Pressione a tecla F8 durante a inicialização do computador
Selecione "Reparar seu computador"
Escolha o idioma e, em seguida, faça o login. (Se não souber a senha, será preciso iniciar o sistema através de um DVD do Windows ou de um disco de inicialização USB) e, em seguida, acesse as opções de recuperação do sistema
Selecione "Prompt de Comando" no menu
Na janela do Prompt de Comando, rode o seguinte comando: dism /image:C: /get-packages
Procure nos resultados que serão apresentados a linha referente à atualização 2823324.
Copie o nome do pacote e cole como é mostrado abaixo: dism /image:C: /remove-package /PackageName:Package-for-KB282332431bf3856ad364e35x86~~6.1.1.1
Você vai receber uma mensagem avisando que a desinstalação foi bem-sucedida
Reinicie o computador normalmente

Assinatura Personalizada Blogger - Tutorial

Hoje pessoal, venho aqui trazer um tutorial que algumas pessoas tinham me pedido a algum tempo! Como colocar assinaturas personalizadas no blogger. Este tipo de assinatura é muito boa pois ela reconhece qual o Usuario que fez a postagem e coloca sua devida assinatura, isso é bem interessante para blogs que tem mais de um colunista por exemplo. Bom vamos lá.

Vá em Modelo > Editar HTML. Marque a opção "



 Logo após essa linha, cole o codigo das assinaturas abaixo.


<b:if cond='data:post.author == &quot;Primeiro Colunista&quot;'>
<img src='http://2.bp.blogspot.com/-T7xZwX4fM/s1600/assinatura1.png' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;Segundo Colunista&quot;'>
<img src='http://1.bp.blogspot.com/-5E24o1Mks1600/assinatura2.png' style='border:0px;'/>
</b:if> 


Reparem que Destaquei as partes importantes do código onde em vermelho você deve preencher com o nome de usuario da pessoa que posta no seu blog ou seu proprio usuario! Sabe quando você posta e aparece na postagem Postado por Fulano? É aquele nome ali mesmo! E em azul deve conter o endereço da imagem de assinatura que você escolheu! Aqui embaixo vou deixar alguns sites de hospedagem de imagems gratuitos. Espero que gostem pessoal.
  • http://imageshack.us/
  • http://postimage.org/
  • http://tinypic.com/

Porta Chaves de Lego

Bom pessoal, primeiramente queria me desculpar por tão poucas postagems, mas sabem como é final de ano. correria, e um tempinho para descansar. Mas vamos lá, Andando pela internet minha namorada (blog vicio-de-leitura) achou uma pagina no facebook com várias dicas de reciclagem e etc, pois então, achei esse porta chaves de lego muito legal! Dêem só uma olhada.


Para fazer Você vai precisar de:
  • Peças de lego, do tamanho que quiser e um "chão" de lego.
  • Alguns pedaços de cordão, não muito fino.
  • Arcos  para chaveiro.
  • 2 parafusos e 2 buchas.
Vamos precisar também de uma furadeira, uma régua, uma tesoura e uma caneta para marcar.

Primeiro marcamos o furo para passar o cordão, no minimo 7mm da base para a peça poder encaixar perfeitamente. a broca usada é de 3mm mas pode ser feito com um clips esquentado no fogo. 

Cortamos o cordão com mais ou menos 15cm e fazemos como na foto abaixo:

Passamos o cordão por dentro do buraco da peça e arrematamos com um nó.

Repetimos o processo em todas as peças.

Para fixar a base, podemos usar uma broca de 4mm ou também usar a tecnica que citei acima, esquentar um clips e furar a peça com cuidado ate chegar a medida do parafuso.





Após ter feito os furos na base devemos posicionar a peça na parede onde deseja fixar e marcar com uma caneta ou com a propria broca e furar exatamente onde foi marcado. Após ter feito isso, fixar as buchas na parede. (em casas de madeira nao é necessario buchas)


E assim está pronto o nosso Chaveiro de Lego! basta usar a criatividade ao encaixar as peças, digo chaves! :)

Gostaram pessoal? se sim posso traser mais tutoriais assim! Esse tutorial foi traduzido do espanhol do blog http://readapta2.blogspot.com.es

Onde hospedar arquivos Javascript para seu blog

Bom pessoal, hoje trago a solução para todos que assim como eu, precisam hospedar arquivos Javascript para o blog. Geralmente funções como Slides e aplicativos requerem javascript e como todos sabem o blogger nao permite hospedar arquivos de terceiros.
uma boa saida é o site http://yourjavascript.com/ onde você pode hospedar os arquivos javascript e ele lhe fornece um link para poder usar. o codigo fica assim:

<script src='http://yourjavascript.com/21022015110/jquery.js' type='text/javascript'></script>

Ai é só colocar no seu layout e pronto! qualquer dúvida deixem um comentário que eu terei o maior prazer em ajudar.

Colocando botão curtir no blog

Bom pessoal, hoje vou ensinar como colocar aquela caixinha com o botão curtir do face no blog, além da convencial também vou ensinar a colocar o outro modelo que aparece as miniaturas das fotos das pessoas.
Bom então vamos lá:

abaixo segue o código, onde a parte em vermelho é onde voce deve alterar e substituir com a pagina do seu blog no facebook! (lembrando que somente funciona quem tem pagina no facebook, se não tem ainda, bora lá criar!)

Botão normal:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/odiariodeumprogramador&amp;width=280&amp;height=80&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:80px;" allowtransparency="true"></iframe>
Deverá ficar assim


Botão com miniaturas:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/odiariodeumprogramador&amp;width=292&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:180px;" allowtransparency="true"></iframe>
Deverá ficar assim

Bem pessoal, era só isso que tinha para hoje! espero que gostem do tutorial simples, mas que faz uma boa diferença na hora de divulgar seu blog na rede! qualquer dúvida estarei a disposição para ajudar! até a proxima ;)


Tutorial: Posts Relacionados

Muitas pessoas desconhecem desse recurso que pode ser instalado no seu blog ou site. serve para wordpress também! Ele lista no final de cada post uma coluna com miniatura e titulo de outras postagems que o usuário "poderá gostar". É bem util pois a pessoa esta navegando pelo sei site/blog e ao final de uma matéria se depara com outra que acha interessante e resolve ler também e assim vai, muitas vezes fazendo a pessoa ficar horas lendo e interagindo no seu site (eu faço isso hehe). Bem então vamos lá:


Assinatura personalizada para blogger

Hoje vou ensinar como adicionar uma assinatura personalizada ao seu blog! esse tipo de codigo pode ser usado para blogs que tem mais de um autor, ou seja, cada autor terá sua assinatura personalizada! Então vamos lá.

Vá em “Design » Editar HTML” , clique em “expandir modelos de widgets” e localize a linha:

<div class='post-footer'>
Dependendo de seu modelo de template, a linha acima pode estar da seguinte maneira:

<p class='post-footer'>
 Você deverá colar o seguinte codigo, abaixo da linha identificada anteriormente:

<b:if cond='data:post.author == &quot;AUTOR1&quot;'>
<img src='ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR1' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;AUTOR2&quot;'>
<img src='ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR2' style='border:0px;'/>
</b:if>
Se você tiver número maior que 2 autores, você pode repetir o bloco de código, para cada autor que quiser adicionar. Reparem que separei o código referente a cada autor, em cores diferentes para facilitar.
Você pode criar uma imagem de assinatura no seguinte site: MyLiveSignature .
Espero que tenham gostado do tutorial! pretendo criar outros tutoriais ensinando mais coisas sobre html/xml para blogs.


 

MSN 2009 de volta?

Bom galera, creio que muitos assim como eu ainda preferem o msn 2009 do que o 2011 por ser mais simples, mais leve e por permitir personalizar o nome com o plus... para a felicidade de todos esses lhes mostro o Messenger Reviver um programa que faz 'ativar' de volta o msn 2009 tirando aquela mensagem que impede de entrar. vou explicar como funciona.
Assim que instalar o msn 2009 (caso não esteja com essa versão) apos isso, é só instalar o Messenger Reviver que o msn entra normalmente sem exibir a mensagem pedindo para atualizar! foi testado e funciona corretamente.
Link para download: Clique aqui para baixar

Porém, ele deixa o msn em inglês, nao é nada incomodo, mas como eu não conhecia esse programa então eu dei meu "jeitinho" para poder usar o msn 2009, então abri o arquivo .exe do msn e fiz a mesma modificação que este programa faz, porém no msn em português, vou deixar o link abaixo para vocês baixarem. asim que fizer o download do arquivo vá até a pasta: C:\Arquivos de programas\Windows Live\Messenger e substitua o msnmsgr.exe por este novo que você baixou! prontinho! agora só usar o msn normalmente!
Link para download do arquivoCliquei aqui para baixar

Pessoal se gostaram desse tutorial/matéria por favor avisem nos comentários ;)