3 maneiras de colocar borda separada(CSS)

Boa noite, leitores.

Lembram que eu falei sobre minhas provas? Bem, já recebi o resultado de três delas e foram bem animadores: um oito em português, um oito e meio em história e  um nove em matemática, minha matéria favorita em que a minha nota foi inclusive a melhor da sala. Foi bom que eu consegui mostrar para minha mãe que meu seis passado foi apenas uma leve queda, nada que deva preocupar muito. Fora isso, o resto do meu dia foi um tanto parado e cansativo por causa da natação, mas não tem coisa melhor que se exercitar, principalmente na água, aqui fala uma semideusa filha de Poseidon e não, eu não sou lerda como o Percy, apesar de que algumas pessoas acharem isso :c

Como faz tempo que não posto um tutorial aqui, resolvi trazer um que podem ter seu resultado obtido através de três maneiras (conhecidas por mim). Hoje vou ensinar como aplicar a bordinha separada por css, para quem não sabe do que estou falando, é essa borda que uso atualmente nas ilustrações aqui do blog. Sei que muita gente já sabe, mas como vou explicar mais de uma maneira, vocês podem escolher qual é o melhor para vocês ou até o mais fácil de ser aplicado. Ah e já tinha me esquecido, esqueci de agradecer pelor 15(8) seguidores, ultrapassamos a meta e nem havia notado (nossa, como sou atenciosa) e fiquei muito feliz com isso, de verdade. Até outro dia  =.=~

Personalizando o gadget de seguidores

Olá, pessoas e ETs.

Resolvi postar mais de uma vez hoje, é bom aproveitar minha vontade de postar e os pedidos do leitores também. Sabe, eu ainda não estou realmente bem, mas eu estou tentando de tudo para dar uma animada e me sentir mais leve. Até agora minhas tentativas deram, em sua maioria de vezes, errado, mas não sou de desistir das coisas e não é agora que isso vai acontecer, então aos poucos vou dando o meu jeito. Enfim, que tal falarmos sobre o post?

Prosseguindo, uma leitora me pediu para postar um tutorial de como personalizar o gadget de seguidores como o daqui do blog, então resolvi postar o mais rápido possível já que eu tive essa mesma dificuldade, então eu trouxe aqui cada passo da personalização para vocês, espero que gostem e entendam tudo direitinho. Você já sabe onde clicar para conferir o resto.

Efeito reveal

Bom dia, leitores.

Hoje já é sexta-feira e minhas aulas já voltam nessa segunda, minhas férias passaram muito rápido e eu ainda não saí para lugar nenhum, contrariando aquela famosa frase que o tempo voa quando estamos no divertindo, pois meu recesso passou mais rápido enquanto eu estava entediada. Sério, para vocês terem uma ideia de como está totalmente parado, a  coisa mais diferente que eu fiz foi ir ao inglês ontem. Mas só de pensar que só faltam dois bimestres dá vontade de que o tempo acelere mais e mais até as férias do final do ano e quem sabe avance rápido mais algum tempo até o dia 15 de dezembro, meu aniversário.

Trouxe hoje mais um efeito, o reveal. Na verdade não ia trazê-lo hoje, mas a pedido de uma leitora que no post passado pediu o tutorial de um segundo efeito que havia no blog de previews, resolvi adiantá-lo. É um simples efeito que envolve deslocamento, opacidade e uma bordinha tracejada interna, ou seja uma outline com sua coordenada negativa. Curioso para visualizar logo o efeito? Clique aqui.

Efeito rotate surprise

Bom dia, leitores.

Sim, eu resolvi aparecer mais cedo por aqui, pois não vai ser possível que eu entre no período da tarde, embora eu esteja no período de recesso escolar ainda tenho que ao meu inglês. Enfim, queria aproveitar o momento e agradecer também pelos 81 seguidores, estamos cada vez mais perto da meta dos 100. Mas vamos ao assunto do post, como vocês sabem eu estou muito no tédio e sem nada de bom para falar.

Como vocês sabem eu ainda sou iniciante em html e css, mas eu tentei e consegui fazer meu primeiro efeito, ele é um simples efeito que faz a imagem girar em 360º com um charme que fica por conta das bordas, você  podem conferir o efeito aqui. Tentei dar uma cara nova ao que muita gente já fazia sempre do mesmo jeito e tenho que admitir que isso já estava me deixando aborrecida, então eu pensei por que não reinventar?

