Seguidores

Pesquisar este blog

sexta-feira, 31 de agosto de 2012

9

Como por dois backgrounds no blog



Olá minhas lindas (os), como vão? Eu vou bem! Hoje vou ensinar um tutorial muito bacana e facio de aprender, o tutorial de hoje é como colocar duas backgrounds no blog, então vamos lá  >.O ?!


1°) Vá em modelo > Editar HTML.
2°) Aperte Ctrl+F e procure por body { :
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
 3°) Apague tudo e coloque no lugar este código:
body, html {
 height: 300px;
 margin: 0;
 padding: 0;  }

body {
 font: $(body.font);
color: $(body.text.color);
background: url("URL do 1º background") repeat; }

html {
 background: url("URL do 2º background") repeat; }
Altere o número em vermelho (300) pela altura em pixels do primeiro background. Depois é só substituir as urls das duas imagens nos locais indicados.

segunda-feira, 23 de julho de 2012

3

Colocando imagem antes do marcador.


Para colocar uma imagem antes de "MARCADORES" ao pé de cada post no Blogger, vá até o HTML do seu blog e clique em "Expandir modelo de widget", agora procure pelo código:
<a expr:href='data:label.url' rel='tag'>

Troque pelo código abaixo e insira no local indicado o endereço da imagem



<a expr:href='data:label.url' rel='tag'><img src='AQUI O ENDEREÇO DE SUA IMAGEM '/>

sexta-feira, 20 de julho de 2012

0

Feliz dia dos Amigos

Ola minhas queridas amigas (os), talvez algumas de vocês devem saber que hoje se comemora o dia internacional do dia dos amigos, e não tinha como poder deixa essa data tão especial passa em branco,  por isso too aqui para deixa os meus parabéns por essa data pra vocês meus anjos, obrigada por tudo, por todos mementos felizes e tristes também e é claro, quero que saibam que amo muito vocês amigas (os).  
Curiosidades do dia dos Amigos:

*18/04/2011 - segunda-feira*

Dia do Amigo - comemoração do Brasil criada a partir de ideia patenteada pela médica brasileira da Bahia, Dra. Kleyde Lopes, com o objetivo de que o mesmo não fosse confundido com o Dia da Amizade.

O Dia Internacional do Amigo é 20 de julho. Melhor para nós brasileiros que temos duas data

domingo, 15 de julho de 2012

4

Tutorial: Fundo das postagens Folha de caderno


Oii amores ^^ esse tutorial é bem simples sei que iram gosta de fazer. Bem vamos começar lol >.<"

Desing -> Modelo -> Editar HTML -> Ctrl + F -> E prcure por:

.main-inner .column-center-outer {
Abaixo dessa tag terá mais ou menos assim: 

 background: $(post.background.color) $(post.background.url) repeat scroll top left;

  _background-image: none;

} 
Apague todo esse código ai e cole no lugar dele o seguinte:
background: url(url da imagem) repeat-Y;
}  
E substitua aonde está em verde pelo url da folha de caderno :


Por ultimo cola isso em baixo: 

padding: 10px 10px 10px 20px;

Imagens: 






Gostaram? Beijos ! S2

sábado, 14 de julho de 2012

4

Como arredondar a parte de cima da sidebar e dos posts.



Oiii meus bombons! Hoje vim ensinar a arredondar apenas a parte de cima da sidebar (barra lateral) e dos posts. Então vamos lá!
Barra lateral 

Vá em Design , dê CTRL + F e procure por :



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

(Sidebar direita)

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

(Sidebar esquerda)


E abaixo da tag pesquisada cole o seguinte código :



-webkit-border-top-left-radius: 100px;
-webkit-border-top-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-topright: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;


Visualize e se der certo salve.

Nos Posts

Vá em Design , dê CTRL + F e procure por :


