Cute Iconos flotantes de Redes Sociales en Blogger♥

Hoola peques! Hoy les voy a mostrar una forma sencilla de agregar unos lindos iconos de redes sociales flotantes en Blogger. Con ellos les permitirá a sus seguidores del blog que se conecten o suscriban a su blog a través de los diferentes medios sociales. Se encuentran flotando a la derecha o la izquierda de la pagina.

En este tutorial, los sitios sociales que he incluido son Facebook, Twitter, Tumblr y Youtube. Así que veamos como instalarlos.

★LIVE PREVIEW HERE

Personalizar el skin del csm player :3

Hola Chicas como estan? espero que bien .. Yo hoy les traigo unos lindos skins para csm player, espero les guste... solo sigan las explicaciones para que puedan personalizar muy lindo sus reproductores :3

Conoce csm Player ;) 

Elige el el skin que mas te guste :3

Tutorial: Como Crear cuenta en me2day

- Crear una cuenta

Lo primero de todo es acceder a esta dirección en la que podemos empezar el registro

*Los asteriscos son los huecos que hay que rellenar obligatoriamente

Como poner un buscador en la cabecera del blog

Hola chicas, como estan? espero que super bien, yo estoy con visitas en mi casa asi que estoy un poco ocupada, ah tambien ando super preocupada por lo que esta pasando con las Corea la verdad me pone triste pensar en alguna guerra  

Bueno a lo que vine, hoy les traigo un nuevo tutorial, super facil 

[Preview]

Vamos a nuestra Plantilla [template] y clickeamos en Editar HTML. Presionamos el botón F3 y escribimos ]]></b:skin>

Sobre ]]></b:skin> pegamos el siguiente código:

#buscador {
  position: absolute;
  top: 100px; /* distancia de buscador margen superior */
  margin-left: 350px; /* distancia de buscador margen izquierdo*/
}

Volvemos a  usar el botón F3 y escribimos este vez </body>

Sobre </body> pegamos este otro código:

<div id='buscador'>
<form action='/search' method='get'>
<input name='q' style='width:140px; height:18px; background-color:#FFF; color:#F5A9F2; font-size: 13px; border: 1px double #F5A9F2;border-radius:5px; box-shadow: 0 0 0.4em #F5A9F2, 0 0 0.4em #F5A9F2;' type='text' value=''/><input style=' font-size: 13px; background-color:#F5A9F2; color:#FFF; border: 1px #F5A9F2; border-radius:5px; box-shadow: 0 0 0.4em #F5A9F2, 0 0 0.4em #F5A9F2;' type='submit' value='Buscar'/></form>
</div>

Dale a Vista previa y si te gusta lo que vez, dale a Guardar plantilla. Si te gustaría personalizar su color solo modifica el código del cuarto *4TO* paso, cambia que eh resaltado de color verde por otro.

Bueno eso seria todo, bay espero les haya gustado >///<

Tutorial: Twitter Widget

Hola niñas como han estado? yo con un pequeño dolor de cabeza pero bueno, hay voy bien..

Chicas quieren compartir sus publicaciones de twitter de una forma personalizada?? Pues entonces yo les dire como, presten atencion a los siguientes pasos :)

Primero copia el siguiente codigo:

<div style="background:url(Url de tu fondo) no-repeat;width:200px!important"><script src="http://widgets.twimg.com/j/2/widget.js"></script><script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 5,interval: 30000,width:200,height: 207,theme: {shell: {background: 'transparent',color: 'transparent'},tweets: {background: 'transparent',color: '#333333',links: '#999999'}},features: {scrollbar: true,loop: false,live: false,behavior: 'all'}}).render().setUser('Nombre de usuario').start();</script></div> 

Luego solo habres un gadget  HTML/JavaScript y lo pegan

En las plantillas clasicas solo abren el dodigo para abrir un nuevo gadget y lo cierran como cualquier otro gadget

Guardar.

Rosita: Url del  background

Verde: Tu nombre de usuario del twiiter :)

Eso es todo .. Bay :*

T U T O R I A L: Trancisiones negrito, subrayado y cursiva :)

Hola chicas, como muchas me han pedido este tutorial hoy eh decidido mostrarles como se hace el truco de el texto subrayado, el texto en negrita y el texto el cursiva.....

para aprender este truco solo sigan los siguientes pasos:

♥ Copia el codigo

♥ Luego busca la etiqueta ]]></b:skin>

♥ y ahora pega justa arriba los siguiente:

i {
text-decoration:none;
color: grey;
}
u {
text-decoration:none;
color:#CCC;
padding: 1px;
line-height: 10px;
border-bottom: 3px solid #FFE1EF;
-webkit-transition: 0.5s;
}
u:hover {
border-bottom: 6px solid transparent;
-webkit-transition: 0.5s;
}
b {
color: #CCC;
font-weight: bold;
}

♥ Significaciones: Lo que esta de naranja es el color del texto de las palabras en subrayado y lo que esta de verde es el grueso, tipo y color de la linea que subraya el texto

