• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

30 de janeiro de 2013

Caixa Flutuante no Blog

é só aqui ou vocês também estão vendo o cabeçalho bagunçado por causa dos anúncios que não dão para retirar?
Tumblr_mhdgqy4ons1s3oz7yo1_r1_500_large
Olá cerejeiras com amora!
hoje eu estava ando uma olhada em um blog que amo, o  Mell Creaciones e vi um tutorial bem legal que ela havia postado, então personalizei um pouco o código e trouxe pra cá, mais todos os créditos vão para esse blog :)
Bem, eu modifiquei e não ficou uma das melhores coisas, mais espero que gostem, vejam o preview, aqui está o preview do blog M.C, é eu sei, sou péssima em blogs de visualizações.
Vamos aprender?
Para adicioná-lo é fácil, abra um HTML / Javascript e cole:


<style>
.musMMC {
text-align:center;
font-size:11px;
font-family: trebuchet ms;
font-style: italic;
position: fixed;
left: 20px;
top: 10px;
width:150px;
color:#fff; /* COR DO TÍTULO */
border: 1px solid #8B3626; /* BORDA DO TÍTULO */
padding:4px;
border-radius: 10px;
background: #8B5742; /* FUNDO DO TÍTULO */
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
}
.musMMC:hover {
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
}
#note {
border-radius:10px;
border:1px solid #8B5742; /* BORDA DO BOX */
margin-top:820px;
width:180px;
margin-left:10px;
padding:4px;
position: fixed;
text-align:left;
background:#DB7093; /* FUNDO DO BOX */
color:#8B5742; /* COR DA LETRA DO BOX */
opacity: 0;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
}
.musMMC:hover #note {
margin-top:20px;
opacity: 1;
overflow:hidden;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;}
</style>
<div class="musMMC">  TÍTULO <br /><div id="note">
ESCREVA ALGO AQUI<br />
AQUI O CÓDIGO DE ALGO, MENU, MUSIC BOX OU MENSAGEM.</div>
</div>

Bem, se não gostarem das cores, vocês podem modificá-las usando essa tabela, e se vocês quiserem as bordas como na visualização do M.C, é só substituir solid por dashed no código, e quanto a parte em negrito, vocês podem escrever uma saudação aos leitores e na parte em itálico, podem colocar um menu, ou music box, como explicado no código. Espero que tenham gostado do tutorial, foi mais útil do que o último que fiz não é?!

21 comentários:

  1. vim avisar que o questão de opinião está de layout novo! To avisando pois vc é uma das queridas afiliadas
    questao-deopiniao.blogspot.com.br

    ResponderExcluir
  2. Não aqui o cabeçalho tá normal. Legal o tuto!

    ResponderExcluir
    Respostas
    1. ain, que bom que é só no meu :) está aparecendo anúncios em tudo acredita?

      Excluir
  3. Que legal o tuto !
    cr4zy-world.blogspot.com

    ResponderExcluir
  4. Adorei o tutorial.
    O resultado fica muito bonitinho.
    Bj.

    ResponderExcluir
  5. Aqui o cabeçalho ta MAIS que normal ^^ e o tuto é muito lindo eu adorei *-*

    jovenclube(.blogspot.com.br)

    ResponderExcluir
  6. Meeeeegan! Aqui também está aparecendo anúncio em tudo quanto é lugar! Pensei que era só no meu! Os cabeçalhos dos blogs estão todos deformados e as palavras também estão cheias de anúncios! =( Você usa o google chrome, né? Então! Desinstala e instala ele de novo. Não sei se dá certo, mas é isso que vou fazer.
    Ah, e a propósito, adorei o tuto. <3
    Beijos!
    Gabi.

    ResponderExcluir
    Respostas
    1. aa então é o navegador né?! como eu suspeitava, tenho outros, tenho mozzila e explorer, irei usar eles, valeu pela dica, irei fazer isso tbm :)

      Excluir
  7. Aqui não aparece anúncios... Que amor a caixinha, tão cute!

    Bjs
    garotas-cupcakes.com

    ResponderExcluir
  8. Megan, adorei o tutorial! Bem útil (: Qualquer coisa, coloco no blog com os créditos. Hey, só para avisar, meu navegador é o Mozilla e não tem nada de errado. Ah, você recebeu um selo lá do meu Blog! Espero que goste! Mandaram para mim e agora estou repassando para esse Blog lindo *--* Qualquer coisa sobre o selo (ou outra coisa), fala comigo lá no meu Blog.

    aperta-o-start.(blogspot.com)

    PS: Tira os parênteses.

    ResponderExcluir
  9. Maravilhoso! É ótimo para por lembretes ou avisos no blog pelo menos foi isto que eu fiz). ♥
    http://imagines-com-austin.blogspot.com.br/

    ResponderExcluir