.main-inner .column-center-outer {


E abaixo da atg pesquisada cole o seguinte código :


-webkit-border-top-left-radius: 100px;
-webkit-border-top-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-topright: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;


Então é isto, um grande Beijo ! ♥ ♥ ♥

terça-feira, 10 de julho de 2012

0

Remover espaço entre sidebar e posts



Ola meus bolinhos de chocolata, hoje irei ensinar um tutorial bem simples de como unir a sidebar do blog as postagens, igual aqui no Garotas H-I-S, vamos ao tutorial?

Sidebar na direita:

Vá em design>>editar html>>aperte Ctrl+f e procure por:

/* Main

Depois procure por:

margin-right: $(content.padding);

Depois de encontrar apague, esse código se repete 2 vezes, apague nas 2 ^^

Sidebar na esquerda:

Vá em design>>editar html>>aperte Ctrl+f e procure por:

/* Main

Depois procure por:

margin-left: $(content.padding);

Apague e ele também se repete 2 vezes ^^

sexta-feira, 6 de julho de 2012

3

Goodies: "Nuvem de tags"


Olá lindas , hoje vim trazer um tutorial de como colocar uma nuvem de tags igual aqui no blog *-*
Eu sempre procurei por isso e por sorte achei  e estou repassando para vocês! 
 
Sua nuvem de tags irá ficar assim :
 
Bom, vamos lá?

1º passo.
Layout > Adicionar um Gadget.
2º passo.
Mais gadgets > ( pesquisar gadgets ).
3º passo.
Digite: Label

4º passo.
Adicione o Label Sphere.
5º passo.
Clique em Salvar & pronto :)
Gostaram?
Bem explicadinho né? haha'
Beijos e até a próxima ;*

quinta-feira, 5 de julho de 2012

0

Efeito no gadget dos afiliados


Oi minhas lindas, tudo bom com vocês? Bom, hoje vou ensinar à vocês como faz esse efeito no gadget de afiliados. Bordas redondas... Efeito hover!  Enfim, bora?? Go, go, go!


Vá até Design > Editar HTML, e procure (F3/Ctrl + F) por ]]></b:skin>. Acia dela, cole o seguinte código:

.afiliados {
opacity: 0.7; 
-webkit-transition: 0.5s;
border-radius:15px;
width: 50px;
height: 50px;
text-align: center;
}  
.afiliados:hover {
opacity: 1.0;
}

Entenda!
ESTADO NORMAL
opacity: 0.7; Opacidade em 70%, no estado normal, sem passar o mouse.
-webkit-transition: 0.5s; Tempo da transição.
border-radius: 15px; Bordas arredondadas.
width: 50px; Largura da imagem dos afiliados.
height: 50px; Altura da imagem dos afiliados.
text-align: center; Alinhamento das imagens.

ESTADO HOVER
opacity: 1.0; Opacidade em 100% (normal), ao passar o mouse.

Agora salve. E se direcione à Design > Elementos da página. Clique em "Adicionar um Gadget", e escolha a opção HTML/Javascript. E cole nele, o seguinte código:
<a href="http://URL.com" title="Título da imagem"><img src="LINK_DA_IMAGEM" class="afiliados"/></a>
Para acrescentar mais imagens, vá duplicando o código. Espero que tenha ajudado vocês! Beijos meus cupcakes sabor baunilha.

quarta-feira, 4 de julho de 2012

1

Personalize os títulos dos gadgets

Olá cherries! Vamos continuar com a maratona de tutoriais. Hoje você vai aprender como personalizar os títulos dos gadgets da sidebar. Eu vou mostrar onde você deve mexer, e passar um código básico, mas você pode usar sua criatividade para fazer outras alterações e criar diferentes estilos.

No painel do blogger, clique no nome do seu blog, depois, clique em "Modelo" no menu vertical que aparece no lado esquerdo da tela. Clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer.

Aperte Ctrl+F e procure por h2 {
Logo abaixo do trecho que você procurou, vai ter algo parecido com isso:

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

Apague toda essa parte e no lugar coloque esse código:

.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: #fbfbfb; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}

Agora é só modificar as cores e a fonte como quiser. Se em vez de cor, você quiser colocar uma imagem de fundo, substitua essa parte:

background: #fbfbfb; /*Cor de fundo*/

Por isso:
background: url(link_da_imagem) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/

Visualize se está tudo certo e salve. Espero que tenha sido útil. 
 Amanhã tem mais tutorial, aguardem!

terça-feira, 3 de julho de 2012

2

Como Colocar Nuvens no Blog?


Oi amores! Trago para vocês o tutorial de como colocar nuvens "voando" pelo blog, como as daqui do "Dicas e Acessórios para Blog" É muito fácil.

 Vá em Design > HTML e Aperte CTRL+F!

Cole na caixinha o seguinte código:

<div class='fauxcolumn-outer body-fauxcolumn-outer'>
 Acima deste código, cole:
<marquee scrollamount="10" height="1000px"><img src="http://4.bp.blogspot.com/-uf0rfmTAjdg/T6fm_qroGmI/AAAAAAAACbU/iNkknqRoNqs/s1600/nuuvem4.png"></img></marquee>
A parte em negrito é o link da imagem, então se você quer colocar outra coisa ao invés de nuvens é só trocar a parte em negrito.

Espero que consigam!

Qualquer coisa, é só comentar.

Beijos

segunda-feira, 2 de julho de 2012

1

Imagem dos Afiliados que gira


Eu de novo aqui, "zoiando" Hoje eu irei ensinar como colocar imagem que gira ao passar o mouse no afiliados, gostei muito, vamos começar?

Vá no HTML do seu blog. E procure por:


]]></b:skin>

E quanto encontrar cole acima dele, isso:


.afiliados {
box-shadow: 2px 1px 3px #909090;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
}
.afiliados:hover {
transform: rotate(-360deg) scale(1) skew(0deg);
-moz-transform: rotate(-360deg) scale(1) skew(0deg);
-webkit-transform: rotate(-360deg) scale(1) skew(0deg);
-o-transform: rotate(-360deg) scale(1) skew(0deg);
}

