Adicionar uma Caixa de pesquisa em seu blogger

Nesse tutorial vou mostrar como adicionar no seu blogger uma caixa de busca modelo 3D, ter uma caixa de pesquisa no blog é uma peça fundamental para que os visitantes do seu blog possam pesquisar seus artigos, e encontrar com mais facilidade algo interessante.

A instalação é bem simples tudo que você precisa fazer é adicionar o código que vou disponibilizar dentro de uma gadget javascript e arrastar para o local que quer visualizar sua caixa de busca 3d no blog .


PASSE O MOUSSE:

<style type="text/css"> .form-wrapper { width: 270px; padding: 8px; margin: 10px auto; overflow: hidden; border-width: 1px; border-style: solid; border-color: #dedede #bababa #aaa #bababa; -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #f6f6f6; background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8)); background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8); background-image: linear-gradient(top, #f6f6f6, #eae8e8); } .form-wrapper #search { width: 180px; height: 20px; padding: 10px 5px; float: left; font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 1px solid #ccc; -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .form-wrapper #search:focus { outline: 0; border-color: #aaa; -moz-box-shadow: 0 1px 1px #bbb inset; -webkit-box-shadow: 0 1px 1px #bbb inset; box-shadow: 0 1px 1px #bbb inset; } .form-wrapper #search::-webkit-input-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-moz-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-ms-input-placeholder { color: #999; font-weight: normal; } .thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;} .form-wrapper #submit { float: right; border: 1px solid #00748f; height: 42px; width: 70px; padding: 0; cursor: pointer; font: bold 15px Arial, Helvetica; color: #fafafa; text-transform: uppercase; background-color: #0483a0; background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0)); background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0); background-image: -moz-linear-gradient(top, #31b2c3, #0483a0); background-image: -ms-linear-gradient(top, #31b2c3, #0483a0); background-image: -o-linear-gradient(top, #31b2c3, #0483a0); background-image: linear-gradient(top, #31b2c3, #0483a0); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0, 0 ,0, .3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; } .form-wrapper #submit:hover, .form-wrapper #submit:focus { background-color: #31b2c3; background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3)); background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3); background-image: -moz-linear-gradient(top, #0483a0, #31b2c3); background-image: -ms-linear-gradient(top, #0483a0, #31b2c3); background-image: -o-linear-gradient(top, #0483a0, #31b2c3); background-image: linear-gradient(top, #0483a0, #31b2c3); } .form-wrapper #submit:active { outline: 0; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; } .form-wrapper #submit::-moz-focus-inner { border: 0; } </style> <form class="form-wrapper" action="/search" method="get"> <input id="search" name="q" type="text" placeholder="pesquisa" /> <input id="submit" type="submit" value="Search" /> </form>

Continue Reading→

Inserir player de áudio em HTML no Blogger

Agora a moda virtual é o HTML 5, a nova versão do HTML. Atualmente existem templates, players de áudio, players de vídeo e muito mais outros. Hoje iremos aprender como colocar um player de áudio, tipo aqueles que você vê na Wikipédia.

 

 

 

Ele é simples, leve(pois não utiliza nenhum script para seu funcionamento) e mais confiável, né?

 

Bom, se você se lembrou dele e gosta dele(eu gosto, pois não necessito esperar tanto para carregar), vamos colocá-lo em seu blog.

 

1. Primeiramente, escolha o lugar onde o player vai ficar, como por exemplo: sidebar ou postagem(os mais recomendados).

 

Se for sidebar, você terá que ir em Layout > Adicionar um gadget > HTML/JavaScript.

 

Caso queira adicionar em sua postagem, você deverá ir em Nova postagem.

2. Assim que achado o local onde será adicionado o player, copie e cole o código abaixo onde quiser.

 

<audio controls="controls"><source src="ENDEREÇO DO AÚDIO EM OGG" type="audio/ogg" /><source src="ENDEREÇO DO AÚDIO EM OGG" type="audio/mpeg" />Infelizmente, seu navegador não suporta o elemento de áudio.</Audio>

Lembre-se de substituir as partes em azul, pela a url do arquivo em áudio no formato OGG, ou veja a lista abaixo com os navegadores e os tipos de áudio ele suporta:

Formatos: mp3 ogg wav Chrome: sim sim sim Firefox: não sim sim IE 9: sim não não Opera: não sim sim Safari: sim não sim


Veja Tambem:

• Formulários HTML e entrada (Exemplos )
• formulário de contato para seu website com proteção anti-spam
• Gallery de Imagens com JQuery Zoom/Hover

3. Os arquivos em áudio deverão ser hospedados em algum site de hospedamento, como o Webs.com.

Lembrando se você não tiver seus arquivos em OGG, você pode os converte-los para esse formato ou para o formato que o seu navegador suporta e os navegadores dos leitores.

Existem vários conversores, eu recomendo o Switch Sound File Converter.

Continue Reading→

Como mudar o nome no Facebook

O Facebook que é sem dúvida a maior rede social do mundo e muito (muito) usada no Brasil é muito vidrado quando o assunto é a privacidade do usuário.

O Facebook leva isso muito a sério tanto que não permite usar nomes falsos, apelidos no lugar do nome, qualquer coisa do tipo como uma profissão ou religioso por exemplo.

Quando você cria um Facebook e lhe da um nome, depois você possui um “limite” de vezes que você pode alterar o seu nome, e mesmo assim não é possível alterar completamente e sim alterar uma ou duas letras, isso é para em caso você tenha errado o seu nome e quer arrumar.




Mudar nome no Facebook

1º Passo:
Entre no seu Facebook e clique no ícone de uma engrenagem no canto superior direito e depois em “Configurações da conta“:

2º Passo:
Agora em “Nome” clique no link “Editar” do lado direito:

3º Passo:
Digite o seu nome nos primeiros espaços. Em nome alternativo você pode colocar o seu apelido que vai aparecer assim “Seu nome (Apelido)” é algo opcional se não quiser basta desmarcar essa opção. E por fim digite seu senha e clique “Salvar alterações“:

Salvar alterações e Feito.

Continue Reading→