Colocando sombra no blog

http://weheartit.com/entry/62863156/via/Erica_Judd

OOOOI!!! Trago um tutorial para explicar  como e onde aplicar sombras no layout do blog. Os códigos são simples. Pode colocar no titulo das postagens, gadgets, área das postagens, sidebar, imagem. É muito legal pois deixa o blog com um efeito a mais *-*
Dica: O código que vamos mexer está em azul, geralmente quando você abre "Editar HTML" aparece as letras de outras cores. A explicação dos códigos está no fim do post.

Texto do post com sombra
Vá em modelo, editar HTML, aperte ctrl + f e escreva

.main-inner .column-center-inner {

 Apos achar o código acima, cole em baixo  isto:

text-shadow:#767676 0px 0px 1px;

Em texto determinado aplique este código (Por exemplo no HTML de uma postagem):

<div style="background:#E6E6FA; color:#4682B4; text-shadow: 1px 1px 0px #000;">Texto Aqui</div>

Sombra no titulo do post

Procure por

h3.post-title {

e adicione a parte destacada

h3.post-title {
font: $(post.title.font);
color: $(post.title.text.color);
text-shadow:0px 2px 1px #DDDDDD; }

Sombra na sidebar

Procure por

sidebar .widget {

Cole o código destacado

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
box-shadow: 1px 4px 19px 2px #CFCFCF;}

Sombra nos links

Procure por

a:link {

coloque a parte destacada

a:link {
  text-decoration:none;
  color: $(link.color);
text-shadow:#767676 0px 0px 1px;}

Explicando:

text-shadow:0px 2px 1px #DDDDDD; 

Roxo: Posição da sombra

Azul: Borrado da sombra

Verde: Cor em HTML da sombra.
Para você saber as cores, clique aqui.

Créditos: Extras Place Fame, Other Things Attitude Included, Mundo Blogger.

Beijos

Erica Lima♥

Personalizar sidebar e áreas das postagens

http://weheartit.com/entry/77316261/via/Erica_Judd - OBS: Imagem colorida nem combinou com o lay do blog u.u kkk

Hey! Que tal mudar um pouco sua sidebar (Sidebar é a barra lateral, onde ficam os gadgets) e a área dos post? É legal para mudar um detalhe que faz toda a diferença!

Primeiro em que saber de que lado é a sua sidebar para personaliza-la

Sidebar direita

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Sidebar esquerda

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

3 anos de blog + Tutorial Like Box

Olá pessoas lindas. Hoje o blog faz 3 anos! Me lembro de 3 anos atrás eu procurando algum lugar para colocar meu blog. Nem sabia o nome, foi meio que na hora que veio o nome "Garotas e Derivados".
Enfim, esse blah blah blah vocês estão lendo já por 3 anos. Vamos a parte legal ♥

PRESENTE! \Õ/

Vou postar tutoriais para vocês, DIY e quem sabe, até um layout lindo não saia por ae? EM BREVE!

Enquete para comprovar os mais pedidos.

A Jhessica Carvalho pediu para eu ensinar como personalizar a Like Box, isto é, a caixinha de curtir no face que fica no blog. Primeiro de tudo você precisa ter uma página no Facebook. Quer criar uma página? Clique aqui e segue o tutorial. Depois da página pronta, ela tem que estar no blog, clique aqui e fique sabendo. Se você sabe como, vá logo no lugar que "fabrica" estas caixinhas, para isto clique aqui.

Vai ficar assim a caixinha, com fundo *-*

Oi Nanny, Sabrina, Ana, Alane, Thayná, Tatyane e Isa *_*

Todos os créditos ao Trechy Teen. Vamos ao tutorial. Se você quiser saber da forma que a Candy fez, clique aqui para ver o tutorial original.

Personalizar titulos dos gadgets

http://weheartit.com/entry/29565973/via/Erica_Judd

Olá! Acho que todos já perceberam a troca de layout do rosa simples para o azul lindo e maravilhoso! Esse eu peguei o modelo limpo do Blogger e bandei bala! O antigo estava dando muitos erros em não reconhecer CSS.
Eu já tentei levar um blog de tutoriais pra frente, só que desistir no começo do caminho. Fazendo este novo layout para o meu blog eu descobrir muitas coisas interessante de HTML que eu posso postar aqui. Não vai ser tão frequentes, mas espero ajudar todos vocês ♥
Começando com como personalizar titulo dos gadgets. Não sei se todos conhecem, mas para os que não sabem, vai ser uma boa ajuda!

Personalizar titulo dos gadgets

Vá em "Modelo", clique em "Editar HTML", e aperte ctrl + f e escreva /* Headings

Você vai encontrar algo parecido com isto:

/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

Você deve colocar o código para modificar entre as partes que esta em roxo.

Mas como eu modifico Erica?

Se você não sabe muito como modificar eu vou te dar uma base e explicar.

h2 {
font: $(widget.title.font); /* Fonte deve ser modificada pelo designer do modelo\*
text-align: center; /* onde o texto vai ficar alinhado\*
color: #FF1493; /*cor da fonte\*
text-shadow: 0px 0px 3px #6a6a6a; *\Sombrado titulo/*
background-image: url (url_da_imagem_de_fundo); *\ se quiser colocar fundo\*
border: 1px solid #ff6699; /*Modifique a cor, tamanho e estilo da borda\*
margin: 1px;
padding: 2px; */ tamanho do fundo/*
}

Explicação:

Agora você pode mudar como quiser e conseguir vários efeitos diferentes.

font: Aconselho deixar assim para mudar no "Designer do modelo", assim a fonte é padrão e não corre o risco dela não aparecer.

text-align: Aqui você muda a posição da fonte. Lembrando que right é direita, left é esqueda e center é centralizado.

color: Cor da fonte em HTML. Código aqui.

text-shadow: É a sombra da fonte, você pode mudar onde esta em "0" e conseguir varias sombras diferentes.

background-image: Se você quiser um fundo é só colocar o url da imagem ali. Mas se quiser uma cor troque por " background: #FF1493; "

border: É a borda que vai ficar em volta do titulo. Ela pode ser solid que é a borda solida, dotted que é pontilhada e dashed que é tracejada. Você também pode escolher onde a borda vai ficar:

border-top é em cima

border-bottom é em baixo.

border-left é do lado esquerdo.

border-right é do lado direito.

Se você quiser a borda a cima é só trocar "border" por "border-top", por exemplo.

Pra mudar quando passa o mouse é só acrescentar em baixo, este código:

h2:hover {
color: #FF69B4; /*cor da fonte\*
background: #0000;
}

Ficando assim:

h2 {
font: $(widget.title.font); /* Fonte deve ser modificada pelo designer do modelo\*
text-align: center; /* onde o texto vai ficar alinhado\*
color: #FF1493; /*cor da fonte\*
text-shadow: 0px 0px 3px #6a6a6a; *\Sombrado titulo/*
background-image: url (url_da_imagem_de_fundo); *\ se quiser colocar fundo\*
border: 1px solid #ff6699; /*Modifique a cor, tamanho e estilo da borda\*
margin: 1px;
padding: 2px; */ tamanho do fundo/*
}
h2:hover {
color: #FF69B4; /*cor da fonte\*
background: #0000;
}

Lembrando que você pode acrescentar varias outras coisas no efeito hover.

Falta pouco para mil seguidores. Muito obrigada ♥

Uma musiquinha meio antiga para vocês

Bezos, Erica Lima ;*

Eu quero um layout novo! - Aprenda a fazer

Sexy And I Know It *Todos dançam*

Hey! Hoje o post é especial para quem esta afim de mudar o layout do blog ou apenas dá uma 'passada de tinta'. Eu não vou passar um mega tutorial pois tenho certeza que isso vocês já viram por aí, vou postar links de tutoriais para você seguir e fazer o seu lay do seu estilo e gosto.

A base 

Esta é a parte para quem vai ainda organizar o modelo. A titia Erica tentou tirar print ok?!

Modelo Travel (Para ver clique)

Largura do blog (Clique para ver)

Tirar largura entre gadget e postagem

Tirar largura entre paginas e postagem

Retirar navbar e espaço

Tirar TOTALMENTE o espaço entre cabeçalho e topo de página *Blogueiros comemoram*

Retirar fundo do rodapé e espaço

Personalizar rodapé

Tutorial completo (recomendo)

Blog igual Tumblr

Sidebar ( Barra lateral)

Imagem no fundo da sidebar

Sidebar mais para cima ou para abaixo

Separar gadgets

Colocar titulo da sidebar em caixinhas

Arredondar parte de cima da sidebar

Coisinhas

Aqui eu poderia esta listando vááários tutoriais, mas acho melhor postar o link da pagina de Goodies de alguns blogs do que postar 3000 links haha

Spazio DM

Other Things Attitude Included

Place Fame

Soul Collide

Crazy HTML

Alma e Coração

Sweet Poison

Material Extra

Para quem tem noção de como fazer um layout nem vai ser muito útil, mas para quem quiser saber um pouco mais ou aprender mesmo a mexer, vale a pena tentar e fuçar blogs de tutoriais, por que não é 'parado'  que você aprende a fazer layouts. Por exemplo eu, não fazia a menor ideia do que era HTML, mas entrei em blogs e fui mexendo em tudo para deixar a roupa do meu blog cada vez melhor *-*

Para quem 'anda' por muitos blog's por aí, percebeu que os cabeçalhos com ilustrações é que esta dominando. Então invista no layout com ilustrações/gráficos e simples.

Bezôôs,

Ttitia Erica Judd ♥

com muita preguiça de fazer lição çç

Como fazer um Menu Cute

Hey! Quem mexe em HTML de tumblr ou tem uma noção sobre isto, sabe que vários tutoriais de tumblr funciona no blogger, basta saber onde colocar o codigo no blogger *-*
Eu já tentei colocar este menu cute no blog, só que eu não conseguia, de algum jeito dava erro. Hoje, visitando o tumblr Desings Forever, encontrei um menu e resolvir testar no meu blog de testes e deu certo.
Para visualizar o menu clique aqui.

Meu menu ficou assim

Fica muito fofo e é bem fácil de colocar no blog e modifica-lo. Vamos aprender? *o*
Aperte Ctrl+F e escreva

]]></b:skin>

Acima desta tag coloque a primeira parte do codigo que é quando o menu esta estatico

.menucute {
margin-bottom: 1px;
display: block;
padding-bottom : 2px;
font-size: 10px; /*** Tamanho da fonte **/
font-family: verdana;
letter-spacing: 0;
line-height: 15px;
border-bottom: 1px solid #eee; /*** Cor e estilo da linha **/
vertical-align: middle;
text-indent:5px;
text-indent: 5px;
background: url('http://drikoti.net/Goodies/Favicons/Gifs/044.gif')no-repeat left; /*** url do seu mini gif ***/
background-repeat: no-repeat;
padding-left: 10px;
text-decoration: none;}

Agora coloque em seguida este codigo que é quando o mouse esta em cima do menu

.menucute:hover {
margin-bottom: 1px;
display: block;
font-size: 10px;  /*** Tamanho da sua fonte quando o mouse esta em cima ***/
font-family: verdana;
letter-spacing: 0;
line-height: 15px;
border-bottom: 1px solid #eee;  /***Cor e estilo de linha quando o mouse esta em cima ***/
text-indent: 5px;
vertical-align: middle;
background: url('http://drikoti.net/Goodies/Favicons/Gifs/022.gif')no-repeat left; /*** url do mini gif quando o mouse esta em cima ***/
background-repeat: no-repeat;
padding-left: 10px;
text-indent: 5px;
text-decoration: none;
padding-bottom: 2px;}

 Explicando o que esta em vermelho
1 px é a espessura da linha que fica em baixo
Solid é a borda que no caso é a solida, a 'reta', a 'normal'
#eee; é a cor da linha

Tipos de borda: 

Existem algumas bordas, mas as mais conhecidas são a Solid é a borda sólida. Se você quiser pontilhada, use dotted. Se quiser tracejada, use dashed. E se quiser dois traços sólidos, use double (O valor pra ficar dois traços precisa ser a partir de 3px)

Alguns mini gifs você pode encontrar aqui, aqui, aqui.

Tabela de cores aqui

Obs: Não se esqueça de apagar o que esta em lilas ok?! *-*

Como colocar no blog?

Até agora você colocou o codigo no HTML do seu blog. Para que funcione você vai em design e adiciona um gadget HTML/Java Script

Se você quiser que o menu seja em link coloque este codigo:

<div class="menucute"> <a href="LINK_AQUI">TITULO </a></div>

Se você apenas quiser  apenas escrever alguma coisa coloque:

<div class="menucute"> ESCREVA_AQUI</div>

Se quiser mais links só ir repetindo o codigo morzim *-*

Creditos: 
[www] Explicação dos tipos de borda e imagem
[www] Tutorial do menu
 Espero que tenham gostado *---*
Duvidas?

Bezôôs,

Erica Judd ♥

Tirar fundo do rodapé do blog [Atualizado]

Hey! Primeiro tutorial do blog G&D. Vou ensinar a tirar o fundo do rodapé do templante vigem, que é muito fácil de fazer. Veja na imagem:

É super fácil, é só apagar =)
Vá em Design > Editar HTML > Aperte ctrl + F e procure por

.footer-inner

Vai aparecer alguns resultados, mas apague igual da imagem abaixo:

Não precisa apagar o código todo, é só deixar assim:.footer-inner {
margin: -40px;
  background: ;
}

Onde margin: -40px; é o tamanho do fundo.

Visualize, se gostar clique em 'Salvar Modelo'.
Só testei no modelo viagem ok?! *-*

Gostaram do novo lay? Eu amei *o*
Na minha opinião foi o melhor lay que eu já fiz. O que acharam? *--------*

Bezôôs,

Erica Judd ♥

Google Reader - Deixe as novidades virem até você

Oi gente. Eu tinha um serio problema em ficar olhando todos os blog's que eu sigo nas atualizações do blogger e ter que ficar abrindo em outra guia, isto seriamente me dava uma preguiça de ver os posts e comentar. Em um belo dia eu estava procurando uns negocios de 'RSS' eu achei no blog Just Lia um post sobre Rss, Freeds e o que fala do Google Reader. 

Mas, o que é Rss?

Definição da Lia:  Um tipo de tecnologia que modifica o texto de um site ou blog para que ele seja lido por um agregador de notícias, e não pelo navegador comum. Pra usar o RSS você precisa desse agregador e a vantagem, é que dessa forma você recebe as atualizações (feeds!) de diversos sites diferentes em um lugar só, sem precisar visitá-los!

Não entendeu? Tipo o Google Reader reune todos os blogs que você segue em um só lugar. Lá você pode ver os posts completos (Com cores e imagens *o*). Se você quiser comentar é só abrir a pagina em outra guia. 

Como ter?

Eu quando abrir o site já apareceu tudo certinho (Eu estava logada no blogger). Mas basta ter um Gmail e se conectar ao Google Reader *--*

Parece um pouquinho complicado, mas na pratica é facinho. Eu uso somente para ver as atualizações dos blogs que eu sigo, mas tem outras útilidades *o*

Não entendeu? é só clikar aqui  e veja lá no blog Just Lia que esta bem mais explicado do que aqui *aloka*

O meu quando entro pelo Google Chrome fica em ingles e quando entra pelo internet explore fica em portugues. Estranho né?! rsrs

1- Onde você favorita seus posts.

2- Nome dos posts

3- Clique ali e vá direto para a pagina do blog

4- Nome e link do blog

5- Nome de quem postou

6- Ali vai esta todos os posts que você favoritou 

7- Blogs que você segue

8- Nome de blog em negritos indica que você não viu aqueles posts pelo Google Reader e entre parentes é o numero de posts.

9- Pagina inicial/Todos os itens.

Facinho né?! Para acessar o Google Reader é só clikar aqui. Ele vai pedir o email e senha. Escreva o que você entra no blogger. Se entrar direto você já esta logado *Ava*

Espero que para muitos este post sirva para alguma coisa suahsuhushu. Embora não esteja tão explicado assim. hahaha

Bezôôs,

Erica Judd ♥