tag:blogger.com,1999:blog-73326431423488183472024-10-05T04:11:53.270+02:00 CÓDIGO todo CÓDIGOEs un blog de ayuda para poder personalizar nuestra web o blog.A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comBlogger69125tag:blogger.com,1999:blog-7332643142348818347.post-91071227480236008382021-12-21T16:50:00.004+01:002021-12-21T16:54:33.579+01:00FELIZ NAVIDAD
#textarea {
border-color:#63913E;
width:99%;height:300px;border: 6px solid #63913E;
}
EL CÓDIGO▼
.contenedor {
background-color: #BE501B;
padding-top: 50px;/*distancia de la caja de arriba*/
padding-bottom:20px;
width: 100%;
}
.regalo {
width: 100%;
margin: 0 auto;
}
.caja, .tapa {
background:
-webkit-radial-gradient(white 10%, transparent 15.1%),
A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.com0tag:blogger.com,1999:blog-7332643142348818347.post-86900695987403634102021-12-09T15:35:00.006+01:002021-12-09T15:39:42.144+01:00Un menú colorido
#textarea {
border-color:#63913E;
width:99%;height:300px;border: 6px solid #63913E;
cursor: pointer;
background: #D8E0EE;
}
EL CÓDIGO▼
.navmenu{
list-style: none;
margin: 0;
padding: 0;
font: bold 10px 'Lato', sans-serif; /* use google custom font "Lato" */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.com0tag:blogger.com,1999:blog-7332643142348818347.post-29257150271901917402021-12-02T16:16:00.007+01:002021-12-02T16:46:02.082+01:00FLEX reparte el espacio Flex no tiene una gran versatilidad pero es increíble a la hora de organizar y repartir el espacio en una página, os dejo un ejemplo muy gráfico a la par que útil, ya que de paso os nombro todos los tipos de cursores que se pueden definir en CSS (cortesía de TÉCNICA BLOGGER)
#textarea {
border-color:#63913E;
width:99%;height:300px;border: 6px solid #63913E;
A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.com0tag:blogger.com,1999:blog-7332643142348818347.post-52379579873339737072021-11-29T12:11:00.006+01:002021-11-29T21:16:15.361+01:00TEXTOS EN CAJAS RECONDEADAS
#textarea {
border-color:#63913E;
width:99%;height:300px;border: 6px solid #63913E;
cursor: pointer;
background: #D8E0EE;
}
EL CÓDIGO▼
#caja {
width: 90%; /*ANCHO TOTAL DE LA CAJA*/
color: #990000; /*COLOR DEL TEXTO*/
text-align:center;
margin:0px auto;
}
.redondeado {
height: 1px;
overflow: hidden;
background-color: #cccccc; /* COLOR DE LA CAJAA.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.com1tag:blogger.com,1999:blog-7332643142348818347.post-63211191935361354462021-11-27T17:04:00.051+01:002021-11-30T11:45:48.799+01:00Un Enlace Especial
#textarea {
border-color:#63913E;
width:99%;height:300px;border: 6px solid #63913E;
cursor: pointer;
background: #D8E0EE;
}
EL CÓDIGO▼
a.tooltip {
position:relative;
color:#0086BB;
text-decoration:none;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display:block;
position:absolute;
top:1.6em;
left:0.2em;
width:auto;
border:1px A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.com1tag:blogger.com,1999:blog-7332643142348818347.post-31730141724292640632021-11-26T15:54:00.021+01:002021-11-29T10:57:31.243+01:00Ejemplo de FLEXBOX
#textarea {
border-color:#63913E;
width:99%;height:300px;border: 6px solid #63913E;
background: #D8E0EE;
}
EL CÓDIGO▼
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.contenedor {
background:#ccc;
width:90%;
max-width:1000px;
margin:auto;
/* Flexbox */
display:flex;
flex-flow:row wrap;
}
body {
background:#e9e9e9;
}
header {
background:#A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.com0tag:blogger.com,1999:blog-7332643142348818347.post-74759803700912782052021-11-21T14:46:00.125+01:002021-11-29T10:57:55.690+01:00UN LINK CON ESTYLO
#textarea {
border-color:#63913E;
width:99%;height:300px;border: 6px solid #63913E;
background: #D8E0EE;
}
Widgets cortesia de Tecnica Blogger
EL CÓDIGO▼
ul.animatedbgul{
margin: 0;
padding: 0;
list-style: none;
} ul.animatedbgul li{
width: 100%;
clear:left;
overflow: hidden;
} ul.animatedbgul li span{ display: block; float: left;
min-widthA.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.com0tag:blogger.com,1999:blog-7332643142348818347.post-46501487985700032702021-11-19T16:52:00.021+01:002021-11-29T11:09:42.818+01:00HORA DE LEER EL PERIODICO
#textarea {
border-color:#63913E;
width:99%;height:300px;border: 6px solid #63913E;
background: #D8E0EE;
}
EL CÓDIGO▼
var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var diasSemana = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");
A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.com0tag:blogger.com,1999:blog-7332643142348818347.post-8651917002979722752016-10-14T22:06:00.000+02:002016-10-14T22:07:27.827+02:00PARA MOSTRAR UN ÍNDICE POR ETIQUETASEste es el script que hace el índice como un menu:
<script type ="text/javascript" > function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entryA.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-11590650210430237032016-08-13T21:42:00.003+02:002016-08-13T21:42:54.448+02:00Crear dos columnas de textoSIN IMAGEN:
<div style="padding: 10px; float: left; width: 45%; text-align: justify;">Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>
CON IMAGEN:
<div style="padding: 10px; float: left; width: 45%; text-align: justify;"><img style="margin: 0px; A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-74129645063825223612016-07-07T11:36:00.001+02:002016-07-07T11:36:42.414+02:00Cargar y usar en tu blog fuentes de iconosCarga la fuente. Coloca este código entre las etiquetas <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Allí donde quieres colocar el símbolo este código:
<span class="fa fa-home"></span>
Se le puede asignar estilo ejemplo:
<style>
.fa {display: inline-block;font-size: 40px;margin: A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-38899798419325877612016-05-14T21:06:00.003+02:002016-05-14T21:06:41.768+02:00Centrar un elemento o contenedor sin la etiqueta Center
<div align="center" ;">
Aquí lo que quereís centrar
</div>
No es compatible con Html5 utilizar en su lugar css
Sintaxis CSS: <div style = "text-align: center">
Probar el ejemplo:
<div style="text-align:center;border:1px solid red">
Aquí el elemento
</div>
A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-80190310722865562962016-04-29T09:48:00.000+02:002016-04-29T09:48:49.704+02:00OCULTAR "Mostrando entradas con la etiqueta..."Para ocultar este molesto mensaje en vuestra plantilla y antes de ]]></b:skin> colocáis este código:
.status-msg-wrap {visibility:hidden;display:none;}A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-41457562748687929992016-04-29T09:39:00.003+02:002016-04-29T09:48:38.232+02:00CENTRAR LA CABECERA DEL BLOGLo único que se necesita es este pequeño código colocado en vuestra plantilla antes de ]]></b:skin>
.header .widget { text-align:center;}.header img {margin:0 auto;}
A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-66166425704428383102016-04-28T17:59:00.000+02:002016-04-28T18:01:39.032+02:00INDICE POR ETIQUETAS DESPLEGABLE
Usaremos el Gadget de etiquetas propio de blogger, una vez añadido buscaremos su ID que suele ser label acompañado de un numero, si le ponéis un nombre cuando lo creéis os sera más fácil encontrarlo. Luego ampliáis el codigo dándole a la flechita que teneis a la izquierda y sustituis este codigo que os aparecerá :
<ul>
<b:loop values='data:labels' var='label'>
<li>
<A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-66818116748793449412016-01-02T13:21:00.000+01:002016-01-02T13:31:16.633+01:00CLIC PARA VER CONTENIDO ( de lo más simple)
El CSS propiamente dicho:
<style>
#activar ~ .desplegable {display: none;overflow: hidden;}
#activar:checked ~ .desplegable {display: block;}
</style>  A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-77852745523583729312016-01-02T12:54:00.001+01:002016-01-02T13:15:47.156+01:00REDONDEAR UNA IMAGEN EN VUESTRO BLOG.redondo img{
border: 2px solid grey;
margin: 0;
padding: 0;
border-radius: 800px;
overflow: hidden;
}
]]</b:skin>
El Html a colocar o bien en una entrada o en un gadgets:
<div class="redondo">
<img src="DIRECCION_IMAGEN"/>
</div>
A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-36157060394281288902015-10-22T20:10:00.004+02:002015-10-22T20:14:52.950+02:00¿DONDE ESTÁN LOS ESTILOS(CSS) EN BLOGGER?
Lo primero será acceder a vuestra plantillas presionando:
Una vez dentro del editor esto es lo que tenéis que buscar (para que os salga el buscado presionar CONTROL+F)
desplegáis la flecha que veis en el dibujo y se expandirá el codigo donde encontrareis el CSS y a las variables.
Muchos de los códigos que en este blog se muestran es justo ahí donde deben colocarse.A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-33872129544524973022015-09-27T00:40:00.000+02:002015-09-27T00:40:09.768+02:00Para ocultar y mostrar texto con un click<script type='text/JavaScript'> function blmostrocult(blconted) { var c=blconted.nextSibling; if(c.style.display=='none') { c.style.display='block'; } else { c.style.display='none'; } return false; } </script>
El código html que hace que funcione:
<a onclick="return blmostrocult(this);" style="cursor: hand; cursor: A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-24235548396048963262015-05-11T00:55:00.001+02:002015-05-11T01:00:37.976+02:00ABRIR TODOS LOS ENLACES EN NUEVA VENTANA
Para hacer que todos los enlaces de tu blog se abran en una nueva ventana o pestaña basta con poner este código después del <Head>
<a href="DIRECCION"target="_blank">Texto enlace</a>A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-498843193369769222015-05-06T19:01:00.003+02:002021-11-28T22:57:00.172+01:00Otra forma de presentar tus enlaces
#textarea {
border-color:#63913E;
width:99%;height:300px;border: 6px solid #63913E;
}
EL CÓDIGO▼
Técnica Blogger
Click para copiar
// Establecemos las variables
var textarea = document.getElementById("textarea");
var answer = document.getElementById("copyAnswer");
var copy = document.getElementById("copyBlock");
copy.addEventListener('A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-35094002320114110852015-05-03T18:35:00.000+02:002015-05-03T18:35:46.888+02:00Formateo de un texto en HTMLLos tres pilares fundamentales son tipo de fuente, tamaño de la letra y color(La etiqueta <font> No se admite en HTML5.)
<p><font face="verdana" color="red" size="60">
AQUÍ LO QUE QUERÁIS ESCRIBIR
</font></p>
font face:
Arial, TIMES NEW ROMAN, COURIER, VERDENA...
COLOR:
Colores y sus nombres
Otro atributos:
<B> Texto en negrita </B>A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-56339651184245977482015-05-03T14:23:00.003+02:002015-05-03T14:23:50.340+02:00Anotaciones dentro del código CSS Para hacer anotaciones dentro de nuestro código CSS, tu comentario debe ir entre /*y */.
Un ejemplo:
<style>
/*Esta es la forma de añadir comentarios CSS*/
...el codigo...
</style>
A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-65758719484087238892015-04-29T18:59:00.001+02:002021-11-28T19:35:36.756+01:00LA FECHA ACTUALIZADA DONDE QUIERAS ( y en castellano)Dos maneras de mostrar la fecha en vuestro blog o pagina web allí donde queráis:
SIMPLE:
(en blogger lo podéis colocar en un widget html)
<script>
var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var f=new Date();
document.write(f.getDate() + " de " + meses[f.getMonth()] + " de " + A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.comtag:blogger.com,1999:blog-7332643142348818347.post-64600117345813081282015-04-26T20:14:00.003+02:002021-11-28T19:30:03.840+01:00Un ejemplo de tratamiento de imágenes con CSS
<style>
img {
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-ms-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
.ex1 img:hover {
margin-top: 2px;
}
</style>
 A.M.Ghttp://www.blogger.com/profile/15403249468496420313noreply@blogger.com