Tooltip: Mensagem ao passar o mouse

Olá! :3 Tudo bem com vocês? Desculpem se não respondi os últimos comentários, é que estou gripada, e convenhamos que digitar enquanto você espirra a cada cinco minutos não é muito legal.  Tenho boas notícias, minha internet agora está normal e vou poder fazer um layout free e um sorteio mais pra frente! Mas talvez meu tempo diminua semana que vem, já que vou começar as aulas na auto-escola \o/ -Tô tão feliz, vou poder dirigir *u* 

O tutorial de hoje foi pedido pelo ask (quase todos que eu posto são), e é de como fazer aquela mensagem colorida que aparece quando passa o mouse em um link ou imagem.

Exemplo: Passe o mouse aqui

O nome disso é tooltip e não é difícil usá-lo. Vamos começar? 

Como personalizar os comentários - Novo

Olá cerejitas e cerejitos! Tudo bem com vocês? Eu queria estar me dedicando mais ao blog, mas as condições da minha internet não me permitem. Sério, é mais lenta que uma tartaruga com reumatismo. Enquanto esse problema não for solucionado não poderei participar muito do grupo nem fazer layouts free. Mas assim que tudo voltar ao normal irei fazer aquele sorteio de um layout que prometi no outro post.

Agora chega de enrolar né? Sei que vocês estão doidos por esse tutorial, que é pedido a muito tempo, mas por ser um código trabalhoso, só agora tirei um tempo para editá-lo para que fique o mais fácil possível de entender. Eu já tinha feito um tutorial de como personalizar os comentários, mas ele serve apenas para os comentários que não têm a opção de resposta. Agora o tutorial está atualizado!

Caixa de link-me personalizada

A-Yo! (cansei de dizer hello) . Como vocês estão cherries? Aproveitando bem o feriado ou só babando pelos ovos de páscoa que estão em cima da geladeira e que você não pode abrir antes do domingo? >.<
Aqui em casa não temos essa tradição, então estou bem feliz e cheia de espinhas com meus chocolates.

O tutorial de hoje é bem simples, mas quando se quer fazer um layout perfeito, qualquer detalhe faz a diferença não é? Irei ensinar como personalizar aquela caixa de código bem pequena que usamos para por o código do banner de link-me. O nome "formal" dela é text area, e personalizá-la é bem simples. Veja como fica:

Forma nas imagens dos comentários (máscara)

Olá pessoas, tudo bom?

Estou muito feliz, andei testando uns efeitos no meu blog de testes e finalmente esse deu certo! Créditos ao W3 por ter me ensinado, quem souber inglês e quiser ampliar essa área de máscara nas imagens e caixas é só clicar no link, já que hoje eu apenas vou ensinar como por isso na caixa de comentários como na minha:



Mas dá para por em tudo, inclusive em gifs! Legal né? São imagens, você faz sua imagem em PNG com o fundo transparente e o corpo preto, epois hospeda e coloca no html, super fácil, vamos aprender?

Antes, mil desculpas por não editar nada, logo eu edito tudo! Estou sem internet, então estou postando do serviço, nem pude fazer a ilustração direito, mas assim que eu chegar em casa, dou um jeito de trocar, ok? Peço desculpas a vocês e a Lia.

Comentarios, Autor e marcadores abaixo do título do post

Oi gente linda! Aqui é a Liah -como vocês podem ver pela imagem acima-

Primeiramente, quero dizer que estou muito feliz por estarem gostando das meninas da equipe. Recebemos algumas críticas maldosas e anônimas, mas isso é coisa de gente invejosa e esse tipo de pessoa a gente ignora.

Aos poucos estou fazendo os tutoriais da minha lista de pedidos (aqui um print pra quem não acredita na existência dela), e este é um dos que estão lá há um bom tempo, mas que ainda é muito útil e procurado.  Vocês irão aprender a colocar os links "x Comentários", "Postado por" e "Marcadores", abaixo do título dos posts. Eles geralmente ficam no final do post, mas é possível movê-los de lugar modificando alguns códigos do seu blog.  O resultado será esse:

Print do Kawaii World

Vamos começar?

Menu para marcadores

Kit Kat *OO*

Olá! Tudo bem com vocês? Estou muito feliz que tenham gostado das mudanças no blog e que tenha tanta gente interessada em fazer parte da equipe do CB ^^. Aguardem o resultado na segunda feira.

Indo para o assunto do post, hoje vou ensinar como fazer um menu bem bonitinho para organizar seus marcadores/tags. Ele é bem parecido com o que eu usava no antigo layout:

Efeito sépia nas imagens do blog

Hello cherries! Como estão? Eu estou com saudades do blog. Tenho postado pouco porque acabei tendo que trabalhar nestas férias. No fim das contas não pude fazer muita coisa que pretendia fazer, mas estou dando o meu melhor para manter o blog atualizado.

O tutorial de hoje vêm sendo pedido desde que eu mudei o layout. Sei que todos vocês estão loucos de curiosidade para saber como eu fiz esse efeito de mudança de cor ao passar o mouse nas imagens do blog. Então mate sua curiosidade clicando em "Continue lendo".

Efeito 4 slidings para imagens

Este tutorial foi um pedido do David, que viu o efeito em tumblr e me pediu para explicar como se usava no blogger. O código original é do Cantinho HTML, e eu modifiquei algumas coisas e hospedei os scripts na minha conta para não haver problemas depois.
Você pode visualizar o efeito clicando aqui. Legal não é? Então vamos aprender a fazer!

Personalizar o link leia mais

