Blog De Teste

terça-feira, 29 de janeiro de 2013

Link "Leia Mais" com fundo hover

Hello babies! Quero começar me desculpando pelo sumiço, to trabalhando bastante no novo layout do blog (que ta ficando muito lindinho modéstia parte s2 ). Para compensar esse tempo todo sem posts vim trazer um tutorial bem rápido, porém pouco conhecido, que fica lindo! Todos aí já estão cansados de leia mais com imagem, admitam. Então hoje vamos aprender a colocar um fundo colorido e com efeito hover. Assim:

Antes de começar o tutorial quero dar os créditos ao blog lindo da Tete, o Sweet Cherry! Ele é nossa fonte de hoje :3 -com algumas alterações minhas, não esqueçam hihi-

Faça o caminho da roça, (como diz a Gizaa) e vá em Design > Editar HTML > Ctrl+F (na nova interface: Modelo > Editar HTML > Prosseguir > Ctrl+F) E procure por: ]]></b:skin> logo acima cole:

.jump-link{
float: right; /* no lado direito ou esquero, pode mudar para left */
background-color: #FF80FF; /* cor do fundo */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento emcima */
font-size: 10pt; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: center; /* alinhamento do texto */
width: 100px; /* largura do fundo */
opacity: 0.7; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração da volta do hover */
border-radius: 20px;
}

.jump-link:hover{
background-color: #CFD9F6; /* cor do fundo com o mouse em cima */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento em cima */
color: #000000; /* cor da fonte */
width: 100px; /*largura do fundo com o mouse em cima */
opacity: 1.0; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração do hover */
text-decoration: none; /* sem sublinhado, negrito, itálico ou tachado */
}

As instruções estão no código, entre os /* */ é só mudar de acordo com o desejado.

Obs: - Mude a largura de acordo com o tamanho do seu texto, 100px se encaixa muito bem para "leia mais", se for um maior como "Mais informações »" 110px se ajusta direitinho!

Big Tutorial: Efeito degradê com CSS3

Oi oi gente, sabe aquele efeito gradiente (hiper mega lindo) que fazemos no photo filtre e no photoshop? Agora você pode traze-lo pra seu blog sem ter que criar e hospedar imagens, apenas com CSS, no caso, CSS3. Bora ver como?

Vou deixar o código primeiro e depois como aplicar ele em diversos lugares ok? (O que não quer dizer que você precisa aplicar em todos lugares que eu ensinar -até porque demais fica estranho- faça só onde quiser ok? u.u)

Gradiente horizontal (exemplo aqui):

background: #CCCCCC; /* browsers sem suporte a css3 */

