Big Post: Utilitários e Tutoriais

Ash Lindaaaaaa <3

Oláa Gente!!

Quero avisar que depois desse post, vou ficar mais afastada da blogosfera. Tenho que me preocupar mais com a escola, por isso vocês verão poucos posts meus aqui, de Nanda eu não sei. Tá tudo muito puxado, tenho um teste surpresa na próxima semana, teste oral, dia 09 já tenho prova, e meu niver tá chegando, não sei se disse, então me dêem um livro ok?

Trouxe um big post, com tutoriais e utilitários. Sobre o lay free, por eu estar muito afastada, talvez demore muito para trazer mas vou ao máximo tentar tá bom? Meu presentinho para vocês. Agora vamos ao big post :)

Pera... que animação a minha né? Vamos melhorar:

EEEEEEEEBAAAAAAAAAA TEMOS 1 ANO NA BLOGOSFERAAAAAAAA!!!! UUUUUUUUHUUUUUUUUUUUUUUUUUUUUUUU VAAAAALEEEEUU LEITORES LINDOS DO MEU CORAÇÃO!!!!

Imagem para Afiliados - Taylor Momsem

Imagens para Afiliados - Variadas

Ilustrações para Post: Lily Collins

Avatares - Ashley Greene

Avatares - Debby Ryan

Ilustrações para Post: Kristen Stewart

Tutorial - Caixa de Pesquisa Personalizada (?)

Vamos aprender a fazer uma caixa de pesquisa/busca personalizada? É simples!

O resultado é esse:

Clique para ver em tamanho original

Primeiro adicione um gadget Javascript com esse código:

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

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

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

</form>

Você pode mudar o GO por Pesquisar, Ir, qualquer coisa ;)

Vá em editar HTML, clique em F3 ou  Ctrl + F e pesquise por ]]></b:skin> e abaixo disso coloque:

.search{ /* Nesta parte não mude NADA */

float: left;

margin-left: 30px;

font-family: Tahoma, Tahoma;

}

.searchbar{

height: 18px;

width: 140px; /* Largura */

margin-left:0px;

margin-top:-45px;

margin-bottom:-18px;

color: #FF84AD; /* Cor que aparece quando digitamos algo */

border:solid 1px #ddd;

padding:3px 5px;

border-radius: 10px;

box-shadow:0 1px 0px rgba(0,0,0,.1);

background: #fff; /* Cor de fundo, não precisa mudar */

background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#ededed));

background:-moz-linear-gradient(top, #fff, #ededed);

filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');

-ms-filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')

}

.searchbut{

border: 2px solid #FF84AD; /* Borda do botão normal, apague se não quiser*/

float:right;

background: #FFF; /* Fundo do botão normal */

cursor:pointer;

color:#FF84AD; /* Cor da letra do botão normal */

padding:0 5px 2px 5px;

height:26px;

margin-top: -20px;

margin-right: -35px;

font-family: Tahoma, Tahoma;

border-radius:25px;

-webkit-transition-duration: .5s

}

.searchbut:hover {

background:#FFF; /* Fundo do botão Hover */

color: #734836; /* Cor da letra do botão Hover, apague se não quiser */

border: 2px solid #734836 ; /* Borda Hover */

-webkit-transition-duration: .5s

}

Faça as alterações necessárias, vizualize se estiver tudo ok, salve e pronto!

Tutorial - Efeito Crossed (?)

O Efeito Crossed é muito fofo! É o que eu uso aqui. Para ver ele clique aqui.

Lindo não?

Vá em Editar HTML e procure pela tag ]]></b:skin> e acima disso cole:

.crossed{

 position: relative;

display: inline-block;

align: center;

width: 110px; /*largura*/

height: 110px; /*altura*/

text-align: center;

overflow: hidden;

border: 3px solid #cbafa5; /*cor da borda, senão quiser, tire isso*/

}

.crossed img {

z-index:1px;

background: #fff;

width: 110px;/*largura*/

height: 110px;/*altura*/

align: center;

}

.crossed .description{

position: absolute;

z-index:2px;

width: 110px;/*largura*/

height: 110px;/*altura*/

margin-top:0px;

margin-left:0px;

background: #fff; /*cor do 1º fundo, a parte branca da preview onde está escrito algo aqui*/

color: #000; /* cor do texto do fundo branco*/

text-shadow: 1px 1px 1px #303857;

opacity: 0.0;

-webkit-transition: all 1.0s ease-out;

-moz-transition: all 1.0s ease-out;

}

.crossed:hover .description  {

opacity: 0.75;

width: 110px;/*largura*/

height: 110px;/*altura*/

margin-top: -114px;

margin-left:0px;

}

.crossed .bla{

z-index:3px;

width: 110px;/*largura*/

height: 110px;/*altura*/

margin-top:-140px;

margin-left:0px;

background: #ABA4A1; /*cor do 2º fundo, a parte cinza da preview onde está escrito algo mais aqui*/

color: #000;/* cor do texto do fundo cinza*/

text-shadow: 1px 1px 1px #303857;

opacity: 1.0;

-webkit-transition: all 1.0s ease-out;

-moz-transition: all 1.0s ease-out;

}

.crossed:hover .bla  {

position:relative;

transform: ease-out;

opacity: 1.0;

width: 110px;/*largura*/

height: 110px;/*altura*/

margin-top: 38px;

}

Está tudo explicado ai, é só fazer as alterações. Sugiro que use imagens tamanho 110x110, mas caso não seja, mude todos os width e os heigth e tirar esse mesmo valor dos dois magin-top. Por exemplo, você mudou os width e os heigth de 110 para 150, ou seja, acrescentou 40 px. Você terá de acrescentar 40px nos 2 margin-top negritados, ou seja, ficará  margin-top: -154px e margin-top: 78px.

Depois adicione um gadget HTML/Javascript e cole:

<div class="crossed"><img src="http://1.bp.blogspot.com/-SHPxd2v6NBk/UMZZyZ3l7VI/AAAAAAAAEyg/j79aKkJgcqQ/s1600/zzzzzzzzzzzzz.png" /><div class="description"><br/>Algo aqui<div class="bla"> Algo mais aqui</div></div></div>

Onde está em negrito, cole o link da sua imagem  onde está sublinhado você pode escrever qualquer coisa!

Legal né? Os créditos dos tutoriais estão ao lado do nome. Os goodies eu que fiz então por favor creditem!

Bem é isso! Até logo, espero que tenham gostado, se quiserem alguma coisa podem pedir na CBOX.

Beijos, Gabi