Nuvem de tags

Tumblr_llq17vy5mq1qggjfqo1_500_large
Esse cachorrinho intelectual me seduziu (66'

Oii gente, desculpa a demora para postar por aqui, é que eu não estava muito em dia com o CG. Mas agora já estou mais organizada :)

Vou mostrar para vocês um tutorial MEGA-HIPER-SUPER fácil, que muita gente conhece, mas não coloca no blog porque não sabe. É mostrar os marcadores num efeito de nuvem. Fica bem bonito.

Basta ir em Painel > Design > Adicionar um Gadget. Agora, do lado esquerdo da página que apareceu, selecione "mais gadgets". Na barrinha de pesquisa que aparece lá em cima, digite Label e dê enter. Aí é escolher a primeira opção, configurar o que pede e salvar ! Pronto.



Super simples o tutorial, não é ? Espero que tenham gostado *-*
Beijinhos.

Menu horizontal acima dos posts

Hoje vou ensinar vocês a fazerem um menu igual o que eu tenho aqui, na horizontal e fica em cima dos posts. Ele tem um efeito hover bem bacana (passe o mouse lá por cima para ver). Antes de usa-lo, vamos instalar em seu html. Tutorial bem simples:

Para Instalar:


Painel > Design > Editar HTML. Seguindo esse caminho, você chegou no HTML do seu blog. Agora dê Ctrl+F e digite: ]]></b:skin>. Esse trecho ficará destacado dos demais. Agora, ACIMA dele, cole o código abaixo e faça suas alterações:
.menuhorizontal {
background:#ffffff; /*** cor do fundo ***/
float: left;
height:35px; /*** altura da aba ***/
width:140px; /*** largura da aba ***/
font-size: 13pt; /*** tamanho da fonte ***/
text-align: center; /*** posição do link ***/
margin: 9px; /*** espaço entre as abas ***/
margin-bottom: -20px; /*** distância entre menu e postagens ***/
-webkit-border-top-left-radius: 13px;
-webkit-border-top-right-radius: 13px;
-moz-border-radius-topleft: 13px;
-moz-border-radius-topright: 13px;
border-top-left-radius: 13px;
border-top-right-radius: 13px;

}
.menuhorizontal:hover {
background:#000000; /*** cor do fundo com mouse em cima ***/
float:left;
height:50px;
-webkit-border-top-left-radius: 13px;
-webkit-border-top-right-radius: 13px;
-moz-border-radius-topleft: 13px;
-moz-border-radius-topright: 13px;
border-top-left-radius: 13px;
border-top-right-radius: 13px;}
O código já é auto-explicativo, é só ir lendo e personáliza-lo. Entendam as partes destacadas:

left: é a posição que ficará o menu, ou seja, se suas postagens ficam do lado esquerdo, pode deixar assim mesmo, mas se fica do lado direito, substituam left por right.
A parte em azul é o código das bordas redondinhas na parte de cima, se você quer que fiquem quadradas, é só apagar o trecho todo.
height:50px; esta parte é a que faz toda a "mágica" do efeito hover. Basta deixar o número pelo menos uns 15px maior do número que você colocou na altura da aba. Por exemplo, a minha aba tem 35px, então nessa parte eu colocarei 15 números maior (no exemplo, 50px). Caso não queira o efeito, é só apagar esse trecho.

Para Utilizar:

Painel > Design > Adicionar um Gadget > HTML/JavaScript. Deixe a parte "Título" em branco, e em "Conteúdo", cole o código abaixo:

<div class="menuhorizontal"><a href="LINK">TÍTULO</a></div>
<div class="menuhorizontal"><a href="LINK">TÍTULO</a></div>
<div class="menuhorizontal"><a href="LINK">TÍTULO</a></div>
<div class="menuhorizontal"><a href="LINK">TÍTULO</a></div>

Substitua LINK pelo endereço da página que você quer que apareça ali, e TÍTULO pelo nome da página. Lembre-se que cada linha dessa é uma aba no menu, por isso se você quiser adicionar mais uma aba, adicione mais uma linha, e assim sucessivamente.