background: -webkit-gradient(linear, left top, right top, from(#CCCCCC), to(#FF0080));/* webkit browsers */

background: -moz-linear-gradient(left, #CCCCCC, #FF0080);/* firefox3.6+ */

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCCCCC', EndColorStr=' #FF0080');/* IE */

Gradiente vertical (exemplo aqui):

background: #CCCCCC; /* browsers sem suporte a css3 */

background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#FF0080));/* webkit browsers */

background: -moz-linear-gradient(top, #CCCCCC, #FF0080);/* firefox3.6+ */

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CCCCCC', EndColorStr=' #FF0080');/* IE */

Mude as cores (#CCCCCC e #FF0080) como preferir com essa tabela aqui: [www]

Aplicar no fundo do titulo da postagem

Vá em design > Editar HTML > Aperte F3 ou Ctrl+F e procure por:

/* Posts

E antes de fechar } cole um dos código que deixei lá no começo do post (degradê horizontal ou vertical) e faça as alterações na cor como quiser.

Poderás adicionar uma borda arredondada, colando abaixo do código do degradê um desses aqui:

Bordas arredondadas em todos os cantos:

border-radius: 10px;

Bordas arredondadas no topo do lado esquerdo e na parte de baixo do lado direito.

border-top-left-radius: 10px;
border-bottom-right-radius: 10px;

Aplicar no fundo do gadget (cada gadget em uma caixinha separada)

Vá em design > Editar HTML > Aperte F3 ou Ctrl+F e procure por:

/* Widgets

E antes de fechar } cole um dos código que deixei lá no começo do post (degradê horizontal ou vertical) e faça as alterações na cor como quiser.

Para aplicar bordas arredondas é o mesmo procedimento que deixei no tutorial acima (escolha uma das bordas e cole abaixo do código do degradê)

Aplicar no fundo dos títulos da sidebar (créditos: Spazio DM)

Vá em design > Editar HTML > Aperte F3 ou Ctrl+F e procure por ou algo parecido:

.footer-inner .widget h2,
.sidebar .widget h2 {
padding-bottom: .5em;

Logo abaixo cole um dos código que deixei lá no começo do post (degradê horizontal ou vertical) e para aplicar bordas arredondas é o mesmo procedimento que você já conheceu ali em cima -hihi-

Dica da Anny: Você pode aplicar os códigos do efeito gradiente em qualquer lugar que quiser, é só saber onde fica o código do elemento que você quer adicionar o efeito e colar o código abaixo dele.

OBS: Testado somente no template Travel!

Como colocar imagem no rodapé do blog.

Hi girls! Hoje venho com um tutorial suuper legal (eu achei pelo menos rsrs) Estava procurando a um tempinho e ontem do nada achei, lógico que fiquei muito feliz e vim aqui testar, como gostei do resultado vim logo compartilhar com vocês! Quero começar creditando o blog Garotas Complicadas pois foi lá que aprendi o tutorial. Se você ainda está boiando, o tutorial vai ensinar a por uma imagem no final do blog, uma continuação das colunas e da área de postagem, você pode enfeitar ao seu gosto, pode por exemplo arredondar os cantos e escrever alguma mensagem e tal. O resultado será semelhante ao do Go Imagine, veja só:

A imagem ficou meia embaçada mas acho que dá para ter uma ideia do resultado, se quiser vá descendo o blog e veja certinho. Clique em "leia mais" para ler o tutorial.
Primeiramente você precisará fazer uma imagem. Você tem que saber a largura da área das postagens e da barra lateral, para não ficar desencaixado depois.

Não sei se é só no meu blog que acontece mas quando eu quero fazer uma imagem continuando as colunas (rodapé e cabeçalho) eu tenho que fazer a imagem 20px menor que a largura total do blog se não não encaixa, por exemplo: Meu blog tem a largura de 1040px então faço as imagens com a largura de 1020px.

Fiz um mini tutorial por imagem para os mais iniciantes de como fazer a imagem do rodapé, só não reparem é bem meia boca rsrs. Clique nos links abaixo para ver as imagens.

Obs: Na imagem tutorial eu disse para fazer a imagem com a largura 20px menor que a largura do blog, mas se você quiser tente primeiro fazer a imagem com a largura do seu blog mesmo e se não der certo faça 20px menor.

Parte 1 Parte 2

Logo após fazer sua imagem, salve e hospede em algum local.

Sem mais delongas, vamos pro tutorial:

Vá em Design > Editar HTML, e marque a opção "expandir modelos de widgets" . Pressione Ctrl + F e procure por  Logo ACIMA adicione o seguinte código:

<center> <img height='altura' src='Url da sua imagem' width='largura'/> </center>

Onde estiver "altura" troque pela medida de altura da sua imagem, a minha é 100 e acho que é um bom tamanho se você estiver indeciso.
Troque também "Url da sua imagem" pela url (link) da sua imagem. Meio obvio né? rsrs
E onde estiver "largura" substitua pela medida de largura da sua imagem.

Bom gente, era isso, espero que tenham entendido bem. Qualquer duvida pergunte por comentário!

Barra de rolagem personalizada (redondinha) - Atualizado!

Gente eu já vi muitos tutoriais ensinando a personalizar a barra de rolagem mas ainda não havia achado um de como deixar ela "redondinha" e com fundo como a do Cherry Bomb sabe? Mas dei mais uma procurada e achei no tumblr I love themes só tive que mudar o local de onde colar o código, afinal, onde eu achei o tuto era um tumblr e os códigos são diferentes e tal. O código tem os créditos mas não vamos tirar por questão de respeito ao trabalho dos outros ok? Vamos lá então:

Primeiramente abra seu blog, vá em Design, depois em Editar HTML. De Ctrl + F para abrir a caixinha de busca e procure pela seguinte tag:

]]></b:skin>

Logo ACIMA cole o seguinte código:

/********* Rolagem Por QuinzeParaMeiaNoite.tumblr.com *********/
/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background-image: url('URL DA IMAGEM');
background-color:#fff; height:100px;
-webkit-border-radius: 2ex;
border-top-left-radius: 3em;
border-top-right-radius: 3em;
border-bottom-left-radius: 3em;
border-bottom-right-radius: 3em;
-webkit-box-shadow:0 0 1em #eee;}

/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {background-image: url('URL DA IMAGEM');
::-webkit-scrollbar-thumb:horizontal {background-image: url('URL DA IMAGEM');
background-color:#fff; height:10px;
-webkit-border-radius: 2ex;
border-top-left-radius: 3em;
border-top-right-radius: 3em;
border-bottom-left-radius: 3em;
border-bottom-right-radius: 3em;
-webkit-box-shadow:0 0 1em #eee; }

/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {height:10px; width:20px; background-color:#fff;-webkit-box-shadow:0 0 1em #eee;}

/********* Fim da Rolagem, não retire os créditos *********/

Atualização: Como não ficou muito claro o que é barra fixa e barra móvel (logo abaixo) eu fiz uma imagem ilustrando:

Bem mais claro agora não?

Agora vamos entender o código para podermos personaliza-lo:

URL DA IMAGEM - Se você quiser por uma imagem de fundo troque essa frase pela URL da sua imagem.

#fff - É a cor da barra que rola. Caso você não queira por uma imagem de fundo, mude para a cor que você quiser consultando essa tabela.

#fff - É a cor da barra que NÃO rola.

#eee - É a cor da sombra das caixas. Mude para as cores desejadas.

width:20px - É a largura da barra. Mude o 20 para o valor desejado.

- Se você quiser colocar um fundo na parte fixa, como no Cherry Bomb troque essa tag abaixo (que se encontra na mesma linha de width:20px)

background-color:#fff

Por essa aqui:

background-image: url('URL DA SUA IMAGEM AQUI');

Bom, era isso espero que tenham entendido e gostado.

Tutorial: Ocultar a navbar e mostrá-la ao passar o mouse

Hi people! Quero pedir desculpas pelo tempo que passei sem postar, sabe quando parece que as coisas que eram pra acontecer ao longo de um mês inteiro acontecem em dias seguidos? Pois é, minha semana foi assim :s
-Ta Ani, para de ficar enrolando e volta logo pro post!

Ok, hoje eu vou postar um tutorial muito simples e útil, sabe aquela barra lá no topo do blog onde você faz o login, cria uma nova postagem e tal? Que ela não é muito agradável aos olhos todo mundo sabe, mas muitos tem
um certo receio de tirá-la por poder dificultar o acesso aos "atalhos" dela. Confesso que eu sofria disso kkk' mas hoje eu estava pesquisando e achei um tutorial ensinando a ocultar e mostrá-la novamente quando passado o mouse no lugar onde ela fica, lembrando que os créditos são todos do blog Bloggando na web.

Clique em "Leia Mais" para ver o post completo.

Então, vamos começar?

1. Abra o seu blog, faça o login e vá em Design > Editar HTML

2. Pressione "Ctrl+F" para abrir a caixa de pesquisa e procure pelo seguinte código:

]]></b:skin>

3. Logo acima deste código, adicione este outro código:

#navbar-iframe {
opacity:0;
}

#navbar-iframe:hover {
opacity:1;
}

4. Visualize e se estiver tudo certo salve (:

Viu só? Simples, fácil e rápido. Espero que tenham gostado tanto quanto eu *-*

Ah, só um aviso, o código não funciona no Internet Explorer ):

Caixa de busca personalizada

By: Melina Souza

Alguém aí concorda comigo que caixas de pesquisa são de extrema necessidade em um blog? Bom, acho que todos concordam, mas vamos combinar que a caixa de busca do blogger não favorece muito um layout, já que é bem feinha né rsrs

Há bastante tempo vi um tutorial de como fazer uma barra de busca no blog da Gizaa, e acabei adaptando o estilo que ela usou no tutorial ao código da barra que eu já usava, e deu nisso que eu vou ensinar! rs

Bem, é super simples, antes de começar a mexer com html, vá em Layout > Adicionar um gadget > Escolha o de HTML/JavaScript. Dentro desse gadget cole:

<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 trocar a palavra Go pela palavra que desejar, é ela que fica dentro do botão pra pesquisa.

Agora entre no seu HTML (Modelo > Editar HTML) e procure (F3) por }]]></b:skin> e acima dele colar o seguinte código:

.search{ /* Geral */
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce */
font-family: Tahoma, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{ /* Barrinha onde se digita */
height: 18px; /* Altura da barrinha */
width: 230px; /* Largura da barrinha */
margin-left:0px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
border:solid 1px #ddd; /* Borda */
padding:3px 5px;
border-radius:2em; /* Bordas Arredondadas */
box-shadow:0 1px 0px rgba(0,0,0,.1); /* Sombra interna */
background: #fff; /* Cor do fundo */
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{ /* Botão */
border:0 !important;
float: right;
background: #D9D9D9; /* Cor do fundo do botão */
cursor: pointer;
color:#fff; /* Cor do texto */
padding:0 5px 2px 5px;
height:26px; /* Altura do botão */
margin-top: -20px; /* Margem superior, edite se precisar, - sobe e + desce */
margin-right: -35px; /* Margem direita, edite se precisar */
border-radius:25px; /* Bordas Arredondadas */
box-shadow:0 0 2px #aaa; /* Sombra */
text-shadow:0 -1px #aaa; /* Sombra no texto Go */
}
.searchbut:hover { /* Botão Hover */
background:#F3A7C2; /* Cor do fundo do botão hover */
}

Visualize e se estiver tudo certo salve!
Em breve trago o tutorial de como fazer os balões de comentários que estão me pedindo tanto! Kisses :*

sexta-feira, 4 de janeiro de 2013

Bla bla bla

http://cherry-liah.blogspot.com.br/

http://goimagines.blogspot.com.br/

http://perfectnaiveforever.blogspot.com.br/

http://laahsapphire.loveblog.com.br/348955/Imagens-fofas-para-tumblr/?nextyear=1&month=02&year=2017

http://laahsapphire.loveblog.com.br/