e para adicionar cole:
<center><a href=" Link do Blog" title="Nome do blog"><img src="Imagem aqui" class="afiliados"/></a> <a href="Link do Blog" title="Nome do Blog">

domingo, 1 de julho de 2012

1

Colocar sombra "borrada" nos Títulos de Post


Oi meus robôs fantasiados de cupcakes (que inspiração em Jess). Hoje e a minha primeira postagem e especial por isso trago um tutorial muito fofo e pedido.Como colocar sombra borrada nos titulos dos posts. Vamos lá?

1- Vá até Design, Editar HTML, aperte CTRL+F (ou F3) e procure por:
h3.post-title a {
Você encontrará um código ''parecido'' com esse:

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
Logo antes da } você irá colocar: 
text-shadow: 0px 0px 5px #666666;
 O que está em rosa, é a quantidade da sombra, quando mais você aumentar, mais irá "borrar" seu título. E o que está em lilás é o código da cor do seu "borrado". No exemplo a quantidade do borrado eu coloquei 8 mais voce pode usar e abusar.

sábado, 30 de junho de 2012

2

Colocando separador abaixo do titulo do blog

Separador abaixo do titulo do blog também chamado de linha de separação é um ótima dica para aqueles que usam templates que ainda não tenha esta configuração.

Colocar uma linha tracejada abaixo do titulo do blog ou inserir divisória no titulo do blog é algo simples siga os passos abaixo:

Exemplo de linha para dividir o titulo das postagens:



Entre nas configurações do seu blog e vá para opção Editar Html >>Expandir modelo de Widget e faça o Beckup do seu template.

Agora procure este código:
 
<div class='post-header'>

E logo acima dele cole:

<div style="border-top: 1px dashed #1919dd"></div>


Para entender melhor como personalizar a linha de separação do blog

(1px) - define a espessura da linha
(dashed) - é onde você configura o style da linha se ela vai ser tracejada ou não
(#1919dd) aqui você define a cor a linha

Para editar o tipo de linha que vai usar segue os dados:

Style

none:    para ocultar a borda
solid:    colocar uma borda contínua
double: inserindo uma borda dupla
groove: colocando uma borda aparecera entalhada
ridge:    a  borda aparece em ressalto
dotted:  este é para borda pontilhada
dashed: é para borda tracejada
inset:     colocar borda em baixo relevo
outset:   inserir borda em alto relevo

Coloque qualquer destes valores acima bem no lugar que esta em azul no código para mudar o style da linha:

<div style="border-top: 1px dashed #1919dd"></div>
<div class='post-header'>

Procure na internet por (tabela de cores hexadecimal) que vai encontrar diversas tabelas e cores para seu blog.

Para personalizar a cor escolha a cor que ficar melhor para seu blog e copie o código e insira no lugar que esta na cor azul

<div style="border-top: 1px dashed #1919dd"></div>
<div class='post-header'>

Pronto agora é só salvar e vizualizar..

sexta-feira, 29 de junho de 2012

0

Texturas de Luz






Tem tempo que não trago texturas de luz pra vocês, não? Trouxe algumas que achei legais e que podem ser úteis em alguma criação. Se tiverem preferências, é sempre bom avisar.

A primeira foto é sempre sem a textura e a segunda com.

Bjs















Textura 1 - Aqui















Textura 2 - Aqui















Textura 3 - Aqui















Textura 4 - Aqui















Textura 5 - Aqui














Textura 6 - Aqui

quinta-feira, 28 de junho de 2012

3

Divisória entre post e sidebar



Ola meus fofuxos!!! Hoje trago o tuto de como colocar divisória entre o post e a sidebar, é bem facil e acho que iram gostar. Okay, vamos comesar  

Acho que é isso né..Vamos ao tuto então..



Vá em Design  > Editar HTML  > Aperte CTRL+F e procure por:

.main-inner .column-center-inner {

E após a chave cole o seguinte código:

border-left: 2px dotted #000000;

Altere da forma que quiser..

Border-left > é a borda do lado esquerdo

Border-right > é a borda do lado direito

2px > é o tamanho da borda (largura)

dotted > é o modelo da borda

e por fim #000000 é a cor da borda

Código da Cores aqui


Outros modelos de borda (o nome da borda é o que esta em rosa)

border: 2px outset #ff5e9f

border: 3px inset #FFFF99

border: 4px ridge #46c74e

border: 3px groove #eded58

border: 4px double #FF0000

border: 1px solid #ed574c

border: 2px dashed #6a55ed

border: 2px dotted #919191

Qualquer dúvida pergunta aeeee 

quarta-feira, 27 de junho de 2012

0

Fontes


 Oiiii! Trouxe algumas fontes para vocês, as melhores que tenho no pc. Clique na imagem pra baixar.





LinkWithin

Related Posts Plugin for WordPress, Blogger...