Slide no blog

Oi diamantes!

Sentiram a minha falta? Passei muito tempo sem postar aqui. As minhas aulas começaram e esqueci completamente do ddug me desculpem. Eu tenho aulas de tarde, sempre tive aulas de tarde. Nunca experimentei a sensação de ter uma tarde livre :o.

Hoje trago um tutorial, como meter slide no blog. Clique no leia mais caso queira aprender!

Efeito Janela

Ooi gente mais linda! Como foi o final de férias para vocês? Minhas aulas começaram hoje e só amanhã eu vou super vida loka u-u o que eu acho que é meio atrasado, porque vi várias blogueiras dizendo que suas aulas começaram segunda-feira ou semana passada. Estranho. Mas enfim, hoje eu até traria alguma resenha, atendendo a pedidos, mas sei que como o blog é de estilo variado é melhor intercalar uma postagem mais "útil" e uma mais "intelectual". Preciso terminar o Tráfico de Livros, acreditam que eu achava que ia terminar ano passado? Pois é... Enfim, venho tendo várias ideias de histórias aqui, mas nunca as anoto, e depois vou esquecendo... E sim, eu ainda estou super agitada, não sei o porquê.

Fiz o efeito de hoje para o layout free, mas considerando que nem todos vocês curtem usar lays free, assim como eu, resolvi postar ele aqui no blog. Na verdade eu estava pensando em postar ele antes de postar o layout, mas acabei invertendo e enrolando, vindo a postá-lo só agora. Não sei se já existe esse efeito, como cada um dá um nome a um efeito, é difícil localizar, mas eu fiz com ajuda do CSSMaker e só dele. Se quiser ver o efeito, vá nesse blog, no gadget "Efeito Janela". O nome? Porque eu achei que ele no hover parece uma janela, simples assim.

Efeito Translate

Oi diamantes!

Desculpem não ter postado na sexta-feira, passei o dia todo fora de casa. Alguém ai me dá ideias para post? Acho que estou a ficar novamente com uma crise de inspiração >.<'

Bem, para o post de hoje trouxe um efeito, podem visualizá-lo aqui (www). No efeito a imagem diminui e vai para a direita. Eu sou péssima a dar nomes a efeitos. Se quiserem meter no vosso blog creditem e podem reblogar (com créditos, claro).

Site que faz paletas através de uma imagem

Oi diamantes!

Dêem-me algumas ideias para posts, aceito tudo! Como estão sendo as vossas férias? As minhas, basicamente, são computador, televisão, ir ao supermercado com a minha mãe... nada de especial. No próximo post trago umas paletas de cor :)

O assunto do post de hoje é um site que eu descobri que faz paletas de cor através de uma imagem. É só meter a url da imagem que queremos e o site faz a paleta automática. Muito interessante! O site é este. Agora vou fazer todas as minhas paletas por lá.

Espero que tenham gostado, volto na terça!

Kiss :3

Efeito Skew

Oi diamantes!

Desculpem não ter postado na sexta feira, eu tenho imenso tempo para postar aqui porque estou de férias (até Setembro!) mas não tenho muitas ideias (e a preguiça também tem culpa!). A Milena sugeriu que eu fizesse um efeito no Css 3.0 Maker, eu nunca tinha feito um efeito lá mas gostei muito.

O efeito é simples, no hover a imagem roda e fica em formato de paralelogramo (se não souberem o que é me avisem). Se quiserem ver melhor cliquem. Gostaram?

Menu para goodies - Dentro e fora

Ooi gente mais linda desse mundo!

Como estão? Desculpem por não postar, realmente tentei e tal, mas fiquei por aí e acabei não postando. Não consegui comprar livros, então minha vida anda meio celular > tumblr > celular > facebook > celular. Ah, e eu também respondi comentários. Mais ou menos, vou assumir. Eu peguei os comentários mais antigos, publiquei e salvei os links para serem visitados e comentados num rascunho aqui no blog, então esses blogs mais antigos eu já comentei, faltam apenas os comentários do dia 06/06 até hoje, se não me engano. Ah, e hoje foi é feriado em São Paulo, então aproveitei pra ficar com a família.

O post de hoje foi pensado num momento de "eu preciso postar um tutorial" e, como um menu é sempre o melhor e mais útil tutorial a se trazer, eu resolvi, como vocês podem ter visto no título, trazer um lindo menu para vocês. O menu é bem básico mas pode melhorar bastante o visual da sua lista de goodies, desejos, ou até mesmo os créditos, como eu uso aqui. Para visualizar, clique aqui e veja no gadget "Dentro e fora", aproveite para dar uma olhadinha no novo layout no blog de visualizações.