Olá! Resolvi trazer um tutorial depois de tanto tempo sem postar um. Eu já mostrei aqui como colocar uma imagem no lugar do link leia mais, mas existe outra forma de personalizar esse link tão importante em nossos blogs. Com este tutorial, você poderá mudar a cor, fonte, e até colocar uma imagem de fundo. Confira!

Personalizar cada gadget da sidebar

Hoje mais um tutorial da minha super lista de pedidos - que eu nunca consigo zerar. Vou ensinar para vocês como personalizar cada gadget da sidebar, deixando o fundo e até mesmo os títulos diferentes. Um exemplo disso você pode ver no Candy LLand e no Bad Reputation:


Viram como o fundo está de cor diferente? Então vamos ao tutorial.

Nivo slider

Podem comemorar, porque hoje eu vou ensinar como colocar esse slide divo que eu uso no seu blog. O nome dele é Nivo e vários sites profissionais usam ele. O que eu acho mais legal no Nivo é os diferentes efeitos de transição que ele tem (15 no total). Mas chega de enrolar, vamos ao tão esperado tutorial.

Billy Music PLayer

Música no blog é sempre legal para mostrar um pouco do seu gosto musical para os leitores. Hoje eu vou ensinar como colocar um player super leve, prático e lindo!

Gadget "Stats do blog"

Neste tutorial eu vou ensinar a colocar na sidebar o gadget "Stats" que mostra o número de visitas do blog, quantos comentários já foram feitos e quantas postagens já foram publicadas.

O tutorial original de 2012 tinha um resultado parecido com esse da imagem abaixo: 

Porém o site utilizado para gerar a quantidade de visitantes online não existe mais, e eu não consegui encontrar outro site que gerasse a mesma informação em formato de texto simples, apenas contadores com botões em imagem. Então, para o tutorial atualizado eu incluí uma sessão para mostrar todas as visitas do blog, e em baixo o contador de usuários online, o que nos dá um resultado como esse abaixo:

 O código também foi melhorado para otimizar melhor as imagens e linhas, vamos lá!

Paginação numerada - Nova -

Há muito tempo atrás (rs) eu postei aqui no blog um tutorial de paginação numerada, só que ele não funciona muito bem em alguns blogs, então resolvi postar um novo tutorial com o código que estou usando atualmente aqui no CB, como vocês podem ver na imagem abaixo:

Para colocar no seu blog uma paginação assim, é só seguir estes simples passos:

Como por gadgets no cabeçalho do blog

Enfim o tutorial tão pedido por vocês! Sei que muitos de vocês estavam querendo saber como eu coloquei esse slide no cabeçalho. Hoje eu vou apenas explicar como por qualquer coisa no cabeçalho, depois eu vou postar sobre o slide que eu uso aqui, mas por hora vocês podem usar esse slide. Ou qualquer outro que acharem. Esse tutorial pode parecer um pouco complicado para inciantes, então recomendo que você faça isso apenas se tiver um conhecimento básico sobre CSS. Vamos começar?

Títulos dos gadgets "em caixas"

Cherries, quantos comentários! Estou tentando responder todos mais além dos comentários do blog tem vários e-mails com pedidos de layouts, ou seja estou super atarefada. Mas até acho isso bom, é sinal de que o blog está progredindo! Só que tem um lado ruim, meu tempo fica mais curto, então posso demorar um pouquinho para postar. Então se eu ficar uns dias sem postar não pensem que eu desisti de novo tá?

Agora chega de papo e vamos para o tutorial de hoje. Ele foi pedido já faz um tempo, mas resolvi postá-lo mesmo assim. Com este post vocês irão aprender a deixar os títulos dos gadgets em cima do gadget e com o fundo retangular, como se fosse uma caixinha. Não entendeu? Então veja como fica:

Menu em imagem com efeito hover

Como foram muitos pedidos, eu tentei fazer esse tutorial o mais rápido possível para vocês. Todo mundo estava perguntando como eu fiz esse menu dos "extras" do cabeçalho, que é uma imagem, e quando passa o mouse em cima, aparece um texto. Você também pode ver a demonstração aqui neste blog e aqui abaixo:

Como colocar ribbons nas postagens

No post ensinando a fazer um layout em estilo revista, para separar cada parte do tutorial, eu coloquei subtítulos destacados com uma ribbon, como vocês podem ver abaixo:

Para fazer isso, eu usei uma class bem simples, e vou mostrar agora para vocês como fazer. Você pode usar uma ribbon como fundo ou uma outra imagem qualquer, ou até mesmo só cor.

Faça um layout em estilo revista

Olá Cherries! O post de hoje é um big tutorial, que deu um trabalhão para ser feito, mas acho que ele irá ajudar muita gente. Nele tem os passos básicos, dicas e links de tutoriais que irão lhe ajudar a criar um layout em estilo revista.
No fim do post ainda tem dicas do que postar, e alguns backgrounds e fontes perfeitos para um layout em estilo revista.
Antes de começar, é bom você já ter em mente uma ideia do jeito que vai querer seu layout, qual o estilo, cores, etc. Uma boa dica é se inspirar em sites de revistas teens e afins. Já idealizou seu layout perfeito? Então mãos a obra!

Mudar o cursor do mouse + 40 Cursores

Oi cherries! Eu já ensinei neste tutorial como mudar o cursor do mouse, mas ele só mudava o cursor em estado normal (a setinha branca). Hoje eu vou ensinar além de mudar o cursor normal, mudar também o cursor que  aparece quando se passa o mouse por cima de um link. Veja o exemplo do antes e depois: