Sejam bem vindos meu ao bloguinho, ele foi criado com o intuito de ensinar a quem necessita de ajuda em html e css, temos diversos tutoriais e materiais. Fiquem bem a vontade e qualquer dúvida que tiverem entrem em contato comigo ou peçam pela ask. Beijinhos caramelados e inté mais ♡
Search here
All that you want is here, css and html
Welcome to garota no mundo html.
- efeito legenda nas imagens de posts
- backgrounds grandes em aquarela
- Avatar do autor no post footer
- Leia mais na mesma linha do header
- Efeito Dragqueen e efeito Swing
- Três modelos de menus agenda
- Usando temas de tumblr no blog
- Criando seu próprio modelo de data
O tema atual do layout é: the fall of leafs
A meta dos posts do blog é de: 300 posts
A meta de comentários do blog é de: 3500
O blog foi inaugurado no dia: 27/12/2012
os Seguidores do blog atualmente são: 865
A versão atual do layout está na: 41ª vers.
folhinhas que estão no blog online agora:
folhinhas que já passaram por aqui:

Gadgets no cabeçalho + Menu Just Disappearing

Olá tortinhas de limão tudo certinho? Hoje a Tia aqui vai trazer um tuto pedido por uma leitora... Ela pediu como colocar os gadgets do blogroll no cabeçalho ou outras coisas e do meu menu que fica no cabeçalho, Então vamos aos tutos? Bem irei começar pelos gagdets no cabeçalho! Eu sei que existem alguns modos de por gadgets no cabeçalho, mas o mais prático e mais fácil de entender foi esse, só que irei dar uma opinião, antes de querer colocar as coisas que você quer no cabeçalho, estude certinho a quantidade de itens que quer por, porque quanto mais itens querer colocar, mais demorado vai ser para mudar tudo de lugar. Por exemplo o blogroll que coloquei no cabeçalho foi um simples código dentro de um html java script e foi esse código aqui:

<div style="position: absolute; margin-top: -100px; left: -200px;">CÓDIGO DO OBJETO</div>

Créditos ao Pinkii Cookie  pelo código!

Então vamos supor que você queira colocar um quadro de blogroll, escolha um efeito, coloque ele no modelo html, depois adicione como de costume um gadget e dentro cole o código ali acima, onde está escrito CÓDIGO DO OBJETO você irá por os códigos do efeito desejado, e irá ajeitando a altura, e os lados, e pronto é isso bem simples, como eu disse antes a única coisa meio chata é que quanto mais itens você por mais trabalho irá ter para deixar eles alinhados, eu prefiro esse modo por mais chatinho que seja, pois posso deixar o que quero em qualquer lugar e sem precisar estar dentro de caixinhas iguais a da sidebar o que no meu ponto de vista deixa o cabeçalho bem poluído! Bem agora irei explicar o tuto sobre o menu que estou usando abaixo do cabeçalho! Os créditos para o menu é Daqui! O nome do menu é Just Disappearing. Então vá em modelo editar html e procure por: ]]skin: depois de achá-lo acima dele cole o seguinte código:



.simplemenu {
cursor: pointer; 
font-family: 'Ubuntu', sans-serif;
position: absolute; 
width: 820px; 
margin-top: 28px; 
height: 62px; 
font-size: 18px; 
letter-spacing: 1px; 
overflow: hidden; 
font-style: ; 
margin-left: 90px;}

 .simplemenu a {
color: #F499AF; 
padding-left: 29px; 
padding-right: 11px;
text-shadow: 0px -100px 1px #94d0cf; 
padding-top: 58px; 
-webkit-transition: all 0.8s ease; 
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;}

.simplemenu a:hover {
color: transparent; 
padding-left: 29px; 
padding-right: 11px; 
text-shadow: 0px 0px 0px #3F3D5C; 
-webkit-transition: all 0.8s ease; 
-moz-transition: all 0.8s ease; 
-o-transition: all 0.8s ease;} 


Salve, vá até layout e adicione o gadget java script, dentro cole o seguinte código:


<div class="simplemenu">
<a href="/">Home</a>
<a href="/">Dúvidas</a>
<a href="/">Tutoriais</a>
<a href="/">F.A.Q</a>
<a href="/">Themes</a>
<a href="/">Materiais</a>
<a href="/">About</a>
<a href="/">Dicas</a>
</div>

Salve, para deixar ele na parte da faixa do cabeçalho eu simplismente coloquei o cabeçalho do modelo editável que postei anteriormente e coloquei o gadget dele aqui onde mostra o print:



 Bem amores é isso, espero que a leitora goste e que consegui explicar tudo bem direitinho para ela e para todos vocês!! Mesmo assim qualquer dúvida me perguntem ok? Beijocas >.<

8 comentários:

  1. Gostei, bem explicadinho ^^ Flor vc pode me ajudar no meu layout ?
    add: faleconosco21@hotmail.com Beijos

    ResponderExcluir
  2. Roh muuuito obrigada por fazer o tutorial que pedi, fiz tudo e deu certinho! *---------*

    ResponderExcluir
  3. Muito obrigada pela sua mensagem de Parabéns Roh  。◕‿◕。

    Quem canta as musicas que tenho no blog é Oliva Holt :)

    ResponderExcluir
  4. Tudo bem explicado , adorei o blog e já estou seguindo . Aceita afiliação , se aceitar leia antes o Faq do meu blog.

    Kisses , te espero por lá.

    http://meucupcakedemorango.blogspot.com.br/

    ResponderExcluir
  5. Ótimos tutoriais, adorei o menu! O blog está super lindo, amei :3
    Estou seguindo, beijão!

    crazyforhtml.blogspot.com

    ResponderExcluir
  6. Otimo tutu, ta lindo blog

    Tem joguinho valendo divulgação lá no blog, passa lá!

    cantinhodadrw.blogspot.com.br

    ResponderExcluir
  7. O meu funciona , mas quando navega no blog eles desalinham o que eu faço?

    ResponderExcluir
    Respostas
    1. Amor dá um print e me mostra manda pelo ask, só assim irei entender o que está acontecendo >.<

      Excluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)