Deu pra ver que não é tããão difícil, é só ir prestando atenção... Se usarem, comentem para eu ver como ficou, ok ? Espero que tenham gostado.
Beijinhos.

Blockquote personalizado e com efeito hover

O primeiro tutorial do blog *-*

Blockquote, para quem não sabe, é uma caixinha como a do exemplo abaixo. Ela é muito usada em blogs para dar alguma informação extra para o post, ou fazer um comentário sobre alguma coisa não relacionada a postagem. Também é bastante usada em tutoriais, para colocar códigos. Efeito hover, é quando passamos o mouse por cima de alguma coisa, e essa coisa muda.
Viiu ? Esse é um exemplo de bloquote. Passe o mouse aqui em cima e veja um exemplo de efeito hover. É isso que vamos aprender a fazer hoje.
Entenderam ? Ótimo, agora vamos ao tutorial:

Primeiro, vamos até o seu HTML (Painel > Design > Editar HTML).

Agora você vai procurar no seu HTML a tag ]]></b:skin>. Para encontrar com mais facilidade, é só dar Ctrl+F e digitar essa tag. Ele aparecerá destacado em laranja (ou outra cor dependendo do seu navegador).

Agora, acima da tag, cole o código abaixo:

 blockquote {
border: 1px solid #FF1493;
background-color: #000000;
padding: 10px;
font-size: 11px;
color: #ffffff;
text-align: justify;
}
 blockquote:hover {
border: 1px solid #00FFFF;
background-color: #000000;
}
As partes coloridas são a que vamos personalizar. Entenda o código:

Rosa: aqui vamos personalizar a borda do blockquote. Para alterar o tamanho, basta substituir "1px" por um número maior. "solid" é o estilo da borda, (clique aqui para ver outros estilos), e #FF1493 é a cor em HTML (clique aqui para ver outras cores em HTML).

Azul claro: É o fundo do blockquote. Para mudar a cor, é só mudar a parte destacada por outra cor (sempre em HTML).

Amarelo: Tamanho do texto dentro do blockquote. Recomendo deixar assim.

Verde claro: Cor do texto dentro do blockquote, se for mudar, sempre em HTML.

Laranja: Borda quando o mouse estiver em cima do blockquote (efeito hover). Funciona do mesmo modo que a primeira.

Vermelho: Cor do fundo com mouse em cima.

Se quiser, pode colocar os cantos arredondados, assim como o meu blockquote. É só adicionar o código abaixo:

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Se quiser que fique arredondado sem o mouse está em cima, adicione depois de blockquote { e se quiser que fique arredondado com o mouse em cima, depois de  blockquote:hover {


Espero que tenham gostado e que usem muuito o tutorial ! Podem reblogar, mas creditem hein !
Beijinhos.

Cursores coloridos

Fiz alguns cursores (setas) coloridinhos, bem fofos. Para colocar em seu blog, basta ir em Painel > Design > Adicionar um Gadget > HTML/JavaScript e cole o código abaixo do cursor escolhido.
























São pouquinhos, mas espero que sejam úteis :) Podem repassar, mas CREDITE SEMPRE.
Beijinhos.

Bem-Vindos ao "Coisas de Garotas Designs"

E aqui vai uma super novidade. Sejam bem-vindos ao meu mais novo espaço, chamado "Coisas de Garotas Designs".

Tumblr_lzmo36lpby1r6ph4vo1_500_large

Esse lugarzinho aqui, nada mais é do que uma expansão do meu blog oficial, o "Coisas de Garotas", onde postarei tudo que sei para deixar o layout do blog de vocês mais personalizado como nunca !

Mas, porque um blog novo, Paulinha ?

Na verdade, eu sempre quis postar tutoriais e coisinhas para blogs lá no Coisas de Garotas, mas percebi que além de ficar MEGA BAGUNÇADO, perderia o foco do blog. Por isso, bem inspirada no que a Emily (do antigo Place Fame) fez, o Place Fame Extras, também quis criar um blog a parte para postar meus tutoriais.

Espero que gostem dessa novidade, e usem muito as dicas que postarei aqui, rs.
Beijinhos.