Tutorial ✿ Burbujas con mensajes flotantes en el blog

Hola nenis!! Espero que estén teniendo un lindo día, y a la vez quiero darles la bienvenida a la primera entrada oficial del blog! Nada mejor que un tutorial de personalización para darle comienzo a este nuevo viaje.

Seguro ya vieron esas burbujitas que están al costado, pues les voy a enseñar a cómo ponerlas para su blog también :)

Nos vamos al apartado de Tema, y en la flechita que está al costado de personalizar le damos a editar HTML.

CTRL + F y buscamos ]]></b:skin>

Arriba ponemos el siguiente código:

#bubblebar

{font-family:Arial;

width:60px;

position:fixed;

right:15px;

bottom:300px;

z-index:999;

font-size:11px;

text-align:center;

}

.bubble

{text-align:center;

color:#COLORDELTEXTO;

float:right;

height:10px;

width:34px;

padding-top:12px;

padding-bottom:12px;

margin-top:10px;

overflow:hidden;

-moz-border-radius: 17px 17px 17px 17px;

border-radius:17px 17px 17px 17px;

-webkit-transition: opacity 0.7s linear;

-webkit-transition: all 0.7s ease-in-out;

-moz-transition: all 0.7s ease-in-out;

-o-transition: all 0.7s ease-in-out;

}

.bubble img{

margin-bottom:10px;

margin-top:-2px;

}

#vertical

{position:fixed;

width:10px;

right:30px;

bottom:0px;

height:260px;

background-image:url('FONDO DE LA LINEA');

background-color:#COLOR DE LA LINEA;

-moz-border-radius: 0px 0px 0px 0px;

border-radius:0px 0px 0px 0px; 

}

#bubble1 {border:2px solid #COLORDEBORDE1;

background-color:#FONDO;}

#bubble1:hover

{padding:5px;

height:50px;

width:120px;

border:3px solid #COLORDEBORDE2;

}

#bubble2

{border:2px solid #COLORDEBORDE1;

background-color:#FONDO;}

#bubble2:hover

{padding:5px;

height:50px;

width:120px;

border:3px solid #COLORDEBORDE2;

}

#music

{border:2px solid #COLORBORDE1;

background-color:#FONDO;

padding:14px 0px 10px 0px;}

#music:hover

{padding:5px;

height:50px;

width:50px;

border:3px solid #COLORBORDE2;}

#bubbleplayer{padding:2px 0px 5px 0px;

}

A personalizar: 

LILA: Color del texto de los mensajes
CELESTE: Si decidís editar esta parte del código, aparecerá una línea vertical debajo de las burbujas a la que podés ponerle un fondito o un color. De no querer que salga, simplemente déjalo vacío.
ROSA: El primer borde es el que aparece en la burbuja normal, el segundo es el que sale al pasar el cursor.

NARANJA: Color del fondo de las burbujas

Una vez hecho esto, vamos a diseño > añadir un gadget HTML/JavaScript y ponemos este último código:

<div id='vertical'></div>

<div id='bubblebar'>

<div class='bubble' id='bubble1'><img src="URL ICONITO"/>

<div>MENSAJITO</div>

</div><!--bubble1-->

<div class='bubble' id='bubble2'><img src="URL ICONITO 2"/>

<div>MENSAJITO2</div>

</div><!--bubble2-->

<div class='bubble' id='music'><img src="URL ICONITO 3"/>

<div id='bubbleplayer'>MENSAJITO3</div>

</div><!--music bubble-->

</div><!--bubbleblar-->

ACLARACIÓN: En donde dice "music" en realidad es para poner un reproductor de música dentro de la burbuja, sin embargo esto se hacía con un código que ya no funciona en la nueva interfaz de blogger. Aún así esto no afectará al resto del código ya que lo va a mostrar como un mensaje

Y listo!! Las burbujas deberían mostrarse sin ningún problema  

Este gadget lo tengo incluso en mi primer blog, recuerdo haberlo visto en el de una chica que se llamaba "Laura Kawaii World", aunque creo que ya no existe o se volvió privado... Como esto fue por allá en 2016 lamentablemente no pude dar con ningún rastro de ella, aún así le doy los créditos por tan bonito code que enseñó, y que ahora se los muestro a ustedes.
Si de casualidad encuentran su blog, por favor notifíquenme!

Espero de corazón que les haya gustado, en caso de que quieran publicar sobre este code no olviden dejar créditos. Pueden dejarme sugerencias de próximos tutoriales sin ningún problema, yo encantado de traerles más contenido!

Nos estamos leyendo, hasta la próxima entrada!!