6.1.13

Comemorando + Big tutoriais



Boa tardee leitoras e leitores queridos!! Hoje completamos 50 posts desde que o CDS foi criado \☺/
Pra comemorar, trouxe pra vocês um big tutorial, ou seja, vários tutos úteis pra vocês, de presente 
Quer ver os tutos? É só apertar em Leia Mais e conferir todos eles 


Mini gif 58 Fundo dos links coloridos e 'piscando'



Vá em Editar HTML  aperte F3 e procure por ]]></b:skin>  Acima dessa tag cole:

           .post a:hover {background: url('URL DA IMAGEM');color#BCAFE0;}
 Entendendo o código:

Sublinhado:  Se refere que o efeito só aparece na área dos posts;
Negrito: Se refere a URL da imagem que você irá colocar;
Itálico: É  a cor da fonte;

 Se quiser colocar também na sidebar basta substituir .post  por .sidebar, desse jeito:
.sidebar a:hover {background: url('url do gif');color: #BCAFE0;}

E aqui algumas imagens prontas pra vocês 

        
Créditos: Karine in Júpter



Mini gif 58 Gif ao lado do título do post


         Vá em Design  Editar HTML  Marque a opção http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif Expandir modelos de widgets
                 http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif Aperte F3 e procure por data:post.link'><data:post.title/></a>

 Logo abaixo você irá encontrar isto: <b:else/>
 E logo após esse código cole este:  <img src='URL DO GIF AQUI' style='vertical-align: middle;'/>

 Agora é só colocar a url do seu gif e pronto!!
Créditos: Karine in Júpter



Mini gif 58 Menu simples com gif




Editar HTML  procure por  ]]></b:skin> e acima dele cole:


 @font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}
.fantastic {
display : block;
font-size: 8px;
font-family: handy;
text-transform: uppercase;
line-height: 16px;
margin-top: 2px;
border-bottom : 1px solid #ebeaea;  
border-right : 1px solid #f1f1f1; 
border-left : 1px solid #f1f1f1;
text-indent : 5px; 
vertical-align : middle;  
background:  no-repeat left #f3f3f3; 
padding-left : 6px;
padding-bottom : 2px;
}
.fantastic:hover {
display : block; 
background: url('http://media.tumblr.com/tumblr_m0ohnsdlwO1qfjy56.gif') no-repeat left #f9f9f9;
}

Agora é só salvar! 

Depois, adicione um HTML/JavaScript e colar:


            <div class="fantastic"> seu texto </div>
Já está pronto o seu menu!
Créditos: Kawaii World 




 Mini gif 58 Menu Arrow




Editar HTML  procure por ]]></b:skin> e acima desse código cole:


@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}
.arrow {margin: 1px; text-align: center; font: 8px handy; text-transform: uppercase; display: inline-block; position: relative; color: #000000; width: 45px; padding: 3px; text-decoration: none; background-color: #CORDOFUNDO; border: 2px solid #CORDABORDA;}
.arrow:hover { background-color: #CORDOFUNDOHOVER; border: 2px solid #ef7aa1;}
.arrow:hover:after {
content: ''; width: 0; height: 0; position: absolute; left: 50%; 
margin-left: -2px; bottom: 0; border-width 9px; border-style: solid; border-color: transparent transparent #CORDASETA transparent;}

Troque os nomes pelas informações referentes.

Agora, em um HTML/JavaScript cole o seguinte código:

<a href="SEULINKclass="arrow">Menu</a>
<a href="SEULINKclass="arrow">Menu</a>
<a href="SEULINKclass="arrow">Menu</a>
<a href="SEULINKclass="arrow">Menu</a>

Pronto, agora é só fazer as alterações indicadas.
Créditos: Kawaii World 



Mini gif 58 Gifs antes dos marcadores



                     Vá em Editar HTML  procure por ]]></b:skin> e acima dessa tag cole:


.sidebar ul li {
list-style:  disc url(LINK DO SEU GIF);
font-size:13px;
vertical-align: top;
padding: 12px 0px 4px 0px;
margin-left: 7px;
border-bottom : 1px dashed #ccc;
}


Esse código é bem simples e fácil de compreender, é só fazer o que se pede no código e pronto! É só salvar e ver os marcadores lindos.

CréditosKawaii World



E aí? Gostaram dos Tutoriais? Espero que tenham sido úteis pra vocês,porque deu um trabalhão pra colocar todos esses tutos.  Em breve terá mais posts assim e colocarei muito mais tutos pra vocês 
Bjok e fiquem com Deus. 

8 comentários:

  1. Bem legais os tutus!
    Parabéns pelos 50 posts!!
    Beijokass
    Fer--> retardadasdanet.blogspot.com

    ResponderExcluir
  2. Parabéns pelos 50 posts ^^
    adorei os tutoriais!!
    worldsweett.blogspot.com.br
    Visita? ~Beijos

    ResponderExcluir
    Respostas
    1. Obrigado ^^
      Amei seu blog *-* muito cute!
      Volte sempre aqui ^-^

      Excluir
  3. Oiiiie minha flor, retribuindo a visitinha e já te falando que seu blog é muito fofo, não, é muito lindo...não, é demais,rsrss. Parabéns pelos tutoriais, pelos posts muito bacanas viu. Adorei mesmo!!! As nuvens passando ficaram lindassssss!!!! Flor, um ano 13 maravilhoso pra ti, muita paz, saúde e realizações pra você. Bjkas

    ResponderExcluir
    Respostas
    1. Obrigado minha linda! Tudo de bom pra você também! Xeroo ^^

      Excluir
  4. Oie florizinha tudo certo?

    lindo seu blog parabéns
    seguindo já se possível me faça uma visita
    http://www.fragmentos-intensos.com/

    Beijos

    ResponderExcluir
    Respostas
    1. Obrigado linda! Adorei seu blog, muito conteúdo bom!
      Kisses ^^

      Excluir

Oii, obrigado por comentar! Só tenho algumas regrinhas:

♥ Não comente com palavras ofensivas, não xingue e nem fale palavrões;

♥ Leia a FAQ antes de fazer qualquer pergunta;

♥ Respeite essas duas regras e você será bem vindo aqui ^^