14/6/13

[Tutorial]Poner un boton flotante con efecto deslizante de noticias


Holaaaa  me quiero morirrrrrrrrrrrrrrrrr aggggggggggg queda una semana horrible y este fin de semana tengo que estudiar muchisimo pobre de mi que alguien se apiade esta semana ha sido una película de horror  en cuanto acabe el insti voy a tirar los libros por la ventana y decir adiossssssssss libros  bien pues ya yaya se que os aburro con mis historias de dia a dia y que ultimamente estoy suprimiendo cosas que tengo que hacer y me temo que esta semana tendré que suprimir mas cosas lleváis dos fines sin TIPS bueno es que no tengo ideas cof cof 
uyyy se me esta alargando la entrada bueno el tuto de hoy sera de Poner un boton flotante con efecto deslizante de noticias
{Este tutorial me lo han pedido Anny y bueno aquí lo traigo} 
  • Plantilla
  • Edicion HTLM
  • ctrl+f y buscas-----> </body>

Y antes de </body> pegáis este código
    
<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; /* COLOR DEL TITULO */
border: 1px dashed #fff; /* BORDE DEL TITULO */
padding:4px;
border-radius: 10px;
background: #95d3bf; /* FONDO DEL TITULO */
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
}
.musMMC:hover {
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
}
#note {
border-radius:10px;
border:1px dashed #95d3bf; /* BORDE DEL BOX */
margin-top:820px;
width:180px;
margin-left:10px;
padding:4px;
position: fixed;
text-align:left;
background:#fff; /* FONDO DEL BOX */
color:#95d3bf; /* COLOR DE LA LETRA DEL 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">  titulo <br /><div id="note">

mensaje que vas a poner <br />
reproductor de musica si no borra lo que hay puesto</div>

</div>
EDITO
Rosa:El titulo de la caja
Naranja:El contenido que hay que poner dentro
Verde: Reproductor de musica
Lo demás esta indicado en mayúsculas lo que tenéis que hacer
{x}

36 comentarios:

  1. Respuestas
    1. gracias tienes los créditos abajo por si no los viste XD

      Eliminar
  2. me gusto mucho esa nubesita, es un muy buen tutorial se agradece!

    ResponderEliminar
  3. Muy buen tutorial nena, lo usare en mi siguiente cambio de look n_n un saludo

    ResponderEliminar
  4. tenia una gran duda en cuanto a este gadget
    Muchas gracias Kumy! enserio! ^^

    ResponderEliminar
  5. muy util , gracias :3
    espero estes bien
    saluditos , espero me visites :3

    ResponderEliminar
  6. este tuto se ve bueno ^^
    vamos a ver si me sale >u<

    besos!!! ^-^

    ησvєℓαѕ-ღαηιмεღ

    ResponderEliminar
  7. muy buen tutorial, gracias por el ^^

    ResponderEliminar
  8. Quee cutee!! PD_ teness unn regalito en mi blogg :3.. ahi lo publciare

    ResponderEliminar
    Respuestas
    1. gracias me psas la entrada esque busque por tu blog y no encontre nada

      Eliminar
  9. Gracias Kumy-chan!!!!!! Yo tambien me lo preguntaba!!! :3 suerte en tus estudios :DD

    Muchos besos y se me cuida!!

    ResponderEliminar
  10. holaaaa.. yo tengo un monton de dudas, le di en buscar y le puse tu codigo y no sale nadaaa... pls ayudameeee..!!!

    ResponderEliminar
    Respuestas
    1. pues quizas es porque tienes una plantilla blogskin o una clasica por eso no sale mmm

      Eliminar
  11. Respuestas
    1. ya lo arregle volví a cambiar el código espero que sirva

      Eliminar
  12. annyeonghaseyo unnie una ? vieras lo hice kunde cuando lo puse no me aparecen los cambios solo el texto noticias y la descripcion ni los colores ni la descripcion desaparece?? OTTOKE??? GOMAWO *J!R0*

    ResponderEliminar
    Respuestas
    1. Pues sera que tu plantilla no es compatible porque lo revise dos veces

      Eliminar
  13. Oh! Kumi <33
    No hay ningún problema que publiques el tutorial! Pero creo que los créditos van para MMC! ヾ(*´∀`*)ノ
    http://mimundodecreacion.blogspot.com.ar/2013/01/box-music-deslizable.html
    Hasta el código tiene el nombre "musMMC" (#^ω^)!♥
    Si no es mucho pedir, se podrían cambiar los créditos (◕‿‿◕。)?

    ResponderEliminar
    Respuestas
    1. owww vaya o-o lo siento no sabia ahora lo cambio

      Eliminar
  14. no me salee! :C busco eso de body y me dice q no aparece please dime como es!

    ResponderEliminar
  15. Hola disculpa donde dice reproductor de musica que le pongo exactamente

    ResponderEliminar
    Respuestas
    1. El código de un reproductor de música en internet hay muchos reproductores online

      Eliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com