[Desativado] SCM Player: mp3 no seu blog

O SCM é um player de áudio muito fácil de personalizar que funciona na maioria das plataformas gratuitas. Ele ocupa pouco espaço na tela e não para de tocar se o visitante muda de página dentro do mesmo site.

Efeitos em imagens usando filtros CSS

Já começo avisando que esses filtros estão em fase experimental e por enquanto só funcionam em navegadores que utilizam webkit, como Chrome, Chromium, Maxthon, Rockmelt, Flock e outros derivados.

SCM Player com SoundCloud

Já sabemos como configurar SCM Player com áudio do YouTube, agora vamos usar esse excelente widget com listas de reprodução do SoundCloud.

Player SCM com músicas do YouTube

Atualizado dia 08/01/2013.

A grande vantagem do SCM, em relação a outros players para blogs já citados aqui, é que ele não interrompe a reprodução quando você muda de página dentro do mesmo site.

Alinhar imagens com CSS

Para alinhar imagens em seu site, o ideal é criar antes as classes na folha de estilos. Isso simplifica o trabalho porque um alinhamento bem feito nunca tem apenas uma propriedade. Quando você flutua uma foto à esquerda, por exemplo, precisa também definir as margens direita e inferior para que o texto não fique grudado à imagem.

Imagem lado a lado para Gmail, Facebook e capa do Twitter

Este tutorial serve para quem quer usar um bg pattern na capa do Facebook, do Twitter ou no background do Gmail.

Hospedagem gratuita de sites

Com o fim do VilaBol e do Miarroba, conheça algumas alternativas.

Esta semana notei que dois populares serviços de hospedagem de páginas HTML estão com os dias contados. Saiba o que aconteceu com eles e descubra três opções, caso precise migrar o seu site ou hospedá-lo pela primeira vez.

16 opções para criar site de graça com template pronto

Se não gosta disso ↑, existem alternativas.

Atendendo a pedidos e indo contra alguns de meus princípios, segue uma lista, em ordem alfabética, de serviços on-line gratuitos nos quais você pode criar sozinho seu próprio site estático, sem ter conhecimento em HTML (ou qualquer outra linguagem técnica) e sem utilizar interface de blog.

Código xml para criar feed manualmente

Atualizado dia 31/05/2015.

Esta dica serve para quem tem um site que não gera feed automático. Não sou perita na linguagem xml, aprendi a usar esse código apenas para criar o feed do meu bazar, que está hospedado na Loja 2. O mesmo código pode ser usado em outros tipos de lojas virtuais gratuitas, como Mercado Shops e Elo 7.

CSS: sombras em caixas e imagens

Exemplo de regra CSS para colocar sombra em uma caixa com a propriedade box-shadow:

.sombra {box-shadow:5px 10px 15px 6px #880088 inset;}

Tipos de listas numeradas com CSS

Para aprender a fazer listas numeradas, visite primeiro o post Como criar listas numeradas. Aqui vou mostrar apenas 19 opções de numeração que temos em CSS usando a propriedade list-style-type.

Mudar cor de negrito, itálico e demais elementos

Fonte: Jonan Macedo

Este é um post para quem está começando a aprender CSS e quer saber como mudar as cores das palavras destacadas usando a folha de estilos.

Esconda o sinal de arroba para evitar spam e malware

Você já deve saber que não é legal colocar “seuemail@qualquercoisa.com” em página web porque existem programas de varredura que catam endereços nos sites para armazenar em bancos de dados mal intencionados. Eles podem vendê-los a empresas safadas que curtem mandar spam ou usar para mandar mensagens maliciosas com vírus, phishing, cavalo de troia e o escambau.

Folha de estilos em cascata (CSS)

Este é um post bem simples para blogueiros iniciantes em CSS. A folha de estilos é a parte do seu código que se refere à linguagem de estilo CSS (Cascading Style Sheets). Ela serve para mudar a aparência do HTML, que é o hipertexto elementar, o esqueleto de qualquer página web.

[Indisponível] Criar widget em flash de músicas do Grooveshark

Vou mostrar primeiro como criar um widget de um álbum inteiro que já está hospedado no Grooveshark. O mesmo procedimento pode ser adotado para qualquer lista de músicas do site. Para criar o widget em flash não é preciso estar logado nem ter cadastro no site.

Para simplificar a explicação, neste post: cantor = artista = intérprete = banda = grupo.

🍨 Tabela Candy Colors em RGB

As candy colors (cores de doce) não são tão apagadas quanto os tons pastéis nem tão chamativas quanto as cores vibrantes. Têm esse nome porque lembram guloseimas como sorvete, chiclete, suspiro, maria-mole, jujuba, amendoim colorido e tantos outros.

⏯️ HTML | Mostrar vídeo sem flash nem javascript

Atualizado dia 07/06/2015.

Com HTML 5 é possível usar a tag <video> para incorporar às páginas arquivos nos formatos mp4, webm e ogv. Assim como no caso da tag para executar áudio, é preciso ter o arquivo disponível em dois ou mais formatos diferentes para que todos os navegadores consigam exibir.

Espaço em branco sem quebra de linha

Esta é uma dica rápida para quem precisa de um espaço em branco no texto com a garantia de que não haverá quebra de linha entre o termo anterior e o posterior ao espaço. O caratere que faz isso é   (No Break Space). Seguem alguns exemplos de uso.

HTML | Player de áudio sem flash nem javascript

Atualizado dia 22.jun.2018

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!

Transição suave com CSS

Não funciona no Internet Explorer!

Este é, sem dúvida, um dos efeitos mais divertidos de CSS 3. A propriedade transition (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.