Colocar imagem de leia mais + modelos

Boa tarde, povo lindo (ou não).

Estou aqui na maior preguiça por causa daquele friozinho gostoso causado pela chuva, mas enfim resolvi vir postar algo, já que esta é a minha última semana de férias e quando as aulas recomeçarem não terei tanto tempo livre assim. Enfim, o clima está perfeito para não fazer nada mesmo quando ainda tenho que aproveitar o tempo livre em alguma coisa útil, como postar aqui.

Trouxe um tutorial que muitos já devem saber, mas como não tínhamos ainda, resolvi trazê-lo. Na verdade minha intenção era trazer apenas as imagens, mas resolvi trazer também como colocá-las, pois se você gostar de alguma já tem o tutorial no post mesmo. Se quiserem outro dia trago como personalizá-lo através do css mesmo, pois acho até mais prático.

Blockquotes

Boa tarde, leitores.

Desculpe não ter entrado ontem, estava dando uns retoques no meu trabalho e por incrível que pareça ainda não consegui terminá-lo. Enfim, mudando drasticamente de assunto, alguém assistiu o jogo ontem? Que momento foi aquele na hora do hino? Uma coisa sem comparação, parece que de repente o povo do nosso país resolveu resgatar algo muito comum nos grandes países e principalmente na Europa, uma coisa chamada de patriotismo que estava desaparecida do Brasil há algum tempo.

Hoje resolvi trazer alguns modelos de blockquote montados por mim, não são muitos, pois como sabem ainda sou iniciante, mas como prometi teremos algumas semanas antes, não sei ao certo, teremos menos coisas reblogadas aqui e de preferência passaremos a apresentar um conteúdo original. Para quem não sabe, blockquote é como uma caixinha de citação, onde colocamos códigos, avisos etc. Para usar os códigos basta colá-los em cima de ]]></b:skin>.  Espero que gostem.

Menu de tags

Boa tarde, leitores.
Jurava que já tinha postado no blog hoje por isso nem apareci mais cedo, sério. Enfim, mas estou aqui. Só tenho a semana que vem de recesso e ainda não saí para lugar nenhum, então vou ver se mais tarde eu faço uma maratona de episódios da série revenge para ocupar meu tempo ou até Game of Thrones, mas escondido, já contei aqui que fui proibida de assistir por causa das "cenas pesadas", né? Mas não façam como eu ok? Não façam coisas escondidas, pois eles sempre vão nos pegar em flagrante, como sempre acontece comigo aqui e não, eu não sou de desobedecer meus pais, só algumas raras vezes.
Trouxe mais um menu para o blog, pois para mim eles são bem mais fáceis e práticos de fazer já que ainda não domino essas coisas de html e css, mas enfim, desta vez eu trouxe um menu para tags que vocês podem conferir aqui, no nosso blog de testes. A montagem desse menu é minha, portanto se usarem creditem, lembrem-se plagiar só demonstra sua falta de capacidade. Bem, vocês já sabem onde clicar para conferir o tutorial, não é pessoas lindas, cheirosas e maravilhosas? -parei

Menu Small Border

Boa tarde, leitores.

Finalmente consegui arrumar meu computador e ele agora não está mais barrando meus acessos ao tumblr, foi mais fácil do que eu esperava, o problema era que meu antivírus desapareceu e com minha mãe e meu pai entrando, ou até mesmo eu, não sei em que site clicamos que o computador endoidou, quando eu instalei meu avg novamente que foi feita a revisão completa, 4 cavalos de Troia foram encontrados.

Mas indo ao assunto do post, hoje trouxe um menu feito por mim, dei a ele o nome de small border, ele é um básico menu de numeração, bem pequenino e com uma borda no hover, ainda não sou muito boa nessas coisas de menu, mas espero que gostem e tenham paciência, aos poucos eu vou melhorando.

 Preview

Menu simples

Boa tarde, leitores lindos.

Desculpem a demora para postar, eu tive que sair na parte da manhã e só entrei às 14:00 horas no computador, mas como eu estava sem de ideia, como ontem a noite, só apareci por aqui agora. Além da minha falta de criatividade aquela pontada na nuca parece que não passa nunca, pelo jeito ou estou dormindo em uma má posição ou estou tendo algum problema com ansiedade ou nervosismo, acho mais provável a primeira opção, pois não tenho coisas para me preocupar.

