Cherry Bomb

A vida presta

noreply@blogger.com (Lia) — Sun, 06 Sep 2026 14:55:29 +0000

Oi oi! Como vocês estão? Já fazem... *checks notes* 6 meses que não apareço aqui!┌(。Д。)┐Mas não esqueci do blog, é que aconteceram muitas coisas nesse meio tempo.

No meu post de dezembro contei pra vocês das minhas inseguranças sobre ter 30+ e não ter a vida que esperam que eu tenha, e que estava recomeçando nos concursos, lembram?

Pois tenho novidades: Eu passei em um concurso! ( •̀ .̫ •́ )✧ Nesse meio tempo fui embora da minha cidade, aluguei um lugar novo pra morar, comecei no trabalho e agora já sou chefe substituta do meu setor, dá pra acreditar?

A gente realmente nunca sabe o que a vida tem preparado pra gente né? Alguns meses atrás estava aqui choramingando e agora tudo está caminhando para a vida que sempre quis. Confesso pra vocês que não foi fácil fazer essa mudança. Chorei por mais ou menos uma semana antes de pegar o avião pra cá. Por mais que eu sempre tenha tido o sonho de ir embora da minha minúscula cidade, quando surgiu a oportunidade eu fiquei com muito medo. Fiquei com medo de não dar certo, de passar por dificuldades financeiras, de não achar um lugar bom pra morar, de nunca conseguir comprar uma casa, de ficar longe dos meus pais, etc. Mas é aquele ditado né? Vai com medo mesmo. E eu vim. E que bom que eu vim!

Gosto bastante do local onde trabalho, todos me receberam muito bem e vejo que tenho oportunidades de crescer e me desenvolver profissionalmente. Minha cidade nova tem seus problemas, mas estou muito mais feliz aqui. Sempre tem algum lugar ou algum evento cultural pra ir, vejo cenários bonitos no caminho pro trabalho, e tenho acesso a muita coisa que não tinha na minha cidade. Acho que fiquei até mais bonita depois que me mudei, aqui sinto mais liberdade pra me vestir de forma mais alternativa e de acordo com a minha personalidade. Com isso já completei três metas que eu tinha traçado pra esse ano: 1) passar em um concurso; 2) comprar roupas mais bonitas; e 3) ser "mais eu".