Menu Splasher

Oi diamantes :) Desculpem não estar postando muito. Só vou poder postar normalmente a partir de 7 de Março, altura em que acabam minhas provas.

Trouxe um menu que adaptei de um tumblr (deste, acho eu), em que o icon gira e o link sobe, se quiserem visualizar, cliquem.

Para aplicá-lo, vá ao html, pesquise por ]]></b:skin> e por cima cole :

Menu de Abas

Ooi gente!

Como vão? Espero que estejam bem, estou postando a essa hora porque fiquei o dia todo fora de casa, e me ocupei em responder comentários, terminar umas páginas do meu caderno de livros (que eu pretendo mostrar para vocês) e brigar com o computador que desligava toda hora.

Ontem uma leitora daqui do blog me pediu esse menu do gadget "Amigos" e do "Extras", primeiramente achei que eram os efeitos, mas me toquei que era nada mais, nada menos, que o famoso menu de abas. O tutorial que estou trazendo foi encontrado no Kawaii World, e não vi nenhuma restrição na postagem, então decidi por repassar.

O menu fica do jeito do nossos gadgets citados acima, mostra um conteúdo, tem várias abas, e quando você clica nelas, vai mudando de conteúdo. não sei explicar as coisas Vamos ao menu:

Cole o seguinte código em um gadget de HTML/JavaScript:

<link rel="stylesheet" href="http://drikoti.net/Tabber/tabber-cinza.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://drikoti.net/Tabber/tabber.js"></script>

Agora, em outro Gadget, cole:

<div class="tabber">
<div class="tabbertab" title="Aba 1">
<br>
Conteúdo da aba 1
</>
</div>
<div class="tabbertab" title="Aba 2">
<br />
Conteúdo  da aba 2</div>
<div class="tabbertab" title="Aba 3">
<br />
Conteúdo da aba 3</div>
</div>
<center><br />

Se quiser outro espaço, cole o seguinte código antes do último </div> :

<div class="tabbertab" title="Aba nova">
<br>
Conteúdo da aba nova
</>
</div>

Pronto! Seu menu de abas estará prontinho se você seguiu todos os passos. Lembrando que o menu não é meu, eu peguei no Kawaii World.

Espero que tenham gostado, até mais!

Área dos comentários personalizada

Oi diamantes *-* /Beatriz there

A área dos comentários é muito importante. É lá que seu leitor comenta os posts, então tem que ter um aspeto "aceitável". Neste post, vou ensinar a personalizá-la.

Vá no html, ctrl + f e procure por #comments {

Apague de #comments { até } e substitua por

#comments {

  background: #fff; /*Cor do fundo */

  padding: 15px;

 border: 1px dashed #90ee90; /* Borda à volta */

 border-radius: 20px 20px 20px 20px; /* Bordas arredondadas */

}

.comments h3,.comments h4{

width: 98%;

padding: 7px;

margin: 10px 0 !important;

color: #87CEFA; /* Cor do "2 comentários" */

text-align: center; 

font-family:'Dancing Script' !important; /* Fonte do "2 comentários" */

font-size: 37px !important; /* Tamanho do "2 comentários */

}

Ficará assim (pode personalizar) :

Ficou feia porque não personalizei

Espero que tenham gostado ! Kisses

Colocando caixa de busca

Olá diamantes! Desculpem ter desaparecido, estava na semana de testes.

Hoje trago um tutorial para criar uma caixa de busca. É muito útil, se o seu leitor precisar de pesquisar algo, escreve na caixa e aparece umas postagens a ver com o assunto. Créditos ao Jackie Dream.

A caixinha ficará assim :

Vá no html e cole o código acima de ]]></b:skin>

.search{

float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */

font-family: Tahoma, Tahoma; /* Fonte */

}

.searchbar{

height: 20px;

width: 140px;

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

-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;

background: #FFF; /* Cor de fundo da parte onde escrevemos */

}

.searchbut{

background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/

width:30px;

height:30px;

border: 0;

padding:7px;

}

Depois, cole este código em um gadget html/javascript

<form action="/search" class="search" method="get">

<input class="searchbar" id="s" name="q" type="text" value="" />

<input class="searchbut" type="submit" value="" />

</form>

Personalize como quiser! Beijos, até ao próximo post.

Menu complete

Ooi gente!

Como estão? Eu estou muito bem, minhas aulas voltam em uma semana, e eu estou um tanto quanto ansiosa... Acho que vou precisar de alguém para me ajudar, fato então se você quer entrar aqui no blog, é só me avisar, não precisa preencher nada. Talvez eu convide alguém, ainda não tenho certeza.