Decidi trazer pela primeira vez aqui um menu feito por mim, não que eu tinha preguiça de fazer antes ou coisas do tipo, eu apenas não sabia como fazer, mas isso hoje mudou e finalmente consegui. Por ser o meu primeiro, ele está bem simples, mas espero que realmente gostem, a preview dele está aqui (x), lembrando que se usarem creditem, vamos ao tutorial?

Mapa de degradê azul (Photoshop)

Boa tarde, leitores.

Antes de tudo queria dizer que eu não sumi, apenas não estive postando por causa de uns 2.500 motivos, todos relacionados a questão tempo, no sábado foi o dia da gincana do meu colégio, no domingo meu irmão estava limpando e formatando o computador e consequentemente, tive que instalar novamente os programas, o que só pude fazer ontem, dentre eles o photoshop cs6 e como sou muito curiosa e adoro aprender coisas novas resolvi dar uma fuçada básica pelo programa.

Se eu disser que sou a maga do photoshop e que sei tudo sobre ele estarei mentindo, porém sei sim fazer algumas coisas, principalmente se relacionadas a efeitos, por isso trouxe um tutorial de um mapa de degradê, que consiste em colorizar a imagem e no final trouxe uma action com o efeito aplicado na cor azul, para aqueles que não estiverem com muita coragem de seguir os passos, veja o exemplo abaixo.

Tutorial - Efeito Cool

Boa noite, leitores.

Então eu estou aprontando um layout novinho para vocês, já vou avisando que vai ser muito diferente deste, pelo menos nas cores, será um coisa mais dark, aguardem, vou deixá-los curiosos até o fim de semana haha, mas queria avisar também que o blog será fechado temporariamente para implantação do novo layout, isso só lá para sexta-feira, okay?

Enfim hoje trouxe um tutorial de um efeito que achei no Gold tumblr, eu mesma já testei em um layout de testes e verifiquei que a adaptação para o blogger deu certinho, mesmo assim qualquer dúvida que surja é só falar pelos comentários.

Live preview

Tutorial- Top Comentaristas

Mudei o modelo de ilustrações de posts de novo, sou indecisa.

Boa noite, leitores.

Desculpe não estar postando muito, é que ainda não desisti totalmente de fazer um novo layout, estou procurando alguns tutoriais, mas essa mudança não acorrerá por agora e digamos que não estava muito inspirada esses dias, sabe não sou dessas que faz um post de qualquer jeito, com duas linhas e pronto, para mim tem que ter conteúdo realmente, concordam?

Como fazia tempo que não postava algo deste tipo resolvi trazer um tutorial bem simples de como colocar o gadget top comentaristas no blog, eu acho útil para incentivar os leitores a comentarem e é também uma forma de divulgar, ou seja de agradecer pela atenção dada ao blog, apesar de ainda não ter inserido esse gadget aqui.

Tutorial do http://www.kawaii-world.net/

Efeito zoom

Hey, leitores.

Sumi do blog, me desculpem, é que estou tendo que me virar em 1000,  aguentar escola, natação e inglês não é fácil. Mas acho que é melhor o blog parado do que  com uma pessoa chata como eu escrevendo, hein?  Enfim para os que ainda não perceberam minha chatice e aos novos leitores trouxe um request que foi feito pela ask, mas antes de trazê-lo preciso lembrar a vocês que requests devem ser feitos apenas desse jeito, pela ask do blog que se encontra na sidebar, ok? Para manter tudo organizado, apenas façam requests por lá.

O tutorial é do KW, ainda não trouxe tutoriais próprios, pois ainda não sei montar direito meus próprio códigos, o tutorial é de colocar o efeito zoom na elite afiliados.

Personalizar caixa de pesquisa

Boa tarde, leitores.

Ontem não postei, pois fui ao cinema com alguns amigos assistir dezesseis luas, estava muito na expectativa  por esse filme, não havia lido o livro, mas uma das pessoas que foram comigo sim, disse que era muito interessante. Mas como explicar quanta decepção? O filme me provocou sono do início até o fim, a única parte que realmente achei interessante ocorreu nos últimos 10 minutos de filme.

Decepções a parte, já tem mais de uma semana que me pediram alguns tutoriais, já era para ter postado, mas deu erro ao salvar aí perdi a postagem inteira, hoje resolvi postar o mais simples, já que eu deixei minhas lições de casa para última hora e tenho que fazê-las ainda.

O tutorial peguei no CB de como personalizar a caixa de pesquisa.

Tutorial- Efeito Sépia nas Imagens do Blog