Quis vir aqui compartilhar minha felicidade com vocês e talvez servir de motivação pra quem está se sentindo meio perdida na vida como eu estava alguns meses atrás. Ás vezes a gente só precisa se dar um pouco de tempo e gentileza. Quando eu era adolescente meu sonho não era ser concursada, mas com o tempo acabei percebendo que ter um trabalho seguro e que pague bem poderia ser o suficiente para ser feliz. Os tempos mudaram, poucas pessoas hoje conseguem conquistar o combo bom trabalho, carro, casa e família aos vinte anos (a parte da família vai ganhar um post só pra ela). Precisamos ser mais pacientes com nós mesmos, que uma hora as coisas vão dar certo, não desistam ( ´･･)ﾉ(._.`).

Até a próxima (￣3￣)╭ ♡

Fui no show do my chemical romance!

noreply@blogger.com (Lia) — Sat, 21 Feb 2026 15:15:00 +0000

No dia 05 de fevereiro de 2026 realizei um dos maiores sonhos da minha adolescência: Ver um show do My chemical romance ao vivo! Antes de falar do show vou contar um pouquinho da minha história com a banda. Aviso logo que o post vai ser longo!

Eu morava em uma cidadezinha do interior, daquelas bem pacatas mesmo, e foi um evento quando inauguraram uma lan house na cidade. Foi nessa lan house que eu conheci o my chemical romance. Eles deixavam várias músicas baixadas nos computadores pros clientes ouvirem, e no acervo tinha o ábum "The black parade". Quando eu ouvi a intro de "Dead!" minha vida mudou, sem exagero. Através da banda conheci o mundo da subcultura emo, conheci outras bandas incríveis, me apaixonei por música e até mesmo comecei a editar no photoshop.

Um dia fui na capital com o meu pai, ele me levou na loja de discos e comprei o CD The black parade. Na volta pra casa eu coloquei o CD pra tocar no carro e meu pai brigou comigo, falou que aquelas músicas eram muito pesadas e mandou eu me desfazer do CD. Eu dei o CD para um colega de sala e continuei ouvindo as músicas só no meu MP3. Quando fiz 18 anos recomprei o álbum e curei essa ferida, e o mais engraçado: um dia desses peguei meu pai ouvindo "The ghost of you" no carro dele (é uma das faixas do álbum).

Minha pequena coleção, card que eu fiz e coisinhas que ganhei na fila

Quando anunciaram o show no Brasil eu fiquei em surto completo! Por coincidência eu tinha um dinheiro sobrando e consegui comprar o ingresso no primeiro dia de vendas. Mas o show era em São Paulo e ainda faltava a passagem de avião. Quase desisti de ir ao show porque os preços de passagem estavam absurdos, já estava prestes a colocar meu ingresso a venda quando recebi a notificação do google de uma queda nos preços. Invoquei o meu lema pra fazer irresponsabilidades, "só se vive uma vez" e comprei a passagem parcelada.

Essa foi a viagem com o menor orçamento que já fiz, e estava muito preocupada com a minha situação financeira, mas quando o show começou com "The end", e eu gritei junto com o Gerard Way "when I grow up I want to be NOTHING AT ALL", senti que cada centavo gasto valeu a pena pra viver esse momento. A qualidade do som estava impecável, eu nem consigo explicar em palavras a sensação de cantar junto com banda a plenos pulmões as músicas que marcaram minha vida e me ajudaram em momentos difíceis.

A vista que meu cartão de crédito me proporciona...

Dava pra sentir que todas as milhares de pessoas ali tinham uma história pessoal com as músicas, e que todos estavam também realizando um sonho. My chemical romance é uma banda que ajudou muita gente a encontrar determinação para continuar vivendo e a ter orgulho de ser o seu verdadeiro eu. Foi muito bom ver um show de rock com uma presença tão grande de mulheres e de pessoas LGBTQIA+, fico feliz de gostar de uma banda que acolhe a comunidade.

Os shows dessa turnê foram divididos em duas partes: Na primeira eles tocam o ábum The black parade na íntegra e fazem tipo uma encenação teatral da lore da turnê. Na segunda parte eles tocam 10 músicas dos outros álbuns, que mudam a cada show, então a gente nunca sabe o que vai tocar. E gente, eu não poderia ter pedido uma setlist melhor nas músicas surpresa! Tocaram minha música favorita, "Cemetery drive", além de "Thank you for the venom" que é outra das minhas favoritas, "Heaven help us", uma b-side que eles quase não tocam (e eu amo!!), e ainda por cima SKYLINES E TURNSTILES, uma música do primeiro álbum da banda. Ouvir Skylines ao vivo mudou a química do meu cérebro, de verdade, pois foi como se eu estivesse tendo a oportunidade de voltar no tempo e viver o comecinho da carreira que eu não pude acompanhar.

colagem do meu journal com as lembranças do show (todo mundo ganhou um postcard da produção)

Foi uma noite que eu nunca vou esquecer, e que reacendeu a minha paixão por música ao vivo, espero poder ir em mais shows do MCR e de outras bandas no futuro ❤ Muito obrigada a quem leu até aqui, e desculpem pela demora em postar novamente. Eu não posso prometer muita frequência de posts, mas garanto que postarei sempre que tiver algo legal pra dizer.

Ainda é muito cedo para promessas de ano novo?

noreply@blogger.com (Lia) — Sat, 06 Dec 2025 04:17:00 +0000

Você piscou e já estamos em dezembro de novo! 2025 foi um ano ao mesmo tempo calmo e agitado pra mim. Em 2024 abri uma loja de roupas, um sonho para o qual me dediquei muito, mas que infelizmente não deu certo. Em maio desse ano tive que fechar a loja, e me encontrei meio perdida sobre o que fazer a seguir. Como já estou nos meus 30 e poucos anos, a sensação de fracasso me deixou pra baixo por um tempo, pois todos esperam que sua vida esteja resolvida com essa idade.

Depois de um tempo de reflexão, acabei decidindo estudar para concurso público, pois é a única área onde não irão questionar minha ~~falta de~~ experiência profissional ou o tempo que passei "parada". Desde então tenho estudado muito, e de certa forma estou feliz com o caminho que escolhi, só preciso me lembrar constantemente que minha vida não está nem na metade, e não preciso agir como se tivesse um cronômetro em cima da minha cabeça.

Esse ano também fiz novas amizades, perdi algumas antigas, fui ao show do Fall out boy (um sonho de adolescência), viajei com minha melhor amiga, descobri novos hobbies, li mais livros e me diverti bastante.

Como fico muito tempo em casa, se eu não tomar cuidado alguns hábitos ruins tomam conta da rotina. Ainda tem dias em que sou derrotada pelo vício e passo muito tempo rolando o tiktok ou não consigo me concentrar nos estudos. Voltar aqui pro blog também foi uma forma de criar uma "distração do bem". Se eu não consigo estudar, pelo menos estou gastando meu tempo escrevendo, lendo ou quebrando a cabeça com os códigos do layout, o que acredito que exercite mais o cérebro do que ficar nas redes sociais.

Voltar a mexer com CSS e HTML aqui no blog, reviveu um dos meus sonhos de quando eu tinha 15 anos: Ser web designer. Por motivos que não vem ao caso agora, acabei indo pra faculdade de administração e desistindo do curso que supostamente "não dava dinheiro". Ah, as voltas que a vida dá! O mercado de web developer só cresceu, e sinto que perdi uma grande oportunidade. O que nos leva ao título do post: Minhas promessas (ou metas) para o ano que vem!

Quero muito me aprofundar na área de desenvolvimento web, para ser capaz de criar um site do zero. Não sei se vou conseguir pagar ou conciliar uma faculdade com os estudos pra concurso, mas já comecei os estudos com ótimas fontes gratuitas que encontrei, afinal é melhor começar logo ao invés deixar pra começar ano que vem.

Outra meta para o ano que vem é ler ainda mais livros do que esse ano! Ler é um hábito que me acompanha desde criança, mas que deixei de lado por um tempo, agora quero voltar ainda melhor do que antes, sair um pouco da minha zona de conforto e ler mais clássicos. Além disso quero aprender a cuidar melhor de mim, em dois sentidos: priorizar os meus sentimentos sem me diminuir para satisfazer os outros; e ficar mais confortável em gastar dinheiro com coisas pra mim e que me deixem feliz (por exemplo um show ou viagem).

E vocês, já começaram a fazer planos para 2026?

Pretendo escrever mais posts assim, apesar do cherry bomb do passado ter sido um blog principalmente de tutoriais, acho que essa nova fase pede algo mais pessoal ✍️(◔◡◔) Mas também vou continuar trazendo dicas e tutoriais de vez em quando!

Que tal uma dose de nostalgia?

noreply@blogger.com (Lia) — Wed, 03 Dec 2025 02:59:00 +0000

Alô, alô, testando... Será que alguém ainda verifica a lista de leitura do blogger? Será que algum dos seguidores vai ver esse post?

Bom, mesmo que ninguém mais veja, eu precisava trazer o Cherry Bomb de volta! Por volta de maio desse ano eu fiz login aqui no blogger, e ao reler os posts e comentátios antigos fiquei cheia de vontade de repaginar o blog.

Depois de vários meses, finalmente consegui tirar um tempo para me dedicar a esse projeto. O blog estava todo abandonado desde 2016, quando eu tentei mudar o nome e a proposta para acompanhar meu antigo canal no Youtube. A ideia não deu muito certo e o blog ficou todo bagunçado, com um layout que não tinha nada a ver com ele.

Para a reforma, quis fazer um layout que deixaria a Lia de 15 anos satisfeita. Minha ideia inicial era fazer algo com rosa claro e pink, com ilustracões em pixel de cereja. Fiquei travada na hora de fazer a imagem de cabeçalho, pois não fazia ideia do que colocar até que tive uma epifania: Existe a Sakura Miku que tem cabelo rosa e usa uma cereja!!! Fui então em busca de um render no deviantart como nos velhos tempos e econtrei esse simplesmente perfeito feito por Volderyck. Tentei ao máximo trazer o estilo dos blogs dos anos 2000, e me inspirei bastante em sites do Neo Cities também.

Sei que poucas pessoas usam ou lêem blogs hoje em dia, mas eu sinto muita falta dessa época da internet, ainda mais agora com essa onda de conteúdo gerado por IA nas redes sociais. Antes tudo na internet era "D.Y.I.", criávamos nossos próprios blogs e personalizávamos nosso espaço na internet, trocando ideias sem fins lucrativos, apenas por diversão.

Vou tentar fazer novos posts de vez em quando, como um hobby nostálgico em tempos tão acelerados. Pretendo atualizar também tutoriais antigos que não funcionam mais, assim, se alguém quiser reviver seu antigo blog também, pode encontrar tutorias fáceis e que funcionam. Ali na sidebar tem um widget chamado updates, onde vou avisar quando algum post for atualizado ou quando acrescentar algo novo no blog.

Vou deixar minha lista de tarefas para o blog, para vocês saberem o que ainda precisa de atualização:

1. Atualizar página Sobre
2. Criar página de créditos
3. Atualizar página de Contato
4. Criar página de links recomendados
5. Adicionar blinkies e userbars na sidebar

Se você leu até aqui, muito obrigada! Fique a vontade para comentar, vamos conversar e matar a saudade! Se você ainda atualiza seu blog, deixe o link que irei visitar! Também aceito sugestões de novos posts, de que tutoriais atualizar primeiro, etc! Se preferir pode deixar um recadinho no chat ali na sidebar também ♡

Até a próxima!

Tooltip: Mensagem ao passar o mouse

noreply@blogger.com (Lia) — Sun, 14 Apr 2013 16:00:00 +0000

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?

1. Na edição de HTML do seu blog, aperte Ctrl+F e procure por <head>

2. Copie o código abaixo e cole abaixo de <head>:

Código

<script src='https://static.tumblr.com/z2dnemm/gSxqztfsw/jquery.style-my-tooltips.js'/>
<script>
    (function($){
        $(document).ready(function(){
            $(&quot;[title]&quot;).style_my_tooltips({ 
    tip_follows_cursor:false,
    tip_delay_time:200,
    tip_fade_speed:300,
    attribute:&quot;title&quot;
});
        });
    })(jQuery);
</script>

3. Aperte Ctrl+F novamente e procure pelo código abaixo:

Código

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'/>

3.1. Se você econtrar o código, não precisa fazer nada

3.2. Caso não encontre o código, copie ele e cole abaixo de <head> também

4. Agora procure por ]]></b:skin> e cole o código a seguir acima de ]]></b:skin>

Código

 #s-m-t-tooltip {
   max-width: 300px;
   z-index: 10;
   margin: 24px 14px 7px 12px;
   padding: 5px;
   background: #d1d1d1; /*Cor do fundo*/
   border: 1px solid #000; /*Estilo da borda*/
   border-radius: 3px; /*Borda arredondada*/
   box-shadow: 1px 1px 3px #000; /*Sombra da caixinha*/
   font-family: $(body.font), sans-serif; /*Fonte do texto*/
   font-size: 11px; /*Tamanho do texto*/
   line-height: 16px; /*Altura da linha, aumente se aumentar a fonte*/
   color: #000; /*Cor do texto*/
}

5. Altere o código nos lugares indicados para personalizar seu tooltip e salve!

Atenção: Não dá pra ver as alterações na prévia do editor, então você terá que salvar e abrir o blog para ver como ficou!

6. Para o tooltip aparecer, quando colocar um link em algo, utilize esse código:

Código

<a href="link" title="Descrição do link">Texto linkado</a>

Substitua com o seu link e o texto. Onde está escrito descrição do link, você vai por o texto que quer que apareça quando passar o mouse.

O mesmo código pode ser usado em imagens, usando a estrutura abaixo:

Código

<a href="link" title="Descrição da imagem"><img src="link-da-imagem/></a>

Espero que tenham conseguido seguir o tutorial! O código original é do site Malihu, então se por acaso o código que eu disponibilizei parar de funcionar, vocês podem baixar os arquivos e seguir as instruções que estão no site original. Quero deixar créditos também para o tumblr Etro Themes, pois foi por lá que descobri o site original.

Qualquer dúvida, podem perguntar nos comentários!

Como personalizar os comentários - Novo

noreply@blogger.com (Lia) — Fri, 05 Apr 2013 17:00:00 +0000

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!

Antes de começar, vale lembrar de duas coisas muito importantes:
1 - Faça um backup do seu modelo antes de fazer qualquer tutorial. Assim se algo der errado, você pode reverter as alterações facilmente fazendo upload do modelo sem as alterações.
2 - Quando editamos os comentários não tem como visualizar antes de salvar. Então recomendo que você edite o código primeiro no bloco de notas, depois passe para o blog e salve. Aí se algo ainda precisar de ajustes, você modifica, salva e visualiza até ficar como você quer. (É bem cansativo)

Agora sim, vamos ao tutorial! Seus comentários deverão ficar mais ou menos assim:

O modelo é bem simples, mas você pode incrementar depois usando seus conhecimentos em css ^^ O código já está com esses tons de lilás, então seu layout tiver essas cores nem vai precisar mudar muita coisa.

Para deixar os comentários assim, abra o Modelo HTML do blog, e cole o código a seguir acima de ]]></b:skin>

Código

/*****************************INICIO COMENTARIOS - CHERRYBOOMB.COM*****************************/

#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/

color: #c19bdf; /*Cor da fonte*/

font-family: Verdana; /*Fonte do texto*/

font-size: 18px; /*Tamanho da fonte*/}

#comments {

background: #fff; /*Fundo da área geral dos comentários*/

padding: 15px;

}

.comments .comment-block { margin-left: 70px; /*Espaço entre o avatar e o corpo do comentário*/}

.comment-header {

background: #c19bdf; /*Cor de fundo do nome do autor do comentário*/

border: 1px solid #9e80b6; /*Borda de onde fica o nome do autor do comentário*/

padding: 3px;}

.comment-header a {

color: #fff !important; /*Cor do nome do autor do comentário*/

font-family: Verdana; /*Fonte do nome do autor do comentário*/

font-size: 16px; /*Tamanho da fonte do nome do autor do comentário*/

font-weight: normal; /*Troque normal por bold para deixar o texto em negrito*/}

.comment-header a:hover { color: #684980 !important; /*Cor do nome do autor do comentário quando passa o mouse*/

text-decoration: none;}

.comments .comments-content .datetime a{

font-size: 10px !important; /*Tamanho da fonte da hora e data do comentário*/

float: right; /*Data alinha á direita*/

line-height: 16px; /*Altura da linha da data e hora*/}

.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/

margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor. Só mexa se souber o que está fazendo*/

position: relative;

background: #e7dceb; /*Fundo do bloco de texto do comentário*/

border: 1px solid #cdc3d0; /*Borda do bloco de texto do comentário*/

padding: 10px;

color: #4c4c4c; /*Cor da fonte do bloco de texto do comentário*/

font-size: 11px; /*Tamanho da fonte*/}

.comments .avatar-image-container {

/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/

max-width: 50px;

max-height: 50px;

min-height: 50px;

min-width: 50px;

background: #d2b6e5; /*Cor da borda do avatar*/

padding: 3px; /*Espessura da borda do avatar*/}

.comments .avatar-image-container img{

/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/

max-width: 50px;

max-height: 50px;

min-height: 50px;

min-width: 50px;}

.comments .comments-content .comment {

padding:20px 10px !important;

margin-bottom:15px !important}

.comments .comment .comment-actions a {

padding: 5px;

background: #d2b6e5; /*Fundo dos botões responder e excluir*/

border: 1px solid #b59dc6; /*Borda dos botões responder e exluir*/

color: #fff !important; /*Cor do texto dos botões responder e excluir*/

font-family: verdana; /*Fonte dos botões responder e excluir*/

font-weight: bold; /*Troque bold por normal para tirar o negrito*/

margin-right: 10px;}

.comments .comment .comment-actions a:hover {

background: #e3c6f6; /*Fundo dos botões responder e excluir quando passa o mouse*/

border: 1px solid #b59dc6; /*Borda dos botões responder e exluir quando passa o mouse*/

color: #684980 !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/

text-decoration: none;}

.comments .continue { border-top: none;}

.comments .continue a {display: none;}

/************FIM DOS COMENTARIOS CÓDIGO POR CHERRYBOOMB.COM NÃO RETIRE OS CRÉDITOS************/

Todas as instruções estão no código, não altere nada que não souber para não dar erro depois. Faça todas as alterações com muito cuidado para não apagar nada sem querer. Salve e visualize se ficou tudo ao seu gosto.

Se seus comentários não estiverem com a opção de resposta, vá em Configurações > Postagens e comentários e onde está escrito "Local do comentário" mude para incorporado e salve.

Espero que tenham gostado e que dê tudo certinho para vocês. Em um outro post trago modelos prontos para vocês.

Kissus!

Gostou deste tutorial e quer reblogar? Leia as regras primeiro!

Tutorial - Faixinhas no PS

noreply@blogger.com (Unknown) — Sat, 30 Mar 2013 20:56:00 +0000

Olá, pessoal. Não sei se notaram, mas eu sempre vou revezando as postagens dessa forma: Tutorial, material, tutorial, material. Como da outra vez eu postei paletas, dessa vez eu irei ensiná-los a fazer algo e eu escolhi uma coisa que me perguntam bastante: Faixinhas. Eu sei quem nem todo mundo usa Photoshop, mas eu ainda trarei o tutorial em outros programas, então não precisam se preocupar, eu sempre começo com esse por ser o mais complicadinho e eu gosto de me livrar logo dessas coisas.

Faixinhas são sempre úteis e existem diversos meios de fazê-las, eu vou ensinar agora a faixinha básica, que é aquela onde terminamos com duas pontinhas. Para fazer as pontas eu vou disponibilizar um shape, pois fica muito mais fácil do que criá-lo manualmente, também vou disponibilizar um style que fiz e que posso ensinar como criar mais tarde, eu quero ir adiantando logo essa parte pra vocês. Vamos para o tuto?

Materiais: Shape || Style

1. Obviamente precisaremos dos materiais, então baixe-os e é só abrir para instalar. Após fazer isso, crie um novo documento do tamanho que desejar, geralmente eu gosto de trabalhar numa área maior do que preciso.

2. Após isso, clique na ferramenta Rectangle Tool (Letra U) e crie um retângulo do tamanho que desejar para sua faixinha e na cor que quiser, o meu ficou assim:

Pra quem quiser saber, utilizei a cor #fb7d88, só para os curiosos, rs.

3. Utilizando o shape que acabou de baixar, faça a pontinha da faixinha, tente deixar da melhor forma possível e faça com as mesmas cores. Para quem não sabe, você encontra o shape na listinha de shapes personalizados (Ferramenta Custom Shape Tool, clique com o botão direito na ferramenta que usamos antes.)

4. Após isso, selecione as duas camadas - a da ponta e a do retângulo - (para fazer isso é só ir na caixinha de layers, clicar em uma e segurar control para clicar na outra).Clique com o botão direito do mouse, depois selecione a opção "Merge Layers" e as camadas que selecionou irão se unir.

5. Agora clique no style que baixou e ele será aplicado, você tem algo mais ou menos assim:

6. Agora só falta aquela haste que colocamos atrás para que dê a impressão de que a faixa está rodeando a caixinha. Para fazê-lo podemos utilizar a Polygonal Lasso Tool. Usamos ela para fazer recortes, então vocês devem conhecer. Marque três pontos para um triângulo assim:

Depois de marcar, uma seleção vai aparecer. Pinte ela todinha de uma cor mais escura que sua faixa e teremos o seu resultado:

Se não entenderam algo, é só tirar a dúvida pelo comentário e eu explico tudinho. Se for necessário, posso até fazer um video tutorial sem problemas. Boa sorte ~

Caixa de link-me personalizada

noreply@blogger.com (Lia) — Fri, 29 Mar 2013 18:00:00 +0000

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:

Para fazer a sua é bem simples. Copie o código abaixo e cole em um gadget de HTML/Javascript em seu blog:

Código

Você só precisa colocar a url do seu banner de link-me e o link do seu blog nos lugares indicados, e alterar a fonte, cor de fundo e etc. nas partes que estão em cinza. Para quem não sabe, aqui a explicação de cada código:

Font-family: O tipo de fonte da letra (Ex: Arial, Calibri, Georgia)
Font-size: tamanho da fonte
Color: Cor do texto
Border: Estilo da borda você pode mudar o tamanho, a cor e o tipo de borda.
Background: Cor de fundo da caixa
Width: Largura em pixels da sua caixinha

Espero que tenha ficado bem claro. Qualquer dúvida, não hesitem em perguntar. Pode demorar um pouco, mas eu respondo.
Por hoje é só, não esqueça de deixar seu recadinho nos comentários ♥

Gostou deste tutorial e quer reblogar? Leia as regras primeiro!

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

noreply@blogger.com (Unknown) — Thu, 28 Mar 2013 16:19:00 +0000

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.

1. HTML
No HTML não tem muito segredo, você vai colocar apenas o código abaixo substituindo pela imagem desejada. Lembrando que o tamanho é 36x36 pixels. O código abaixo você vai procurar pela tag .avatar-image-container {, copie e cole depois da chave:

Código

-webkit-mask-image: url(url aqui); -moz-mask-image: url(url aqui); -o-mask-image: url(url aqui) mask-image: url(url aqui);

Esta vendo que o código se repete? É para funcionar em todos os navegadores, então não esqueça de por a mesma imagem em todos, hein? haha

2. Imagem
A parte no Photoshop é de criação, você deve apenas abrir um novo documendo (ctrl+n) com o tamanho de 36px, feito isso, ali você colocará sua shape, brush, enfim, o que quiser que fique de base. Lembrando que: tem que ser preto com o fundo transparente. Aqui tem algumas, fiquem à vontade para utilizar:

imagem / imagem / imagem / imagem / imagem / imagem / imagem / imagem / imagem / imagem

~Chu!

Tutorial feito por mim: Too Kawaii e Cherry Bomb.

Gostou deste tutorial e quer reblogar? Leia as regras primeiro!

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

noreply@blogger.com (Lia) — Wed, 20 Mar 2013 19:00:00 +0000

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?

Este tutorial mexe com códigos bem extensos, então preste bastante atenção e faça download do modelo do seu blog antes. Assim, se algo der errado é só restaurar como estava antes.

Primeiro verifique se esses links estão visíveis no final do post. Se eles não estiverem lá, vá em layout, clique em editar no gadget correspondente ás postagens e marque a opção correspondente a cada link. Depois certifique-se de deixá-los na mesma linha assim:

Agora abra o modelo HTML do seu blog, e marque a opção "Expandir modelos de Widgets"

Aperte Ctrl+F e procure por: <div class='post-footer-line post-footer-line-1'> Irá mostrar dois resultados, o que queremos para este tutorial é o primeiro (1 de 2)

Você verá vários códigos depois deste que procurou. Selecione tudo desde <div class='post-footer-line post-footer-line-1'> até </div> e apague. Deve ficar assim:

Agora aperte Ctrl+F novamente e procure por: <div class='post-header'>
Novamente teremos dois resultados, mas o que nos interessa é o primeiro. Abaixo dessa linha que você procurou, cole o seguinte código:

Código

Visualize se está tudo certo e salve. Para personalizar os links é só colar o código a seguir acima de ]]></b:skin> :

Código

.post-header { text-align: center; /*Alinha no centro*/
font-size: 11px; /*Tamanho da fonte*/
border-bottom: 1px dashed #000; /*Borda inferior*/}
.post-header a { color: #000 !important; /*Cor dos links*/}
.post-header a:hover {color: #fff !important; /*Cor dos links ao passar o mouse*/}

Espero que todos consigam fazer :) Vou começar a responder os comentários que eu não puder retribuir aqui no blog mesmo então fique atento para ver a resposta para o seu.

Kissus da Liah!

Menu para marcadores

noreply@blogger.com (Lia) — Fri, 15 Mar 2013 13:35:00 +0000

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:

Instalá-lo é muito simples. Abra o modelo HTML do seu blog, aperte as teclas ctrl+F e cole ]]></b:skin> na caixa de pesquisa.

Acima do trecho que você procurou, cole o seguinte código:

Código

/***Menu para marcadores***/
.tag {
font-family: verdana; /*Fonte do menu*/
font-size: 10px; /*Tamanho da fonte*/
height: 16px;
background: url('URL_DA_IMAGEM') no-repeat left; /*Imagem que fica ao lado do link (16x16 px)*/
display: block;
margin-bottom: 5px; /*Espaço inferior entre cada link*/
padding-left: 18px; /*Não mude*/
transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}

.tag a {color: #fe97cd !important; /*Cor dos links*/}

.tag a:hover { color: #bb588b !important; /*Cor dos links quando passa o mouse em cima*/
font-weight: bold; /*Deixa os links em negrito quando passa o mouse, apague se não quiser este efeito*/
transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}
/***Por cherry-liah.blogspot.com - não retire os créditos***/

Edite como quiser e salve o modelo do seu blog. Agora vá na guia layout do blogger e adicione um gadget de HTML/Javascript onde quiser que o menu fique. Dentro do gadget cole o seguinte código:

<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>

Repita este código para cada tag que quiser no seu menu.

Para dividir o menu em três colunas

Se quiser o menu em três colunas como mostra a preview, ao invés de usar o código acima no gadget de HTML/Javascript, use esse:

Código

Cada bloco de código corresponde a uma coluna. É só editar com atenção que fica tudo certinho.
Como extra, aqui tem algumas imagens para serem usadas neste menu. Aproveitem!

Espero que tenham gostado! Se usarem, não esqueçam de creditar. Este tutorial foi uma sugestão de um leitor, peça seu tutorial também pelo meu ask.

Gostou deste tutorial e quer reblogar? Leia as regras primeiro!

Resenha: "A princesinha"

noreply@blogger.com (Lia) — Sat, 16 Feb 2013 19:33:00 +0000

Quanto tempo não posto aqui! Não pensem que abandonei o blog, o que aconteceu foi que fiquei sem internet durante esses dias, e vou continuar sem por pelo menos mais umas duas semanas. Só estou postando agora porque estou na casa dos meus pais e aqui tem internet ♥. Mas vou voltar pra minha outra casa amanhã, e ficarei sem postar de novo.

Hoje temos a resenha de um livro que terminei de ler recentemente. Comecei a lê-lo por sugestão da Ichigo do blog Reino de Morango na campanha de incetivo á leitura. Confiram a sinopse do livro:

A princesinha conta a história de Sara Crewe, uma menina rica que perde tudo quando lhe acontece uma terrível tragédia. Obrigada a trabalhar como empregada, a passar frio e fome, ela continua a preservar sua nobreza, e assim consegue manter seu orgulho e sua generosidade.

Autor: Frances Hodgson Burnett
Ano de lançamento: 1996
Editora: Editora 34
Gênero: Infanto Juvenil

Minha opinião: Este é um daqueles livros pelos quais você se encanta logo que começa a lê-lo. O primeiro parágrafo do livro é assim:

Num desses tristes dias de inverno, em que o nevoeiro, amarelado e espesso, invade a tal ponto as ruas de Londres, que é preciso conservar acesos os focos elétricos e as lâmpadas dos estabelecimentos como durante a noite, uma carruagem avançava lentamente através das espaçosas ruas da grande cidade, transportando uma pequenina, muito aconchegada ao pai.

Só por esse trechinho, vocês já podem ter um gostinho de como este livro é agradável de ler. Sara é uma personagem extremamente cativante, uma verdadeira princesinha, que apesar de todos os luxos com os quais é acostumada desde que nasceu, não deixa de ser uma menina doce, educada, amável, inteligente e humilde. A personalidade única e as riquezas de Sara provocam admiração nas pessoas de bom coração e inveja e desprezo nas pessoas amarguradas. Uma dessas pessoas amarguradas é Miss Minchin, a direitora do colégio interno onde Sara vai estudar. Essa diretora não gosta de Sara desde o início, e a morte do pai da princesinha é a ocasião perfeita para ela descontar todo seu ódio e fazer de Sara a criada da casa.

Mesmo vivendo em condições desumanas, trabalhando o dia todo como uma escrava, com pouca comida, dormindo em um sótão velho, frio e infestado de ratos, Sara não deixa nunca de agir como uma verdadeira princesa, graças á sua grande imaginação e ás suas amigas que não a abandonaram mesmo quando todos os outros o fizeram. Depois de ler este livro, fiquei com aquela mágica ecoando na minha mente, e com uma vontade enorme de ser como Sara. E mesmo com a minha idade (18 anos) decidi que também serei uma princesa em todas as situações e não deixarei ninguém fazer com que eu me sinta menor.

É um livro simples em seu enrendo mas muito rico de encanto e lições de vida para todas as garotas do mundo. Gostei muito da leitura e indico para todos!

Seu facebook mais fofo com o Ponyhoof

noreply@blogger.com (Lia) — Thu, 31 Jan 2013 13:52:00 +0000

Se você, assim como eu, adora personalizar tudo, inclusive suas redes sociais, vai adorar essa dica. O Ponyhoof é um aplicativo para facebook que muda totalmente a aparência do site deixando tudo no estilo My little Pony! Não precisa nem gostar do desenho, pois os temas são lindos e tem para todos os gostos. Veja algumas screenshots disponibilizadas na página do aplicativo:

Muito fofo não é? Tem vários temas, cada um com o nome de um personagem e esquemas de cores diferentes. Você pode mudar clicando em configurações > Ponyhoof Options:

E na guia background você pode colocar um plano de fundo personalizado, basta criar um com a mesma resolução da tela do seu computador. Ah, aquele som das mensagens do chat muda para um barulhinho fofo e os emoctions ficam assim:

Gostou? Para instalar no seu facebook é só acessar a página oficial do aplicativo e clicar na guia "Install Ponyhoof". Funciona no Google Chrome, Firefox, Opera e Safari.

Espero que tenham gostado da dica. Kissus!

O castelo animado

noreply@blogger.com (Lia) — Wed, 23 Jan 2013 12:00:00 +0000

Hello Cherries! Estou aqui hoje para falar desse filme e livro que eu amo tanto! Assisti o filme pela primeira vez quando tinha 13 anos e milagrosamente encontrei este filme na locadora de minha pequena cidade. Me encantei pelo filme e loquei de novo várias vezes. Um dos motivos para gostar tanto do filme, obviamente é Howl, o belo feiticeiro loiro protagonista da história.

Primeira vez que Sophie vê Howl

Sophie é a mais velha dentre suas irmãs, o que a faz crescer sem muitas expectativas na vida, já que seu destino é herdar a chapelaria do pai e dar continuidade aos negócios. Mas de Sophie passa de uma vida monótona e sem grandes alterações para um vida repleta de aventuras após conhecer Howl, um feiticeiro ~~lindo demais~~ que vive em um castelo que anda e que tem fama de devorar os corações das moças bonitas da cidade que se apaixonam por ele. Howl salva Sophie de dois soldados que a abordaram na rua, e por isso a bruxa das terras, pensando que Sophie tem algum envolvimento com Howl, lança um feitiço sobre ela, transformando-a em uma velha de 90 anos.

Sophie conversando com Calcifer

Sophie se vê sem condições de voltar a sua rotina normal e vai embora sem avisar ninguém, caminhando sem rumo. Ela acaba chegando ao castelo de Howl, que nada se parece com um castelo, tanto por fora, quanto por dentro, onde tudo está coberto de sujeira. Sem muita escolha, Sophie entra no castelo e usa a desculpa de ser a nova faxineira para permanercer lá. Além de Howl, vivem no castelo Marcoh, o aprendiz de Howl, e Calcifer, um demônio do fogo que mantém todo o castelo funcionando.

A cena mais engraçada do filme, sem dúvidas!

A convivência de Sophie com Howl envolve discussões hilárias e os dois vivem de mal um com o outro. Mas por trás de toda essa teimosia, ambos nutrem um sentimento muito especial um pelo outro. No desenrolar da história descobrimos pouco a pouco a verdade sobre o passado de Howl e conhecemos outros personagens extremamente cativantes que ficam marcados pra sempre. A história te engana o tempo todo. Você acha que o Howl é uma pessoa horrível, depois descobre que não, e o processo contrário acontece com outros personagens. É tudo mágico, lindo e encantador.

Final *_*

O filme é baseado no livro de mesmo título da escritora inglesa Diana Wynne Jones e foi adaptado para animação pelo famoso diretor japônes Hayao Miyazaki e produzido pelo famoso estúdio Ghibli. A história do livro é um tanto diferente da contada no filme, e obviamente, o livro é melhor. Mas não deixem de ver o filme também, é um dos meus favoritos, e acho que muitos irão gostar também.

Existem ainda os livros: O castelo no Ar e A casa dos muitos caminhos, que são mais ou menos uma continuação. Estou lendo o castelo no ar e quando acabar faço resenha.

É muito difícil achar o livro e o filme tanto para comprar, quanto para baixar, por isso vou deixar aqui o link para download dos dois. Se alguém achar o livro pra vender me avise por favor!
Espero que gostem tanto quanto eu <3

Atenção: O filme está em torrent! Só baixe se tiver algum programa para download de torrents.

Kissus

Postagem programada

Efeito sépia nas imagens do blog

noreply@blogger.com (Lia) — Thu, 10 Jan 2013 20:18:00 +0000

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".
É muito simples. Abra o HTML do seu blog é cole o seguinte código acima de ]]></b:skin>

img {

-webkit-filter: sepia(0%);

transition:All 0.4s ease;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

}

img:hover {

-webkit-filter: sepia(100%);

transition:All 1s ease;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;}

É só salvar e pronto! Todas as imagens irão ficar com o efeito automaticamente.

Bem mais simples do que você imaginava não é? Espero que tenha gostado. Kissus!

Gostou do tutorial e quer reblogar? Leia as regras primeiro!

Efeito 4 slidings para imagens

noreply@blogger.com (Lia) — Mon, 03 Dec 2012 17:00:00 +0000

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!

1º - Copie todo o código que está neste link, e cole-o acima de ]]></b:skin> No próprio código tem as explicações do que você deve alterar.

2º - Agora cole este código onde você quer que as imagens apareçam (em um gadget de html/javascript na sua sidebar, por exemplo). No final do código é onde você vai colocar o link e a legenda de cada imagem.

Está pronto! Até que é bem fácil não é? Se usarem, não esqueçam de creditar o Cherry Bomb.

Quer reblogar este post? Veja as regras primeiro!

Destaques do mês de novembro

noreply@blogger.com (Lia) — Fri, 30 Nov 2012 12:30:00 +0000

Chegou o último dia do mês (como passou rápido!), e com ele os blogs que mais chamaram minha atenção durante ele. Já faz um tempo que não posto os destaques do mês, peço desculpas por isso. Estou me organizando e irei cuidar mais do blog daqui pra frente, principalmente porque as férias estão chegando, viva! \o/

Vamos conhecer esses cinco blogs maravilhosos?

O Diamont Lilac News já é afiliado de longa data aqui do Cherry Bomb. A Bárbara ficou um tempo sem postar nele, mas agora ela está voltando a movimentar o blog e tem muita coisa legal lá: Textos, Dicas, Moda, Música, Make, Fotografia, Entretenimento e mais. É um blog que está sempre cheio de novidades!

A imagem está sem o cabeçalho do blog porque não carregou aqui :(

O Prince Closet é um amor de blog! A dona, Kao é pianista, cosplayer e linda, e posta no blog coisas sobre o dia dia dela, dicas, fotos lindas. Foi amor a primeira vista!

Quem gosta de tutoriais e goodies vai amar o Adolescentes do oposto. O design é lindo e os tutoriais fogem daqueles "batidos" que você vê em todo blog. Vale a pena visitar antes de reformar o blog!

Um blog descolado e cheio de estilo. Assim é o Olha como eu faço, comandado pela fofa Larissa. Lá você encontra altas dicas de moda, DIY's e um pouco da vida da blogueira. Acompanho já faz um tempo e recomendo!

Por último mas não menos importante, temos o Antes do Salto, um blog repleto de posts divertidos e úteis, tutoriais e dicas de make e moda, e tudo o mais que nós adoramos. A Livany é super dedicada ao blog e o enche de novidades sempre!

Gostaram dos indicados? Já conheciam algum? Antes de me despedir, um aviso bem legal pra vocês: Fechei parceria com a Flash make up, um loja online de maquiagem, bijuterias e outras coisinhas que amamos á preços bem camaradas em comparação com outras lojas do gênero. Se você usar o código CHERRY ao finalizar sua compra no site, receberá um brinde *_*!

Kissus!

Postagem programada

Personalizar o link leia mais

noreply@blogger.com (Lia) — Mon, 19 Nov 2012 19:35:00 +0000

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!

Antes do tutorial, queria dar alguns recados para vocês. Devem ter percebido que não tenho postado com muita frequência não é? Isso é resultado da combinação Pouco tempo + Internet lenta + livro viciante. Meu tempo já é pouco, aí a internet me faz demorar muito para postar e ás vezes perco a noção do tempo lendo um livro incrível que assim que eu terminar de ler vai ser assunto de resenha aqui.

Minha solução para não deixá-los sem post: Programar as postagens. Eu não gosto de fazer isso, mas vi que vocês estão reclamando da minha ausência, então o farei. O único problema é que responderei menos comentários ainda, mas prometo que vou ler todos e responder os que eu puder.
Agora vamos ao assunto principal:

Tutorial

Vá no modelo HTML do seu blog, e procure pelo seguinte código: ]]></b:skin>
Cole logo acima, o seguinte código:

.jump-link {
float: right; /*Escolha para ficar alinhado á direita (right) ou esquerda (left)*/
line-height: 18px; /*Altura da linha, mude de acordo com o tamanho da fonte*/
background: url('link-da-imagem-de-fundo') no-repeat;
width: 200px; /*Largura da imagem*/
height: 32px;/*Altura da imagem*/
margin-right: -20px; /*Margem direita*/
margin-bottom: 30px; /*Margem inferior*/
padding-left: 0px; /*Ajuste para posicionar o texto*/
padding-right: 0px; /*Ajuste para posicionar o texto*/}
.jump-link a {
font-family: Arial;
font-size: 14px;
font-weight: normal;}
.jump-link a:hover {
color: #000;
text-decoration: none;}

Entendendo

As partes do código que estão em negrito são importantes para alinhar a imagem que você usar no fundo. As margin right e bottom vão determinar a posição do link como um todo, puxando mais para a direita e colocando um espaço abaixo dele. Já os padding right e left vão ajudar a alinhar o texto dentro da imagem. Basta modificar os valores para ver a diferença que eles fazem, e logo você entenderá :)

Extra

Como bônus, trouxe algumas imagens para vocês usarem como fundo. Creditem tanto se usarem as imagens, como só o tutorial.

Espero que tenha sido útil para vocês, Kissus!

Padrinhos de Tóquio

noreply@blogger.com (Lia) — Tue, 23 Oct 2012 17:44:00 +0000

O post de hoje é sobre mais uma feliz coincidência da minha vida. Ontem de manhã, estava esperando meu tio ir me buscar pra voltar pra casa. Enquanto esperava, liguei a TV e fui passando os canais sem grandes pretensões, quando vejo um filme de título "Tokyo Godfathers" passando no canal Max. A palavra "Tokyo" chamou minha atenção, e fiquei mais interessada ainda ao ver que era um filme em anime e que havia acabado de começar.

É véspera de Natal. Gin, um alcoólatra; Hana, uma ex drag queen e Miyuki, uma garota de 16 anos que fugiu de casa, formam o estranho trio de sem-tetos que encontram um bebê abandonado enquanto reviram o lixo em busca de seus presentes de natal. Gin e Miyuki querem levá-la para a delegacia, mas Hana, que sempre sonhou em ser mãe, quer ficar com a criança. Diante da impossibilidade de desabrigados criarem um bebê, decidem então partir em uma busca pela mãe de Kiyoko (nome que Hana deu ao bebê).
A verdade a respeito do abandono de Kiyoko é muito mais complexa do que eles poderiam imaginar. Mas uma trama de coincidências inacreditáveis os conduzem para mais perto da solução do mistério por trás do abandono daquela garotinha que mudou suas vidas.
Padrinhos de Tóquio é um filme de Natal totalmente atípico. Seus personagens principais são mendigos e ainda por cima um é um travesti e o outro um alcoólatra que perdeu tudo o que tinha. Mas Talvez seja justamente por tratar de indivíduos que estão a margem da sociedade que ele se torna um excelente filme natalino. No decorrer da trama, descobrimos os passados de cada um dos protagonistas, além de histórias extremamente realistas de outros personagens secundários. É um filme emocionante, divertido e mágico ao seu modo. Não consegui desgrudar os olhos da tela por um segundo, e sem dúvidas é um dos melhores filmes que já vi. Recomendo para todos assistirem, seja sozinho, com a família, no natal ou não, sendo fã de animes ou não.
Espero que tenham gostado do post, nunca fiz algo parecido aqui, mas precisava muito falar desse filme!

Kissus

Personalizar cada gadget da sidebar

noreply@blogger.com (Lia) — Fri, 07 Sep 2012 14:04:00 +0000

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.

Primeiro você deve saber o nome do gadget que deseja mudar. No exemplo eu irei mudar o gadget de nome "Menu".

Abra o modelo HTML do seu blog e marque a caixinha "Expandir modelos de widgets"
Dê um clique dentro da janela com o código HTML, aperte Ctrl+F e procure pelo nome do gadget:

(Clique para ampliar)

Onde está em laranja é o nome do gadget que eu pesquisei. Onde está contornado de rosa é a Id do gadget, é desse nome que iremos precisar. Neste caso a Id do gadget é HTML1, anote ela que iremos usar no próximo passo.

Cole o código abaixo antes de ]]></b:skin>

#ID-DO-GADGET {
background: #fff; /*Cor de fundo do gadget*/
}
#ID-DO-GADGET h2 {
/*Estilos para o título do gadget*/
Font-family: Verdana;
color: #000;
font-size: 14px;
}

Você só tem que substituir a parte em negrito pela Id que pegamos no passo anterior e aplicar os estilos desejados. Eu coloquei apenas o básico do básico neste código, mas você pode adicionar todas as personalizações que quiser. Você fazer isso com vários gadgets do blog, é só pegar a ID e colar o código.

Espero que tenham gostado! Desculpem não estar respondendo muitos comentários. O tempo está curto e também estou tendo uns probleminhas na família... Mas não se preocupem, logo logo tudo vai se acertar

Kissus, Liah

Nivo slider

noreply@blogger.com (Lia) — Mon, 27 Aug 2012 13:30:00 +0000

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.

O resultado final será semelhante a este:

Imagem do site Isabela Freitas

O script

Cole esse código abaixo de </head>

<style type="text/css">
/* <![CDATA[ */
#w2bSlideContainer {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
#w2bNivoSlider { position:relative;
width:640px !important; /*largura do slide*/height:300px !important; /*Altura do slide*/
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLslxlGOSj8dRb5Duiyoz4EKxA_whtkVfPjrYcfvUFJVV0xWvcorFBB7yS65C7b23-oqmkZYHk_Dla6yreLs9dhjs8PwEBS_2A13uFjRkINyuG6DQ0zpIqaFq_AJhXj5f8ObH2ytBgAoW/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px solid #000;/*Coloque borda se quiser*/ }
#w2bNivoSlider img {position:absolute; top:0; left:0; display:none}
.nivoSlider {position:relative;width:100%;height:auto;}
.nivoSlider img {position:absolute;top:0;left:0}
.nivo-main-image {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 630px;/*Largura da legenda*/ z-index:8;}
.nivo-caption p {padding:2px;margin:0}
.nivo-caption a {display:inline!important}
.nivo-html-caption {display:none}
.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("URL_IMG_SETA") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav {left:10px}
.nivo-nextNav {background-position:-30px 0!important;right:10px}
.nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("URL_IMG_BULLETS") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect : 'random',
slices : 10,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 4000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
keyboardNav : false,
pauseOnHover : true,
captionOpacity : 0.8
});
});
/* ]]> */
</script>

Eu destaquei em negrito as partes que você irá precisar alterar para ficar mais fácil de encontrar. No fim do post tem algumas imagens de setas e das bolinhas de navegação para vocês usarem. Depois de fazer as alterações, visualize se está tudo ok e salve.

Os Slides

Agora para o slide aparecer, basta colar o código abaixo em um gadget de HTML/Javascript ou onde quiser que o slide apareça:

<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div>

Substitua o endereço das imagens, os links e a legenda e pronto! Um slide lindo estará no seu blog. Agora as imagens que eu prometi:

Setas

Bolinhas

Espero que tenham gostado. Se usarem em seus blogs, creditem. E se quiser postar esse tutorial no seu blog, peça permissão primeiro.

Kissus, Liah

Billy Music PLayer

noreply@blogger.com (Lia) — Fri, 24 Aug 2012 17:00:00 +0000

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!

O player é esse:

Para colocá-lo no seu blog é super fácil. Acesse o site oficial do player . A única coisa que você tem que fazer é colocar o link e o nome de cada música e depois gerar o código.

Não esqueça de deixar a opção Auto play(destacada da imagem) desmarcada, pois música que toca sozinha é irritante! Ao clicar no botão Generate code vai aparecer um código, copie ele e cole em um gadget de HTML/Javascript.

Mas como encontrar os links das músicas?
Você tem que tê-las hospedadas em algum servidor que forneça link direto. Para isso eu recomendo o Dropbox e o Fileden. Neste post tem o tutorial ensinando a usar o Dropbox (está no final do post). E neste tutorial de outro player de música, eu ensinei como usar o fileden (veja a partir do passo 7).

Super fácil não é cherries? Espero que tenham gostado. Em breve estarei postando todos os pedidos que foram feitos. Você pode pedir seu tutorial aqui nos comentários ou pelo Ask.fm (sim migrei pra lá, achei o gadget mais bonitinho que o do forms).

Kissus, Liah

Gadget "Stats do blog"

noreply@blogger.com (Lia) — Fri, 17 Aug 2012 12:30:00 +0000

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á!

Antes de começar: Para que o código funcione os feeds do seu blog devem estar habilitados!

1. Vá até a sessão "Layout" do blogger, adicione um gadget de HTML/Javascript no seu blog e cole o código abaixo:

Código

<style>
.stats {
display: block;
border-bottom: 1px dashed #fd7d9e; /*Cor e estilo da borda abaixo de cada linha*/
}
.stats img {
max-height: 16px; /*Tamanho máximo dos ícones ou gifs*/
vertical-align: middle;
}
.numbers {
color: #feb1c0; /*Cor dos números e data*/
}
</style>
<div class="stats">
<img src="https://i.imgur.com/6lzXTZa.gif"/>Desde: <span class="numbers">00/00/0000</span></div> 


<div class="stats"><img src="https://i.imgur.com/6lzXTZa.gif" /><script style="text/javascript">
function numberOfPosts(json) {
document.write('Posts: <span class="numbers">' + json.feed.openSearch$totalResults.$t + '</span><br>');
}</script>
<script src="LINK_DO_SEU_BLOG/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></div>

<div class="stats">
<img src="https://i.imgur.com/6lzXTZa.gif"/><script style="text/javascript">function numberOfComments(json) {
document.write('Comentários: <span class="numbers">' + json.feed.openSearch$totalResults.$t + '</span><br>');
}</script>
<script src="LINK_DO_SEU_BLOG/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></div>

<div class="stats">
<img src="https://i.imgur.com/6lzXTZa.gif"/>Visitas totais: <!--CÓDIGO DO CONTADOR AQUI-->
</div> 
<br />
<!--CÓDIGO DOS VISITANTES ONLINE AQUI-->

2. Substitua a cor dos números e o estilo da linha da forma que preferir no local indicado no código;

3. Substitua "00/00/0000" pela data de criação do seu blog;

4. Substitua o texto LINK_DO_SEU_BLOG pelo endereço do seu blog nos dois locais que ele aparece. Cuidado para não deixar o código com duas barras, veja o exemplo abaixo:

✅Certo: "https://cherry-liah.blogspot.com/feeds/comments/

❌Errado: "https://cherry-liah.blogspot.com//feeds/comments/

5. Agora, para o contador de visitas, vá até o site supercounters.com e clique na opção "Hit counter":

6. Marque a opção "Text". Em "Text color" escolha a cor do texto, de preferência a mesma cor que você colocou na cor dos números no código do widget. Deixe o campo "Link text" vazio, e em "Initial Count" coloque o número de visitas atuais do seu blog, que pode ser visualizado na sessão "Estatísticas" do blogger. Depois é só clicar no botão "Submit"

configurações do contador

Onde visualizar o número de visitas atual

7. Copie o código que apareceu ao clicar em "Submit" e cole ele no widget no lugar do texto

8. No código que você acabou de colar, apague as partes indicadas na imagem abaixo:

Isso fará com que o contador fique alinhado direitinho

9. Opcional: Agora para os visitantes online, volte para a página inicial do Supercounters e clique em "Online Counter"

10. Configure a cor de fundo e a cor do texto, depois clique em "Submit" e copie o código que aparecer. Cole o código no lugar do texto

11. Para mudar os gifs do widget é só substituir os links destacados no código pelo link das imagens da sua preferência. Você pode achar gifs nos sites indicados na página links úteis ou se preferir ícones tradicionais você pode procurar por palavras-chave no site IconFinder.

Agora é só salvar o seu widget e ver o resultado!

Espero que tenham gostado do tutorial! Me esforcei para simplificar o máximo possível, mas caso tenha ficado alguma dúvida ou se o código não estiver funcionando, podem perguntar nos comentários ♥

Kissus, Liah

Paginação numerada - Nova -

noreply@blogger.com (Lia) — Sat, 11 Aug 2012 18:17:00 +0000

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:

Vá no HTML do seu blog, procure pela tag </body> (Aperte Ctrl+F e digite para facilitar a busca)
Cole acima do trecho pesquisado, o seguinte código:

<script style='text/javascript'> var pageCount=5;var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Próxima";</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>

Agora procure por ]]></b:skin> e cole logo acima, este código:

/* PageNav --------------------------- */
.showpageArea {
font-family:Verdana, Geneva, sans-serif;
color: #000;
font-size:11px;
margin:10px; }
.showpageArea a { padding: 3px 8px;
margin: 2px;
font-weight: 700;
text-decoration: none;
color:#777; /* COR DA FONTE DO LINK PRÓXIMA */
border:1px solid #ccc; /* BORDA DO LINK PRÓXIMA */
background: #eee; /* COR DE FUNDO DO LINK PRÓXIMA */ }
.showpageNum a { padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999; /* BORDA DA NUMERAÇÃO */
background: #ddd ; /* COR DE FUNDO DA NUMERAÇÃO */ }
.showpageNum a:hover {
border:1px solid #888; /* BORDA DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */
background: #ccc; /* COR DE FUNDO DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */ }
.showpageOf{ margin:0 8px 0 0; }
.showpagePoint {
text-decoration: none;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border:1px solid #999; /* BORDA DA NUMERAÇÃO ATIVA */
background: #666; /* COR DE FUNDO DA NUMERAÇÃO ATIVA */
color:#fff; /* COR DA FOONTE DA NUMERAÇÃO ATIVA */ }

Se não aparecer na hora, não se desespere, as vezes demora um pouco para aparecer no blog. Dentro de alguns dias aparece. A querida Gizaa deu algumas dicas por comentário e achei que seria útil colocar aqui também: Uma coisa que deve ser levada em conta é se os feeds do blog estão certos, as vezes tem algum erro e ai nada funciona, nem posts relacionados,nem paginação e todos widgets que usam jason. Ah e em blog de testes fechado também não funciona. E também o numero de posts por página (configurado no painel) deve ser o mesmo no script -nesse caso é 5-

Feito isso, agora é só personalizar em todas as partes que tem instruções. Para ficar mais bonitinho você pode colocar sombra, e outras coisas. Não esqueça de sempre fazer backup do seu blog antes de começar algum tutorial! Se usar este tutorial, credite o Cherry Bomb e o Super Dicas PFS.
Espero que tenham gostado, kissus!

Como por gadgets no cabeçalho do blog

noreply@blogger.com (Lia) — Wed, 01 Aug 2012 17:51:00 +0000

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?

TUTORIAL ATUALIZADO

Excluindo o Cabeçalho

Para pode fazer esse tutorial, será necessário excluir o gadget padrão do cabeçalho. Graças a Deus o blogger solucionou o bug que estava impedindo a exclusão do cabeçalho.
Abra o HTML do seu blog, aperte as teclas Ctrl+F e digite o nome do seu blog. Você irá encontrar algo parecido com isso:

Lógico que no lugar de "Nome do seu blog" vai estar o nome do seu blog. Apague essa parte que está destacada na imagem acima. Visualize e clique em Salvar modelo. Vai aparecer um aviso assim:

Clique no botão "Exlcuir Widgets". Prontinho, o cabeçalho está excluindo!

Criando um novo cabeçalho

Agora vamos criar um novo cabeçalho que nos permita adicionar o que quisermos nele. Volte ao HTML do seu blog, e cole o código abaixo antes de ]]></b:skin>

#topo {
width: 980px; /*Largura da imagem do cabeçalho*/
height: 300px; /*Altura do cabeçalho*/
background: url('link da sua imagem de cabeçalho') no-repeat;
margin-top: -20px; /*Margem do topo*/
}

Altere a largura e a altura de acordo com sua imagem de cabeçalho. Coloque o link da imagem onde se pede, e em margin-top você "puxa" o cabeçalho para cima. Isso é necessário porque provavelmente vai ficar um espaço entre o topo da página e o cabeçalho. Mas se este espaço não te incomodar, troque -20 por 0. Salve as alterações. Seu cabeçalho ainda não vai aparecer. Para isso, você deve ir para o layout do blog, e adicionar um gadget de HTML/Javascript no local onde ficava o antigo cabeçalho.

Cole no gadget o código abaixo:

<div id='topo'>
</div>

Salve o gadget e você verá que seu cabeçalho já apareceu.

Adicionando gadgets no cabeçalho

Agora você já pode adicionar o que quiser no cabeçalho! Como? Simples: Colocando o código do item entre as tags do gadget que acabamos de adicionar. Não entendeu? Veja o exemplo abaixo onde eu coloquei o código da caixa de busca deste tutorial no cabeçalho:

<div id='topo'><form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" />
<input class="searchbut" type="submit" value="" /></form>
</div>

Viram? O código da caixa de pesquisa está dentro da div do cabeçalho, então vai ficar por cima dele. Quando você fizer este tutorial, vai ver que os elementos que você colocar no cabeçalho vão ficar desalinhados. Para alinhá-los você deve criar uma class como essa abaixo (cole antes de ]]></b:skin>)

.item {
float: left;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

Substitua "item" pelo nome do item em que você vai aplicar o código. Aí quando for colocar o código do gadget dentro do cabeçalho, coloque-o entre as tags <div class='item'> </div>
Aí é só voltar no HTML e ajustar as margens.

Esse é o jeito que eu faço, e acredito que seja o mais prático. Se você já possui algum conhecimento de CSS, vai conseguir fazer direitinho, mas caso não tenha entendido, leia um pouco sobre o básico do CSS aqui.

Clique aqui e participe do sorteio que está rolando aqui blog!

Kissus, Liah