lunes, 31 de diciembre de 2012


FELIZ AÑO EN CSS


¡Feliz Año 2013!

les desea
TÉCNICA BLOGGER
Esta gracia navideña está realizada íntegramente en código CSS, código que encontrareis en ese maravilloso espacio ya por todos conocido de ,Ciudad Blogger...solo tendréis que cambiar las frases al final del código y si lo deseas mas pequeño el height y el width del principio. Para eliminar alguna bola justo después de "/style" las tienes todas en sus distintos colores elimina el div que la contiene y listo.

miércoles, 19 de diciembre de 2012

SIN ESFUERZO

No he podido resistirme


...Esto de que otros hagan el trabajo más costoso, no es que esté de moda, es que nunca pasara de moda, jejeje.
Evidentemente los resultados no son los exactamente deseados, o si, pero es innegable que nos ahorra un montón de tiempo, para estos menesteres, están los llamados generadores de código y en esta ocasión os voy a remitir a un excelente blog, de lo mejorcito que me he encontrado en la red, que nos proporciona una extensa lista de generadores CSS y muchas otras cosas más, explorarlo no os arrepentiréis:


Transformamos tus ideas en código

sábado, 15 de diciembre de 2012

Decora tus textos en unos cuantos cliks


A veces resulta enrevesado incluso difícil llevar a cabo un buen código css que realice aquello que queremos para nuestro blog en lo que a textos se refiere, para ello, contamos, menos mal, con una excelente pagina, que hace el trabajo sucio, un generador de textos en css online, en el que tan solo tendremos que introducir el texto de nuestro post... y los efectos deseados.
Oí hablar de este excelente generador en este magnifico blog en el que ademas encontrareis otras muchas cosas útiles:trucosblogsblogger

PASO A PASO