Olá, leitores.

Desculpe a ilustração de posts horrivel, é que ela foi feita no paint, pois estou no notebook do meu irmão e não tem programas de edição e eu não sei mexer muito bem nos editores online.

Uma leitora me pediu na ask o tutorial de como deixar as imagens do blog com o efeito igual as do CB quando passa o mouse é tipo um hover, então os créditos desse tutorial são Cherry Bomb.

1. Vá em editar HTML e procure por ]]></b:skin> e acima desse código cole:

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;}

Prontinho simples e bonito.

MetalKisses.

Lembrando plágio só confirma sua imcompetência, se pegar coloque os créditos.

Tutorial- Centralizar cabeçalho do blog

Boa noite, leitores.

Primeiro queria pedir desculpas por só estar postando agora, hoje teve o aniversário de uma amiga minha às 14:00, eu sei que eu saio de 11:30 de escola, mas não estava com vontade de postar,  então não quero fazer por obrigação. Não é que eu esteja enjoando do blog logo no início, mas sim por que hoje a aula foi puxada, duas aulas da Snape (professora de português).

Bem, trouxe um tutorial bem simples e voltado principalmente para os novatos, mas é bem útil,  e acaba dando aquele up! no blog, afinal quem quer (quando é utilizado no modo"normal" do blog) deixar o cabeçalho descentralizado?

Let's go.

1. Vá em editar HTML e marque a opção de  Expandir modelos de widgets e procure por:

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

2. Antes de iniciar esse código cole <center> e no final cole </center>,  vai ficar assim:

<center><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></center>

Os créditos do tutorial ao blog (x).

Espero que tenham gostado.

MetalKisses.

Tutorial- Menu Pour Tags

Boa tarde, leitores.

Nossa estou tão feliz, finalmente alguém resolveu atender meus pedidos e participar ativamente do blog e esse alguém foi a Yasmin Ribeiro amei seu nome u.u,  sigam esse exemplo minha gente participem, só assim vou saber e poder atender os desejos de vocês. 

Ela  pediu o tutorial do menu aqui do blog, lembrando que se usarem deixem os créditos ao Html Studio e a minha adaptação ao blogger, plágiando você só está provando que é incompetente.

Preview

Clique em leia mais para ver o tutorial.

Tutorial- Como usar bases no photoshop + Ask

Download do Photoshop Cs3 aqui

Ui que delícias.

Boa noite, leitores.

Achei no youtube um vídeo com um tutorial de como usar bases no photoshop, mas antes disso queria falar para vocês uma coisa: a ask do blog não está para enfeite, vocês podem pedir a vontade que eu realizarei. Vejo que o blog está crescendo a cada dia, ficando com mais seguidores, leitores e comentários, mas não esqueça que ele se trata apenas de um cantinho para vocês, ele foi criado exatamente para isto, recado dado agora vamos para o que interessa.

Quem não acha aquelas imagens em bases lindas? Mas quem sabe fazê-las? Os veteranos na blogesfera e práticos em programas de edição sabem, óbvio. Mas eu sei bem com é para os iniciantes verem aquelas bases lindas não saberem como fazê-las, afinal todos sabem como é isso, pois já foram iniciantes.

Let's go.

Tutorial- Centralizar título das postagens.

Bom dia, leitores.

Desculpem não ter postado ontem, mas foi por que como avisei a vocês fui a casa dos meus primos, foi muito divertido, teve mela-mela e muito banho de mar, além de uma bela caminhada. Cheguei em casa as 22  h e 30 min, morta de cansada aí já sabe, né? Só fiz três coisas: banho, comida e cama.

Enfim, trouxe um tutorial super simples e que muitos já conhecem de como centralizar o título dos posts.

1- Vá em editar HTML, dê ctrl+f  e procure por:

.post-title {

2- Cole abaixo desta linha o código:

text-align: center;

Visualize, veja se tudo deu certo e salve.

Obrigada ao blog Adolescente Nerd pelo tutorial. 

MetalKisses.

Tutorial- Separar e colocar bordas nos gadgets

Bom dia, leitores.

Me pediram no post passado para postar sobre uma participação do Simple Plan nos Simpsons, mas eu infelizmente ainda não encontrei nada sobre :´(, então se vocês souberem poderiam me informar? Fiquei  curiosa mais do que já sou.

Trouxe um tutorial bem útil para vocês de como separar e colocar bordas nos gadgets.

Let's go.