Hoje eu trouxe um menu para vocês. Talvez já exista algum menu parecido, mas eu gostei bastante da ideia dele. Ele fica em oval e depois se "separa". Eu recomendo que seja usado com 4, 8, 16 links, ou personalizado, porque a proposta dele não funciona com outros números. Para visualizá-lo, clique aqui, é o gadget "Menu Complete".

Primeiro, cole esse código acima de ]]></b:skin>:

#complete { -moz-border-radius-topleft: 75px; -moz-border-radius-topright:75px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-top-left-radius:75px; -webkit-border-top-right-radius:75px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-top-left-radius:75px; border-top-right-radius:75px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; padding: 5px; background-color: rgba(135, 0, 126, 1); background: rgba(135, 0, 126, 1); color: rgba(255, 255, 255, 1); transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; text-align: center; padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 6px; width: 100px; float: left; height: 18px; } #complete:hover { transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; -moz-border-radius-topleft: 75px; -moz-border-radius-topright:75px; -moz-border-radius-bottomleft:75px; -moz-border-radius-bottomright:75px; -webkit-border-top-left-radius:75px; -webkit-border-top-right-radius:75px; -webkit-border-bottom-left-radius:75px; -webkit-border-bottom-right-radius:75px; border-top-left-radius:75px; border-top-right-radius:75px; border-bottom-left-radius:75px; border-bottom-right-radius:75px; background-color: rgba(0, 0, 44, 1); background: rgba(0, 0, 44, 1); text-shadow:1px 0px 11px #ffffff;} #completa { -moz-border-radius-topleft: 0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:75px; -moz-border-radius-bottomright:75px; -webkit-border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius:75px; -webkit-border-bottom-right-radius:75px; border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:75px; border-bottom-right-radius:75px; padding: 5px; background-color: rgba(135, 0, 126, 1); background: rgba(135, 0, 126, 1); transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; text-align: center; padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 6px; width: 100px; float: left; color: rgba(255, 255, 255, 0.9); height: 18px; } #completa:hover { -moz-border-radius-topleft: 75px; -moz-border-radius-topright:75px; -moz-border-radius-bottomleft:75px; -moz-border-radius-bottomright:75px; -webkit-border-top-left-radius:75px; -webkit-border-top-right-radius:75px; -webkit-border-bottom-left-radius:75px; -webkit-border-bottom-right-radius:75px; border-top-left-radius:75px; border-top-right-radius:75px; border-bottom-left-radius:75px; border-bottom-right-radius:75px; padding: 5px; background-color: rgba(0, 0, 44, 1); background: rgba(0, 0, 44, 1); text-shadow:1px 0px 11px #ffffff; transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; }

O código é bem extenso, e está meio confuso, portanto preste atenção na hora de mudar as cores.

As linhas background-color: e background: se referem ao fundo. Eu estou usando uma cor RGB, você pode usar uma, ou mudar com uma tabela de cores como essa.

#complete e #complete:hover correspondem à primeira linha de links, enquanto #completa e #completa:hover correspondem à segunda linha.

Para usar, cole o código abaixo em um gadget HTML/JavaScript:

<a href="link da página" id="complete">Nome do Link1</a>
<a href="link da página" id="complete">Nome do Link2</a>
<a href="link da página" id="completa">Nome do Link3</a>
<a href="link da página" id="completa">Nome do Link4</a>

Nesse código já estão os 4 links, é só mudar. 

Espero que tenham gostado do menu, para usar apenas creditem, e não repassem.

Até mais, beijinhos!

Personalize o gadget de postagens relacionadas

Oi diamantes! Como estão? Trago aquele tutorial que prometi. É quase uma "parte II".

Para fazer este tutorial terá que ter este gadget. Neste tutorial, vamos aprender a personalizá-lo porque ele é um pouco feinho. Créditos ao Spazio Dm.

Para personalizar...

Vá ao seu html e procure por ]]></b:skin>. Acima cole o seguinte código :

.linkwithin_posts {width: 700px !important;}