♥ lo que esta de morado es lo que provoca que desaparezca la linea de abajo cuando se pasa el cursor

i = Cursiva

u = Subrayado

u Hover = transicion de desvanecimiento

 b = Negrita

& eso seria todo por hoy todo este codigo pueden cambiarlo a su gusto y darle a su blog un toque muy personalizado :DD

♥ PD:  todos los comentarios seras respondidos por mi, pero xfavor tenganmen paciencia que realmente estoy pasando por momentos duros ya sabes estudios y esas cosas ... gracias por sus mensajes en el chat y sobre afiliaciones todas seran respondidas pero relax people con P-A-C-I-E-N-C-I-A  xfavor :)

♥Las quiero :)♥

Burbujas que suben cuando se mueve el cursor!

Hola hola, como estan?? pss yo sufriendo porque hay una lluvia de lo mas rica ahorita, pero tengo que levantarme por que ya mismo tengo clases

Algunas personas estuvieron preguntandome como colocar las burbujas que tengo en mi blog de pruebas ok, yo les doy el codigo para colocarlas, antes que nada  seguimos los pasos:

Escritorio > Diseño > Añadir Gadget javaScript



Copian  y pegan el siguiente codigo:

<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#fff", "#fff", "#fff", "#fff", "#fff"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // maximum number of bubbles on screen


/****************************
* JavaScript Bubble Cursor *
* (c) 2010 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();


window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";


div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];


div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];


div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";


document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}


function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}


function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}


document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }


window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}


window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}


function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>

 bueno son tres tamaños de burbujas, osea son tres diferentes y si quieren burbujas bicolores cambian donde esta #ffff xq el color de burbuja que quieran

Efecto Zoom para autores del blog

Hola hola chicas!!  Pss hace tiempo quería preguntar...... les gusta el nuevo diseño?? ahh bueno lo cambie no se porque es que siempre ver lo mismo aveces aburre pero bueno.

Hoy les traigo un tuto de como poner la descripcion del autor del blog dentro de una imagen!! se preguntaran como pss mira en ejemplo en mi blog de pruebas ^.^

Ok si les gusta, empecemos:
Ve a Plantilla  Edicion del HTML Busca:

 ]]></b:skin

Luego encima del codigo buscado anteriormente pegamos el siguiente codigo:

#zooming {
width:110px;
height:110px;
display: inline-block;
position:relative;
}
#zooming img {
position:absolute;
width:110px;
height:110px;
-webkit-transition-duration: .80s;
}
#zooming:hover img{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
opacity:0.3;
-webkit-transition-duration: .70s;
}
.zoomingout {
float:center;
width:110px;
height:110px;
border: 2px solid #e4a2c7;
overflow:hidden;
-webkit-transition-duration: .59s;
}
.zoomingout:hover {
float:center;
width:110px;height:110px;
border: 2px solid #e377b4;
overflow:hidden;
-webkit-transition-duration: .59s;
}
#palavras a.header {
width:110px;
height:110px;
margin-left:-1px;
opacity:1;
margin-top:-0px;
padding:4px;
text-align: center;
color:#bb4487;
font-size: 10px;
padding: 5px 2px 10px 2px ;
}
#palavras {
width:110px;
height:110px;
margin-left:-1px;
opacity:1;
margin-top:-0px;
padding:4px;
text-align: center;
color:#434343;
font-size: 10px;
padding: 5px 2px 10px 2px ;
}

Damos vista previa que todo este bien y guardamos.

Luego se van a agregar un gadget de HTML/JavaScript y pegan el siguiente codigo:

<div id="zooming" class="zoomingout"><img src="Link de tu imagen" class="image4" />
<div id="palavras"><a href="link" class="header">Texto color rojo</a>
<br />
El texto de tus datos</div></div>

Le das a vista previa y a guardar!! y eso seria todo

Como usar el reproductor de musica #Billy

Hola chicas les vOy a enseñar como poner este reproductor ya que a muchas se les ah dificultado el manejo!! pero tranquilas a mi me paso igual la primera ves

Empecemos!!

Antes que nada debes subir tu Mp3 a un generador de codigos...... mi recomendacion es que usen FileDen.com , es el que yo uso y hasta ahora me anda bien ^^

Vayan a la pagina de 

BILLY

Luego  sigue los pasos de la siguiente imagen y todo fresOn 

NOTA: Si quieren poner varias canciones es super facil solo tienes que subir todas las canciones que quieran desde su ordenador a un generador de codigos mp3 y ponen en los espacios en blanco asi:

Le das clic a generar Code: 

Esperas....... y copias el codigo:

Por ultimo lo pegas en un Gadget HTML y le das a guardar ^.^

TUTORIAL PARA USAR GENERADOR DE CODIGOS MP3

Para subir su cancion tienen que seguir los pasos:

Crear una cuenta en FileDen.com

Luego con la cuenta ya creada buscan donde dice Upload y selecciona su archivo
Luego le dan a :

Esperan unos minutos y les aparecera esto:

Luego selecciona unicamente lo marcado en la imagen de abajo:

 

y eso es todo!! Adios

No olviden comentar