Cajitas Flotantes ''Marquee''

Hola Dulzuras! Como estan?
Este tutorial lo saque de: 
Y lo edite un poquito, estuve aprobándolo y me di cuenta que sirven para todas las plantillas de blogger y blogskin.
Quieres ver como son?:

La imagen es de Mell.
Bien para colocar estas cajitas en una plantilla de blogger normal debes ir a: Plantilla Edición HTML
Allí buscas {Ctrl + F} </head> & DEBAJO pegas el código que mas te guste:

CAJITA FLOTANTE "MINI"
<style>  .status  {    width: 69px;    height: 30px;    margin-top: 22px;    margin-left: 3px;    text-align: center;    font: 11px calibri;    color: #a9744c; /* COLOR DEL TEXTO */  }  .status a{    color: #ffccdd; /* COLOR DEL LINK */    text-decoration: none;  }</style><div style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5EGNAaQF16JTKjyvmoZKpwy-WVmWLMA6R57jMpJ0CrmRGKXX5eS0InYuyMK6pSlXbS9wdZr95P0dvKj76Lfe-BxYIu8lH6qT3cWk9SgO568ozEXdOM9HUQSYOGXo0hl8DZRAxxlmOOpw/s1600/1432.gif); width: 75px; height: 55px; position: fixed; top: 10px; left: 30px;'>  <div class='status'>  <marquee direction='up' height='25' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1' style='margin-top: 3px;'>           TITULO ~ <br><a href="URL ENLACE" target="_blank"> VER!♥ </a><br>           TITULO ~ <br><a href="URL ENLACE" target="_blank"> VER!♥ </a><br>           TITULO ~ <br><a href="URL ENLACE" target="_blank"> VER!♥ </a><br>  </marquee>  </div></div>
CAJITA FLOTANTE "SIDEBAR" 

<style>  .status  {    width: 115px;    height: 40px;    margin-top: 20px;    margin-left: 11px;    text-align: left;    font: 11px calibri;    color: #a9744c; /* COLOR DEL TEXTO */  }  .status a{    color: #fff;    text-decoration: none;    margin-right: 3px;    padding: 1px;    background: #ffb2cc; /* FONDO DEL LINK */    border-radius: 3px;  }</style><div style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFzmw9RoEQHI3mtAROMMMyGC_B4cbaqDlw1yUbTEXYd4oVv_2-i1c4KwwB-pcjNTdwbUOU6hgy6sv9I54pRw3qOe30ZSkRmm6hwAnWF5Xc4vkYj-Ye_rGc24akIKrgJ7lVtVShAEGlD5w/s1600/1585.gif); width: 161px; height: 79px; position: fixed; top: 10px; left: 30px;'>  <div class='status'> <div align="RIGHT" style="margin-right: -20px;">AVISOS IMPORTANTES:</div>  <marquee direction='right' height='13' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' style='margin-top: 5.5px; padding: 3px;'>           TITULO ~ <div style="display: inline-block;"><a href="URL ENLACE" target="_blank"> CLICK ME!</a></div> </marquee>  </div></div> 
CAJITA FLOTANTE "ANOTADOR" 

<style>  .status  {    width: 120px;    height: 60px;    margin-top: 22px;    margin-left: 17px;    text-align: left;    font: 11px calibri;    color: #a9744c; /* COLOR DEL TEXTO */   }   .ver {   background: #a9744c;   border-radius: 7px;   text-align: center;   margin-bottom: 7px;   }  .ver a{    color: #ffc; /* COLOR DEL LINK */    text-decoration: none;  }</style><div style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVERXd9yTL8Ycijwo-t3VgymrI3M7Hk0aDafiw2rJrKJISzghGZ1Y6E_Ej3pgprWvMM_DqC0xHu6Ne8ICxaQZaLAXziMRBlQGoT5VUZEV9HfbqpzVsQld1tQvr39NhdQgXRsf-2tBEqk/s1600/903.gif); width: 150px; height: 100px; position: fixed; top: 10px; left: 30px;'>  <div class='status'> <center><u> NOTAS: </u></center>  <marquee direction='up' height='45' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1' style='margin-top: 3px; border-radius: 0 0 40px 0;'>           TITULO ~ <div class="ver"><a href="URL ENLACE" target="_blank"> VER!♥ </a></div>           TITULO ~ <div class="ver"><a href="URL ENLACE" target="_blank"> VER!♥ </a></div>           TITULO ~ <div class="ver"><a href="URL ENLACE" target="_blank"> VER!♥ </a></div>  </marquee>  </div></div> 
CAJITA FLOTANTE "KAWAII BEAR" 
<style>  .status  {    width: 115px;    height: 20px;    margin-top: 10px;    margin-left: 50px;    text-align: left;    font: 11px calibri;    color: #a9744c; /* COLOR DEL TEXTO */  }  .status a{    color: #d0a46d; /* COLOR DEL LINK */    text-decoration: none;    margin-left: 3px;    padding: 1px;    background: #fff;    border-radius: 3px;  }</style><div style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9uLC4vhUcInz0kUYEHpJM_95JvlsRgDHhlyn9l85rVv0zq_I2yDwiAfWaaQxLvM4EVyqS8TIHZbjEc3mn-b_x4qsJbX30oCie_HI6svMPdG6sM_gE7zz-6uwilSQoXFAcZ4cXBO_mceI/s1600/b201.gif); width: 200px; height: 40px; position: fixed; top: 10px; left: 30px;'>  <div class='status'>  <marquee direction='right' height='15' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' style='margin-top: 1px; padding: 4px;background: #;'>           <div style="display: inline-block;"><a href="URL ENLACE" target="_blank"> CLICK ME!</a></div> ~ TITULO </marquee>  </div></div>
Edita lo que esta marcado y lo que creas necesario~
Cualquier duda puedes consultarme.
Besos~
 

Comentarios