]]></b:skin>
buscar ]]></b:skin>
buscar ]]></b:skin>
ej estudio
__________
El objetivo de este blog es mostrar los diseños, imágenes animadas, vídeos, souveniles, ediciones de audio, temas remixados y megamixes de mi autoria. también encontraran enlaces a los blog y paginas que he creado para distintas empresas,
Y aunque no es mi área, mi intención es facilitarles información de como modificar las plantillas de blogger para que puedan dar un toque personal a sus respectivos blog"s y algún que otro truquillo de relevancia para personalizar sus sitios y/o perfiles en la web.
Dicho esto, los invito cordialmente a recorrer el blog, disfrutarlo, criticarlo, amarlo, odiarlo.. en fin..,y si despues de visitarlo surgieron nuevas ideas para seguir creando, el proposito de este sitio ha sido cumplido.
Saludos amigos, atte Edgardo lafuente.
Y aunque no es mi área, mi intención es facilitarles información de como modificar las plantillas de blogger para que puedan dar un toque personal a sus respectivos blog"s y algún que otro truquillo de relevancia para personalizar sus sitios y/o perfiles en la web.
Dicho esto, los invito cordialmente a recorrer el blog, disfrutarlo, criticarlo, amarlo, odiarlo.. en fin..,y si despues de visitarlo surgieron nuevas ideas para seguir creando, el proposito de este sitio ha sido cumplido.
Saludos amigos, atte Edgardo lafuente.
domingo, 30 de marzo de 2014
En Esta Entrega, Te voy a Enseñar como configurar Una barra lateral del blog de enlaces en tu
Parrafo Esto Es Necesario introducir Serie DOS de codigos, el primero de ESTOS lo ubicaras en "EDICION DE HTML" (. Formulario de configuracion, la orientacion horizontal, el no molestar y Los Colores De Los Botones), y El Segundo lo ubicaras en la cabecera de tu blog, alojandolo en el Aparato de "HTML / JAVASCRIPT" (ESTE Codigo CONFIGURACIONES La CANTIDAD De Botones, el titulo de Los Mismos y el enlace url de las paginas Que asignes boton CADA un.
Que configurado 4 Barras horizontales Para Qué Copias el codigo Con El Color que mas Sí encajan a tu blog, (negro, gris, amarillo y rojo)
Comencemos:
1) Entra a "DISEÑO"
__________________________
CODIGO BOTONES NEGROS
/ * Menú horizontal
----------------------------------------------- * /
# Menu ul {margin: 0; list-style: none;}
# Menu li {display: inline; margin: 0; padding: 0;}
# Menú a {no-repeat Izquierda arriba; margin: 0 0 1.5px 1.5px; padding: 0 0 0 4px; text-decoration: none;}
# Menú Lapso ONU {float: left; display: block; background: url (http://img832.imageshack.us/img832/9943/bottonejestudio5.png) no-repeat Continua continúa derecha superior; padding: 5px 12px 12px 4px, el color : # fff;}
# Menú Lapso ONU {font: 12px negrita Arial, Helvetica, sans-serif; color: # 000; float: none;}
# Menu a: Lapso hover {color: # fff;}
# Menu a: hover {background-position: 0%-27px;}
# Menu a: Lapso hover {background-position: 100%-27px;}
. Claro {clear: left}
/ * Fin del menú * /
________________________
CODIGO BOTONES ROJOS
/ * Menú horizontal
----------------------------------------------- * /
# Menu ul {margin: 0; list-style: none;}
# Menu li {display: inline; margin: 0; padding: 0;}
# Menú a {no-repeat Izquierda arriba; margin: 0 0 1.5px 1.5px; padding: 0 0 0 4px; text-decoration: none;}
# Menú Lapso ONU {float: left; display: block; background: url (http://a.imageshack.us/img594/5764/bottonejestudiorojo.png) no-repeat Continua continúa derecha superior; padding: 5px 12px 12px 4px, el color : # fff;}
# Menú Lapso ONU {font: 12px negrita Arial, Helvetica, sans-serif; color: # 000; float: none;}
# Menu a: Lapso hover {color: # fff;}
# Menu a: hover {background-position: 0%-27px;}
# Menu a: Lapso hover {background-position: 100%-27px;}
. Claro {clear: left}
/ * Fin del menú * /
_______________________________
CODIGO BOTONES AMARILLOS
/ * Menú horizontal
----------------------------------------------- * /
# Menu ul {margin: 0; list-style: none;}
# Menu li {display: inline; margin: 0; padding: 0;}
# Menú a {no-repeat Izquierda arriba; margin: 0 0 1.5px 1.5px; padding: 0 0 0 4px; text-decoration: none;}
# Menú Lapso ONU {float: left; display: block; background: url (http://a.imageshack.us/img715/8199/bottonejestudioamarillo.png) no-repeat Continua continúa derecha superior; padding: 5px 12px 12px 4px, el color : # FFFFFF;}
# Menú Lapso ONU {font: 12px negrita Arial, Helvetica, sans-serif; color: # FFFFFF; float: none;}
# Menu a: Lapso hover {color: # FFFF00;}
# Menu a: hover {background-position: 0%-27px;}
# Menu a: Lapso hover {background-position: 100%-27px;}
. Claro {clear: left}
/ * Fin del menú * /
_______________________________
CODIGO BOTONES GRIS
/ * Menú horizontal
----------------------------------------------- * /
# Menu ul {margin: 0; list-style: none;}
# Menu li {display: inline; margin: 0; padding: 0;}
# Menú a {no-repeat Izquierda arriba; margin: 0 0 1.5px 1.5px; padding: 0 0 0 4px; text-decoration: none;}
# Menú Lapso ONU {float: left; display: block; background: url (http://a.imageshack.us/img594/6805/bottonejestudiogris.png) no-repeat Continua continúa derecha superior; padding: 5px 12px 12px 4px, el color : # FFFFFF;}
# Menú Lapso ONU {font: 12px negrita Arial, Helvetica, sans-serif; color: # FFFFFF; float: none;}
# Menu a: Lapso hover {color: # 000000;}
# Menu a: hover {background-position: 0%-27px;}
# Menu a: Lapso hover {background-position: 100%-27px;}
. Claro {clear: left}
/ * Fin del menú * /
5) LUEGO ve la ONU "GUARDAR PLANTILLAS" y luego a "GUARDAR CAMBIOS"
A Este ALTURA ya TENEMOS configurados the buttons, Pero todavia no ven Sí PORQUE TENEMOS Que insertar La Segunda serie de codigos!
6) Ve ONU "DISEÑO" un y luego "Anadir GADGET" en la cabecera del blog.
7) Busca el artilugio de "HTML / JAVASCRIPT" codigo siguiente y pega el.
8) pones LUEGO, ES "Titulo" el Nombre Que "URL" Quieras Que se vista en el boton y en
la direccion de la pagina web Que DESEAS enlazar.
Para agregar mas Pestañas Copia y pega Secuencia una,
9) Guarda los Cambios y Disfruta de tu barra personalizada horizontal!
En el Caso Que Tu BARRA HORIZONTAL aparezca en la Pantalla MUY PEQUEÑA, Vuelve a abrir el adminículo de where alojaste la ultima serie de codigos (en la cabecera del blog) y te encontras Que en el CADA Secuencia aparece this codigo "font-size: 0 " , reemplaza el 0 Por El numero 10 , te quedaras deveria asi; "font-size: 10" Valores Cambia baño TODAS Secuencias Que El los veas, solucionadoo LUEGO guarda los Cambios y Problema. ¡¡¡¡¡¡!
NOTA: NO TE Olvides QUE ANTES DE REALIZAR Cualquier CAMBIO EN EDCION DE HTML. DEBES REALIZAR UNA COPIA DE SEGURIDAD,
Espero Haber Sido muy claro y Que te SIRVA this explicacion!. Saludos y Hasta La Entrega proxima!
Edgardo Lafuente
_____________________________________________________________________________
Parrafo Esto Es Necesario introducir Serie DOS de codigos, el primero de ESTOS lo ubicaras en "EDICION DE HTML" (. Formulario de configuracion, la orientacion horizontal, el no molestar y Los Colores De Los Botones), y El Segundo lo ubicaras en la cabecera de tu blog, alojandolo en el Aparato de "HTML / JAVASCRIPT" (ESTE Codigo CONFIGURACIONES La CANTIDAD De Botones, el titulo de Los Mismos y el enlace url de las paginas Que asignes boton CADA un.
Que configurado 4 Barras horizontales Para Qué Copias el codigo Con El Color que mas Sí encajan a tu blog, (negro, gris, amarillo y rojo)
Comencemos:
1) Entra a "DISEÑO"
2) Edición de HTML
3) Buscamos el siguiente codigo: ]]></b:skin> , (Para ubicarlo rapido Teclea Ctrl + F, aparecera posicion de busqueda,)
4) Justo los los los antes del codigo Que buscaste pega el codigo Que corresponda al Que el color de de elegiste Para Tu Blog
__________________________
CODIGO BOTONES NEGROS
/ * Menú horizontal
----------------------------------------------- * /
# Menu ul {margin: 0; list-style: none;}
# Menu li {display: inline; margin: 0; padding: 0;}
# Menú a {no-repeat Izquierda arriba; margin: 0 0 1.5px 1.5px; padding: 0 0 0 4px; text-decoration: none;}
# Menú Lapso ONU {float: left; display: block; background: url (http://img832.imageshack.us/img832/9943/bottonejestudio5.png) no-repeat Continua continúa derecha superior; padding: 5px 12px 12px 4px, el color : # fff;}
# Menú Lapso ONU {font: 12px negrita Arial, Helvetica, sans-serif; color: # 000; float: none;}
# Menu a: Lapso hover {color: # fff;}
# Menu a: hover {background-position: 0%-27px;}
# Menu a: Lapso hover {background-position: 100%-27px;}
. Claro {clear: left}
/ * Fin del menú * /
________________________
CODIGO BOTONES ROJOS
/ * Menú horizontal
----------------------------------------------- * /
# Menu ul {margin: 0; list-style: none;}
# Menu li {display: inline; margin: 0; padding: 0;}
# Menú a {no-repeat Izquierda arriba; margin: 0 0 1.5px 1.5px; padding: 0 0 0 4px; text-decoration: none;}
# Menú Lapso ONU {float: left; display: block; background: url (http://a.imageshack.us/img594/5764/bottonejestudiorojo.png) no-repeat Continua continúa derecha superior; padding: 5px 12px 12px 4px, el color : # fff;}
# Menú Lapso ONU {font: 12px negrita Arial, Helvetica, sans-serif; color: # 000; float: none;}
# Menu a: Lapso hover {color: # fff;}
# Menu a: hover {background-position: 0%-27px;}
# Menu a: Lapso hover {background-position: 100%-27px;}
. Claro {clear: left}
/ * Fin del menú * /
_______________________________
CODIGO BOTONES AMARILLOS
/ * Menú horizontal
----------------------------------------------- * /
# Menu ul {margin: 0; list-style: none;}
# Menu li {display: inline; margin: 0; padding: 0;}
# Menú a {no-repeat Izquierda arriba; margin: 0 0 1.5px 1.5px; padding: 0 0 0 4px; text-decoration: none;}
# Menú Lapso ONU {float: left; display: block; background: url (http://a.imageshack.us/img715/8199/bottonejestudioamarillo.png) no-repeat Continua continúa derecha superior; padding: 5px 12px 12px 4px, el color : # FFFFFF;}
# Menú Lapso ONU {font: 12px negrita Arial, Helvetica, sans-serif; color: # FFFFFF; float: none;}
# Menu a: Lapso hover {color: # FFFF00;}
# Menu a: hover {background-position: 0%-27px;}
# Menu a: Lapso hover {background-position: 100%-27px;}
. Claro {clear: left}
/ * Fin del menú * /
_______________________________
CODIGO BOTONES GRIS
/ * Menú horizontal
----------------------------------------------- * /
# Menu ul {margin: 0; list-style: none;}
# Menu li {display: inline; margin: 0; padding: 0;}
# Menú a {no-repeat Izquierda arriba; margin: 0 0 1.5px 1.5px; padding: 0 0 0 4px; text-decoration: none;}
# Menú Lapso ONU {float: left; display: block; background: url (http://a.imageshack.us/img594/6805/bottonejestudiogris.png) no-repeat Continua continúa derecha superior; padding: 5px 12px 12px 4px, el color : # FFFFFF;}
# Menú Lapso ONU {font: 12px negrita Arial, Helvetica, sans-serif; color: # FFFFFF; float: none;}
# Menu a: Lapso hover {color: # 000000;}
# Menu a: hover {background-position: 0%-27px;}
# Menu a: Lapso hover {background-position: 100%-27px;}
. Claro {clear: left}
/ * Fin del menú * /
5) LUEGO ve la ONU "GUARDAR PLANTILLAS" y luego a "GUARDAR CAMBIOS"
A Este ALTURA ya TENEMOS configurados the buttons, Pero todavia no ven Sí PORQUE TENEMOS Que insertar La Segunda serie de codigos!
6) Ve ONU "DISEÑO" un y luego "Anadir GADGET" en la cabecera del blog.
7) Busca el artilugio de "HTML / JAVASCRIPT" codigo siguiente y pega el.
8) pones LUEGO, ES "Titulo" el Nombre Que "URL" Quieras Que se vista en el boton y en
la direccion de la pagina web Que DESEAS enlazar.
Para agregar mas Pestañas Copia y pega Secuencia una,
9) Guarda los Cambios y Disfruta de tu barra personalizada horizontal!
En el Caso Que Tu BARRA HORIZONTAL aparezca en la Pantalla MUY PEQUEÑA, Vuelve a abrir el adminículo de where alojaste la ultima serie de codigos (en la cabecera del blog) y te encontras Que en el CADA Secuencia aparece this codigo "font-size: 0 " , reemplaza el 0 Por El numero 10 , te quedaras deveria asi; "font-size: 10" Valores Cambia baño TODAS Secuencias Que El los veas, solucionadoo LUEGO guarda los Cambios y Problema. ¡¡¡¡¡¡!
NOTA: NO TE Olvides QUE ANTES DE REALIZAR Cualquier CAMBIO EN EDCION DE HTML. DEBES REALIZAR UNA COPIA DE SEGURIDAD,
Espero Haber Sido muy claro y Que te SIRVA this explicacion!. Saludos y Hasta La Entrega proxima!
Edgardo Lafuente
_____________________________________________________________________________
Para aquellos fanaticos de la musica, les dejo el codigo de esta ventana de videos deslizables y las intrucciones para que puedan modificar sus dimenciones y colores a fin de armonizar con el diseño de su pagina o blog.
AQUI TE DEJO EL EJEMPLO CREADO POR EJ ESTUDIO.
EJ ESTUDIO: recursos para tu web
Copia el siguiente código luego entra a DISEÑO, luego hace click en AÑADIR UN GADGET y luego en HTML JABASCRIPT de tu blog de blogger y pegalo ahí, (o en cualquier lugar de tu sitio web.)
___________________________________________________________
/////////COPIA EL CODIGO DE ABAJO Y PEGALO EN TU BLOG///////////
-------------------------------------------------------------------------------------
<table border="0" cellspacing="1" cellpadding="3" width="350" bgcolor="#fffff" align="center">
<tbody><tr>
<th bgcolor="#151515">
<b><font color="red"><strong>Mis videos FAVORITOS!!</strong></font><div style="WIDTH: 344px; HEIGHT: 270px; OVERFLOW: auto"><strong>lo mejor del 2014:</strong><iframe title="YouTube video player" height="255" src="http://www.youtube.com/embed/K-Zw2lew69o" frameborder="0" width="300"></iframe>
<iframe title="YouTube video player" height="250" src="http://www.youtube.com/embed/7zp1TbLFPp8" frameborder="0" width="300"></iframe>
<iframe title="YouTube video player" height="250" src="http://www.youtube.com/embed/gqQe9ks9SQg" frameborder="0" width="300"></iframe>
<iframe title="YouTube video player" height="250" src="http://www.youtube.com/embed/i0ztXc7D494" frameborder="0" width="300"></iframe>
</div></b>
</th></tr></tbody></table><a href="http://ej-estudio.blogspot.com/"> EJ ESTUDIO: recursos para tu web</a>
________________________________________________
///////////////////////FINAL DEL CODIGO//////////////////////////
-------------------------------------------------------------
INTRUCCIONES PARA MODIFICAR LOS VALORES:
Cada color representa un valor que podes ajustar a tu gusto para personalizar tu ventana de vídeos,
a continuación te explico todo siguiendo cada color
width="350": define el ancho vertical de la ventana. ejemplo: ventana mas grande el valor seria de "400"
bgcolor="#fffff" : define el color del borde externo( en este caso es blanco. para elegir otros colores
hace click aqui y encontraras códigos de colores exadecimales
th bgcolor="#151515: define el color del contenido de la ventana(en este caso es negro)
font color="red":Define el color del titulo (en este caso es rojo). otros colores para reemplazar :
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
siempre entre las" "( comillas)
Mis videos FAVORITOS!: Borra y pone el tutulo que quieras
WIDTH: 344px; HEIGHT: 270px; Define el ancho y el alto de la pantalla del video
NOTA: LAS DIMENCIONES DEL VIDEO SIEMPRE TIENEN QUE SER IGUALES O MENOR QUE LA DIMENSION DE LA PANTALLA
lo mejor del 2014: Aqui podes cambiar el SUB TUTULO.
<iframe > aqui empieza un video y </iframe> aqui termina,
BORRALOS A TODOS,
Ahora anda a YOUTUBE elegi tus videos favoritos, luego hace click en COMPARTIR y luego en INSERTAR VINCULO, elegi al opcion de TAMAÑO PERSONALIZADO y en el escacio del "wichd" digita el "300"., copias el codigo y lo pegas exactamente donde borraste los codigos violeta
Copia y pega cuantos videos quieras!!.
Parece complicado pero la verdad es que es muy facil, solo hay que ponerle ganas. Espero que les guste este aporte y si tenes alguna duda mandame un mensaje con el formulario del costado.
Saludos; Edgardo Lafuente
AQUI TE DEJO EL EJEMPLO CREADO POR EJ ESTUDIO.
| Mis videos FAVORITOS!!
lo mejor del 2014:
|
|---|
Copia el siguiente código luego entra a DISEÑO, luego hace click en AÑADIR UN GADGET y luego en HTML JABASCRIPT de tu blog de blogger y pegalo ahí, (o en cualquier lugar de tu sitio web.)
___________________________________________________________
miércoles, 27 de noviembre de 2013
Suscribirse a:
Entradas (Atom)