.linkwithin_posts a {border: none !important;padding-right: 15px !important;background-color: #FF0;background-image: none;height: 200px;}

.linkwithin_posts a:hover{background-color: #FC3 !important;}

.linkwithin_title:hover {color: #F00 !important;text-decoration: none !important;}

A vermelho é a largura do gadget, aumente ou diminua o número para ficar bem. A laranja é a cor do fundo do gadget sem ter o rato por cima, a amarelo é a cor do fundo gadget com o rato por cima (troque, se quiser). A verde é a cor das letras com o rato por cima (hover).

Espero que tenham gostado. Até ao próximo post /Beatriz.

Como colocar gadget de postagens relacionadas

Oi diamantes ! Trago mais um tutorial para vocês, não sei se já conhecem. Créditos ao Jackie Dream, foi lá que aprendi.

O gadget de postagens relacionadas ficará assim :

Para colocar, vá até *este site* e estará lá uma caixinha assim :

Coloque seu email, seu blog, sua plataforma (blogger, no meu caso), o número de posts que quer e selecione a última opção se seu blog tiver fundo escuro.

Clique em "Get widget" e irá para esta página :

Clique em "Install widget", e será novamente redirecionado para esta página :

Selecione o blog e mude o título do gadget (opcional). 

Clique em "adicionar widget" e faça como a imagem abaixo :

E pronto! O gadget estará em seu blog. No próximo post, trarei um tutorial de como personalizar este gadget.

Beijos /Beatriz

Menu para goodies/wishlist

Oi diamantes ! Hoje trago para vocês um menu para goodies/wishlist, eu peguei o código em um tumblr que não me lembro o nome, mas alterei quase tudo e meti as informações. Se alguém reconhecer o código, me avise.

É um menu simples, em hover as letras andam para a frente e aparece uma sombra

Menu soul

Ooi gente!

Como estão? Espero que estejam bem, vocês acham que o blog está bom assim, ou que precisa de mais postadoras, além de mim, da Bea e da Ju? Não sei se fica bom com muita gente, talvez vire bagunça, não sei...

Hoje trouxe um menu que eu desenvolvi com o CSSMaker, é bem simples, coisa de iniciante mesmo. É perfeito se você quer um menu bem pequeno, para colocar uns 3 ou 4 links, que é o que eu aconselho, pois não pode haver mais de uma linha com o menu, se não ele fica estranho.

Live preview aqui, procure pelo gadget "Menu Soul".

Cole acima de ]]></b:skin>

.soul a { background-color: rgba(109, 255, 255, 0.9); /* Fundo */ background: rgba(109, 255, 255, 0.9); /* Fundo */ widht: 100%; transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; margin-left: 2px; margin-top: 2px; padding: 3px;} .soul a:hover { background-color: rgba(215, 255, 44, 0.9); /* Fundo */ background: rgba(215, 255, 44, 0.9); /* Fundo */ color: rgba(0, 0, 0, 1); transform: translate(-1px, -205px); -webkit-transform: translate(-1px, -205px); -moz-transform: translate(-1px, -205px); -o-transform: translate(-1px, -205px); -ms-transform: translate(-1px, -205px); -moz-box-shadow: 1px 75px 5px #000000; -webkit-box-shadow: 1px 75px 5px #000000; box-shadow: 0px 20px 5px #000000; padding: 3px; text-shadow:0px 20px 5px #ffffff; }

Modifique apenas as cores do fundo, pode tanto usar uma cor RGB, quanto um código que encontramos em tabelas.

Quando for usar, cole:

<div class="soul">
<a href="SEULINK">NOME1</a></div>

Caso queira mais links, repita de <a href até </a>.

Espero que tenham gostado. Usem com créditos, e por favor não repassem.

Até mais, beijos!

Transparência automática na sidebar e attibution

Ooi gente!

Quem usa o mesmo modelo Travel que eu no blogger (esse) tem uma grande dificuldade por causa da "transparência" que é difícil de obter. Nos outros modelos, é só selecionar "transparente", que a sidebar fica transparente. No caso desse modelo, é necessário mexer no HTML, eu já ensinei uma forma aqui, e hoje descobri outra forma, que vou ensinar para vocês.

No tutorial antigo, eu ensinei como fazer uma barra lateral específica ficar transparente. Esse tutorial novo ensina como deixar as duas barras transparentes, então se você mudar, já está transparente, e também como deixar o Attribution com fundo transparente, então se você não quer que o seu Attribution fique transparente, se quer ele com aquele fundo mais escuro, siga o tutorial antigo.

Para mudar o fundo, abra o HTML do seu blog, dê crtl+F (ou F3) e procure por

   <Variable name="widget.outer.background.gradient" description="Sidebar Gradient" type="url"

       default="url(//www.blogblog.com/1kt/travel/bg_black_50.png)" value="url(//www.blogblog.com/1kt/travel/bg_black_50.png)"/>

Achou? Agora substitua

  //www.blogblog.com/1kt/travel/bg_black_50.png 

por

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyr3CWfITCOAXZYUUDdld1c_luCIZhs7L1GN7YAr3hyaXhPmYaQubrpWB9FCYOSCC6TMABmHYyMvOxaKSRqFn0fKyM7Q8g3TR8_f4K3AA7ri0fhqk9FwIog2L_xFVm_fOoIQGJDjxxDI/s1600/Sem+t%25C3%25ADtulo+1.png

Visualize, se sua sidebar e seu attribution (no fim do blog) estiverem com fundo transparente, salve. Se você não gostou do efeito, é só inverter.

Explicando o que eu fiz: o blogger tem um background em forma de imagem, que fica tanto na sidebar quanto no Attribution, é esse background. Eu substituí esse background por uma imagem transparente, assim deixando o fundo transparente.

Espero que tenham conseguido fazer o tutorial, lembrando que ele só funciona nesse modelo Travel, existem outros modelos Travel, que são bem mais simples.

Creditem se forem usar, e podem repassar esse tutorial.

Beijos, até mais!

Efeito scale and shadow

Ooi gente!

Só queria avisar que amanhã eu não tenho certeza que posto. Só tenho certeza de que vou viajar a partir do dia 1º, então vou programar alguns posts, que já estão preparados.

Eu estava aqui fazendo o layout para o concurso, e desenvolvi um efeito muito legal, desenvolvi ele com o CssMaker, e gostei bastante do resultado. Basicamente ele aumenta, arredonda e tem uma sombra bem grande no hover, o que destaca a imagem em questão.

Acho que ele fica legal tanto em imagens de afiliados quanto em equipes, blogroll, mas as imagens têm de ser quadradas, para que não fique estranho. Se quiserem, façam algumas modificações, podem misturar alguns efeitos, se sintam livres.

Live preview aqui, no gadget "Efeito scale and shadow".

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

.team {
transition:All 0.4747s ease;
-webkit-transition:All 0.4747s ease;
-moz-transition:All 0.4747s ease;
-o-transition:All 0.4747s ease;
transform: rotate(0deg) scale(1) ;
-webkit-transform: rotate(0deg) scale(1) ;
-moz-transform: rotate(0deg) scale(1) ;
-o-transform: rotate(0deg) scale(1) ;
-ms-transform: rotate(0deg) scale(1) ;
}
.team:hover{
transform: rotate(0deg) scale(1.174) ;
-webkit-transform: rotate(0deg) scale(1.174) ;
-moz-transform: rotate(0deg) scale(1.174) ;
-o-transform: rotate(0deg) scale(1.174) ;
-ms-transform: rotate(0deg) scale(1.174) ;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
-moz-box-shadow: -1px -1px 75px #000000;
-webkit-box-shadow: -1px -1px 75px #000000;
box-shadow: -1px -1px 75px #000000;
}

Para usar o efeito, cole num gadget de HTML/JavaScript:

<a href="SEULINK" title="NOME"><img src="LINK DA IMAGEM" class="team" /></a>

Espero que tenham gostado, se usarem creditem, e não repassem, por favor.

Beijos, até mais!

Feliz ano novo!

Remover a "Tecnologia da Blogger"

Oi diamantes ! Desculpem ter ficado este tempo todo sem postar aqui, estou quase de férias.

Hoje trago um tutorial para tirar a "tecnologia da blogger". Não precisamos desta frase para nada, não é?

Vá no seu html > pressione ctrl+f > pesquise por <b:section class='foot' id='footer-3' showaddelement='no'>

Troque o no por yes

Abaixo encontrará <b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Troque o true por false

Agora é só ir ao esquema, ir ao gadget "Attribution" e clicar em remover. Prontinho :)

Backgrounds "inteiros" e como usar

Ooi gente! Como vão vocês? Então, eu queria avisar que minha semana de provas já acabou, e eu já estou mais disponível, não acabei ainda de estudar, pois tenho a segunda semana de provas, e última (todo bimestre tem duas, ou seja, um por mês).

Hoje, estava sem ideias, e lembrei que tenho uns backgrounds que fiz quando estava viajando, então trouxe eles, e vim ensinar como faz também.

Todos os fundos têm 1270 x 716, pois são as dimensões do meu computador, se os de vocês tiverem outras, me digam que eu faço.

Como fazer:

Vá em Modelo > Plano de Fundo > Faça upload do seu fundo, e deixe as outras opções assim:

O seu background ficará mais ou menos como o daqui do blog.

Espero que tenham gostado!

Beijos, boa noite!

Modificações no link hover

Olá diamantes ! Vou passar a postar às terças e sextas.

Hoje trago um tutorial, que permite alterar o link hover (em vez de ter sublinhado, pode ter negrito, itálico...)

Primeiro, procure por a:hover {

O código que irá aparecer será este :

a:hover {

  text-decoration:underline;

  color: $(link.hover.color);

}