copias el código generado en tu entrada del blog en modo html(espero que os valga la explicación. Gracias por vuestra visita.

sábado, 8 de diciembre de 2012



CONTADOR USUARIOS

    En esta ocasión os remito a una pagina, donde podréis crear un contador de visitantes online , fácil y sin complicaciones, tan solo deberéis ingresar la dirección de vuestro blog, y el código a incrustar estará listo en apenas unos segundos, más sencillo, imposible.

El resultado, este:

Usuarios Online

domingo, 2 de diciembre de 2012

SECCIONES EN TU PÁGINA
O
ENTRADA

SECCIONES DE LA ENTRADA

EL CODIGO DEL TRUCO
ESTE MENU
EXPLICACIÓN DETALLADA

CODIGO<a name="NOMBRE DE LA SECCIÓN"></a>DELANTE DE LA SECCIÓN, ES COMO ETIQUETAR UN ESPACIO DETERMINADO DE LA PÁGINA Y ESTE OTRO <a href="#NOMBRE DE LA SECCIÓN">TITULO DEL ENLACE</a> ES EL ENLACE PROPIAMENTE DICHO.
VOLVER AL MENU


ESTE MENU<a name="MENU"></a><CENTER><table border="2" cellspacing="0" cellpadding="10" width="150" bgcolor="#180101" bordercolor="#3B2020"><tbody> <tr> <td valign="top" width="150"><div style="text-align:center"><font color="#D38B8B"><b><h3>SECCIONES DE LA ENTRADA</h3></b></font></div> <center> <a href="#CODIGO"><font color="#75D979"><h5>EL CODIGO DEL TRUCO</h5></font></a> <a href="#ESTE MENU"><h5></h5><font color="#D5D975"><h5>ESTE MENU</h5></font></a> <a href="#EXPLICACIÓN DETALLADA"><font color="#FFF"><h5>EXPLICACIÓN DETALLADA </h5></font></a> </center></td></tr></tbody></table></CENTER>
Este es el codigo concreto de este menu aplicando el codigo del truco, en la siguiente sección os explico detalladamente cada parte. VOLVER AL MENU

EXPLICACIÓN DETALLADA<a name="MENU"></a>
EL COMANDO QUE NOS HARÁ VOLVER
<CENTER><table border="2" cellspacing="0" cellpadding="10" width="150" bgcolor="#180101" bordercolor="#3B2020"><tbody> <tr> <td valign="top" width="150"><div style="text-align:center"><font color="#D38B8B"><b><h3>SECCIONES DE LA ENTRADA </h3></b></font></div> <center>
LA CAJA DONDE QUEDARÁ ENCERRADO EL MENU
<a href="#CODIGO"><font color="#75D979"><h5>EL CODIGO DEL TRUCO</h5></font></a> <a href="#ESTE MENU"><h5></h5><font color="#D5D975"><h5>ESTE MENU</h5></font></a> <a href="#EXPLICACIÓN DETALLADA"><font color="#FFF"><h5>EXPLICACIÓN DETALLADA </h5></font></a>
LOS LINK QUE NOS LLEVARAN A LA SECCION INDICADA
</center></td></tr></tbody></table></center>
CERRAR LA CAJA
No olvideis colocar delante de cada seccion el comando indicadao <a name="NOMBRE SECCIÓN"></a>

VOLVER AL MENU
<

sábado, 24 de noviembre de 2012


UN BLOG CON ESTYLO

   Os voy a referenciar a un blog que ya debería ser conocido por todos nosotros, pero por si acaso insisto jejeje...en este apartado al que os remito, se ofrecen una serie de trucos sencillos pero altamente prácticos para manejar con destreza los entresijos de nuestro blog, uno de los trucos que nos ofrece es este: Dentro de la plantilla de nuestro espacio bloguero, hay una etiqueta en la que se colocan esos códigos tan extraños como necesarios, llamados CSS y que dan un estilo particular a nuestro espacio:


<b:skin><![CDATA[/*
(aquí va el estilo con un montoooooooón de código CSS)
]]></b:skin>





AYUDA:CÓDIGO todo CÓDIGO
ó
BÁJATE AL FORO

jueves, 11 de octubre de 2012


¿Un Foro dentro de tu Blog?

¿DONDE?
Presionando la imagen de abajo accederéis al sitio donde se logra esto; he de decir que el foro es excelente, su inconveniente aun está por evaluar de mi parte, ya que se advierte al crearlo, que a los treinta días de su uso, se colocara publicidad, ignoro los resultados tras este periodo, pero en que transcurra os lo comentaré. Si queréis ver como queda, en este mismo blog lo encontrareis mirar bien.
(Por cierto, si os gusta este marquito en el texto, en Código todo Código, encontrareis la forma de hacerlo buscar "enmarcar un texto")

¿Cómo hacerlo?
Presionando la imagen de abajo accederéis al sitio donde se explica con toda claridad como llevarlo a cabo. Es un espacio bastante digno y entretenido, deteneros a investigarlo.
(Por cierto, si os gusta este marquito en el texto, en Código todo Código, encontrareis la forma de hacerlo buscar "enmarcar un texto")


AYUDA:CÓDIGO todo CÓDIGO
ó
BÁJATE AL FORO

lunes, 8 de octubre de 2012

Poner texto sobre una imagen usando CSS

Y apagaremos las luces
Para escuchar el silencio
Y sólo la luz
nos hará retenerlo

¿Os gusta el efecto? el desarrollo del truco aquí:

viernes, 21 de septiembre de 2012

Imágenes con texto oculto (PASAR EL RATÓN)

¿Que os parece esta imagen con texto oculto? ¿Está original verdad? Pues pinchar sobre la imagen y averiguareis la sencillez de este truco.


martes, 18 de septiembre de 2012

UNA PRESENTACIÓN ORIGINAL



¿Os gusta esta manera de presentar vuestros enlaces preferidos? Presionar sobre el libro y veréis lo sencillo que es.
El codigo final para que se convierta en un en lace es este:
<div class="libro"><span class="sombra"></span><a href="AQUÍ EN ENLACE" target="blank"><img alt="" src="AQUÍ LA IMAGEN" /></a></div>

miércoles, 12 de septiembre de 2012

TEXTOS DESLIZANTES

Como podéis observar no es nada difícil crear este efecto, un código sencillo y con múltiples posibilidades. Prueba a cambiar el color del fondo de la caja (bgcolor=), las dimensiones del borde (border=) y del contenedor (width:) e incluso la velocidad (scrollamount=)

<div align="center"><table bgcolor="#990000" border="1" width="200"><tbody><tr><td align="center"><marquee scrollamount="1" direction="up" height="70"><span style="color:#ffffff;">AQUÍ ELTEXTO</span></marquee></td></tr></tbody></table></div>

Hoy dos trucos por el precio de uno jejeje, con respecto al título de la entrada, encerrar éste en una caja de color es igualmente sencillo con el siguiente código:

<div align="center"><table bgcolor="#990000" border="1" width="200"><tbody><tr><td align="center"><span style="color:#ffffff;">AQUÍ EL TEXTO</span></marquee></td></tr></tbody></table></div>

sábado, 1 de septiembre de 2012

Plantillas geniales y explicadísimas


¿Veis esta plantilla? me ha gustado mucho y hay muchas más, con perfectas explicaciones de como convertirlas en vuestro blog. Un espacio genial, que he incluido merecidamente entre mis imprescindibles:


miércoles, 22 de agosto de 2012

TEXTOS EN CAJAS REDONDEADAS

Este es un texto encerrado en una caja con esquinas redondas. ¿Te gustaria poder contar con este recurso siempre que quieras?.

Pega este código en la plantilla de tu blog justo antes de
]]></b:skin>:


#caja {
width: 400px; /*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 CAJA */
}
/* LAS LINEAS PARA FORMAR LA PARTE REDONDEADA */
.r1 { margin: 0 12px;}
.r2 { margin: 0 9px;}
.r3 { margin: 0 7px;}
.r4 { margin: 0 6px;}
.r5 { margin: 0 5px;}
.r6 { margin: 0 4px;}
.r7 { margin: 0 3px;}
.r8 { margin: 0 2px; height: 2px;}
.r9 { margin: 0 1px; height: 3px; }
.contenido {
height: auto;
padding: 0 15px;
}

Luego allí donde queráis colocar esta caja redondeada de texto colocáis este código HTML:

<div id="caja">
<div class="redondeado r1"></div>
<div class="redondeado r2"></div>
<div class="redondeado r3"></div>
<div class="redondeado r4"></div>
<div class="redondeado r5"></div>
<div class="redondeado r6"></div>
<div class="redondeado r7"></div>
<div class="redondeado r8"></div>
<div class="redondeado r9"></div>
<div class="redondeado contenido">Este es un texto encerrado en una caja con esquinas redondas. No importa el tamaño del texto, porque la parte central conserva las dimensiones necesarias.</div>
<div class="redondeado r9"></div>
<div class="redondeado r8"></div>
<div class="redondeado r7"></div>
<div class="redondeado r6"></div>
<div class="redondeado r5"></div>
<div class="redondeado r4"></div>
<div class="redondeado r3"></div>
<div class="redondeado r2"></div>
<div class="redondeado r1"></div>
</div>
Debéis tener en cuenta que tanto el nombre caja"#caja" como la definición "redondeado", pueden ser variados. En algunos casos podría no funcionar este truco, simplemente por que en otro lugar de tu blog ya han sido utilizados. Han de ser variados en ambos códigos no lo olvidéis.

No quiero terminar, sin antes nombrar la fuente que me ha proporcionado este genial truco, que he decido reflejar íntegramente en este blog, por las aclaraciones que sobre el realizo.
Vaya pues mi agradecimiento a:

lunes, 20 de agosto de 2012

Un Título de Entrada diferente.

¿Os gusta esta manera de presentar los títulos de vuestras entradas? El milagro lo opera como no podía ser de otra manera, el código CSS, los recurrentes stylos. Es sencillo y debe colocarse justo antes de esta instrucción(]]></b:skin>)en el html de vuestro blog:

h3.post-title {
display:block;
overflow:hidden;
width: 85%; 
height: 2em;
margin: 5px 0 0 -28px
padding:2px 4px 4px 40px;
background: #333;
border: 1px solid #555;
border-radius:10px 10px 0 0;(
line-height:1.10em;
}
.trih3 {display: block;
z-index: -1;
height: 0px;
width: 0px;
margin: -12px 0 0 -40px;
border: 12px solid transparent;
border-right: 12px solid #222;
}



POSIBLES VARIACIONES
width: 85%;   (variando este valor conseguiréis alargar la tira) 
( "         "    "    el largo del rectángulo)
background: #333;(este valor corresponde al color del fondo)
border-radius:10px 10px 0 0;(y estos valores mejor hacéis pruebas jejeje, bueno una pista: la redondeces de la tira)

Todo esto no serviría para nada si no añadís en vuestra plantilla ya dentro de expandir plantilla de artilugios, una capa vacía de lo creado: <div class='trih3'/> ¿donde? debéis buscar post.title y .... el final del truquito acudir allí de donde yo vengo:

http://www.oloblogger.com/2012/07/titulo-con-forma-de-banda-superpuesta.html



martes, 7 de agosto de 2012

¿Quieres saber cuántos y de dónde son tus visitantes?

Un espacio cómodo y fácil donde encontrarás distintos modelos de contadores para colocar en tu blog y totalmente gratis.

viernes, 27 de julio de 2012

UNA IMAGEN COMO FONDO

Como veis es posible colocar una imagen como fondo tanto en el título de la entrada como en la entrada misma el código que obra este milagro es el siguiente:



<div style="background-image: url(URL DE LA IMAGEN); padding: 40px;">el contenido</div>


No os olvidéis de cerrar el div, y colocar todo lo que queráis que esté dentro del fondo, antes de cerrarlo...

Este es un ejemplo

domingo, 15 de julio de 2012

Cambiar el Color de los títulos de Entrada

Este pequeño código nos servirá para hacer de los títulos de nuestras entradas, un auténtico arco iris:

<font color="#00000">TÍTULO DE LA ENTRADA</font>

Y aquí la fuente y una explicación mas exhaustiva de este truco:

viernes, 13 de julio de 2012

CSS para vuestro blog

Hoy voy a recomendaros una página de la que yo misma soy asidua desde hace mucho tiempo; contiene multitud de recurso de todo tipo y para todos los lenguajes, pero en esta ocasión voy a detenerme en los "estylos" y el lenguaje CSS, muy en boga en la actualidad y ciertamente práctico para los que no queremos saturar nuestro espacio de Scripts pesados y relentizantes, pero, gustamos de los adornos y efectos llamativos que ayudan sin duda ha hacer mas entretenidos nuestros blog.
Bien sin más,aquí os dejo la página en cuestión,justo en el apartado de este magnético lenguaje:

Y este es solo un ejemplo de lo que os podeis encontrar disfrutarlo:


lunes, 9 de julio de 2012

¿Qué es Pay With a Twitter?

Pues una nueva forma de pagar lo que te descargas de aquellos seres maravillosos que te ofrecen su trabajo desinteresadamente, no es dinero, es: PUBLICIDAD... y si eres tú ese ser maravilloso, esto, te convendría. Enterate de que va en este enlace:


lunes, 2 de julio de 2012

PROBAR CODIGO

Dabblet, es un excelente lugar online, para probar nuestros códigos o los de los demás, es perfecto,combina tanto css como html, y cada cosa en su orden, sin líos, pruebalo y veras como te convence.

domingo, 1 de julio de 2012

Pasa el ratón y veras lo que pasa

TE HA GUSTADO

Vagabundia

Vagabundia es un blog en el que hallarás multitud de recursos, tutoriales, códigos, tanto html como css; quizá, el nivel sea un tanto alto, pero, no esta de mas que te des de vez en cuando una vueltecita por él y encontraras, si tienes paciencia, cosas tan tinteresantes como esta.

Este efecto

martes, 26 de junio de 2012

Adios al ''Subrayado'' de los enlaces en Blogger

En este enlace concreto de este magnifico blog de ayuda encontrareis la manera de quitar el incomodo subrayado, de los enlaces de tu blog. Si lo que queréis es quitar el subrayado de las entradas acudir a esta linea "post-title a:hover { " y proceder de la misma manera.

viernes, 22 de junio de 2012

AGRANDAR LAS MINIATURAS DE LOS GADGETS

Entradas populares, las listas de blog etc. Todas esas imágenes pueden hacerse más grandes, en esta dirección concreta del gran blog oloblogger, descubriréis cómo hacerlo.

martes, 19 de junio de 2012

Insertar imagen detrás del texto de una entrada del blog

Esto también lo puedes hacer tu...

jueves, 14 de junio de 2012

Charla con tus visitantes

Crear un widget de correo de voz en su sitio web o añadir la aplicación de correo de voz a su página de Facebook nunca fue tan sencillo...