Seguidores

Pesquisar este blog

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.

LinkWithin

Related Posts Plugin for WordPress, Blogger...