2011 ~ Teoría Blogger

sábado, 31 de diciembre de 2011

Las mejores plantillas de juegos

14:43 Teoría Blogger 3 comentarios

Concurrimos, una vez más, a Btemplates para buscar las mejores plantillas para blogs que se traten de juegos.

Para usar una plantilla en tu blog

Una vez que hayamos elegido la plantilla que nos gustó, vamos a descargarlo haciendo click en el botón "Download" y guardaremos un archivo que nos descargará como archivo .zip.

Hacer click en Download para descargar el archivo .zip

Vamos a la carpeta Descargas (o carpeta que contiene el archivo .zip) y hacemos click derecho en ese archivo, y click en "Extraer aquí" (o "Extract Here")

para descomprimir el archivo de formato XML, el archivo que subiremos a Blogger (esto es probable que aparezca dentro de una carpeta con el mismo nombre de la plantilla)

Vamos a Blogger → Plantilla → Botón, Edición de HTML [En la vieja interfaz, Diseño → Edición de HTML], hacemos click en y seleccionamos el archivo XML de la carpeta, que se puede ver en la imagen anterior. Hacemos click en http://www.blogger.com/img/blank.gif

Nota:
Para descomprimir el archivo .zip, es decir, hacer click derecho y "extraer aquí", debes tener instalado en tu ordenador un programa para descomprimir archivos o descomprensor. Puedes descargar Win rar o programas similares. No son muy pesados.
Para más info, click aquí: http://www.softonic.com/s/descompresor

Video explicativo
Ver video en Teoría Blogger videos | Ir a Teoría Blogger videos

sábado, 3 de diciembre de 2011

Etiqueta a - Crear enlaces (links)

4:04 Teoría Blogger 1 comentario

Esta etiqueta es una de las más utilizadas ya que gracias a ella se crean los famosos enlaces o links. Los links nos enlazan o nos llevan a otras páginas al hacer click en uno de ellos.

Ejemplo

Un simple ejemplo, es el siguiente que nos llevará al inicio de esta página Teoría Blogger.

Sintaxis

Como siempre, remarcamos la sitaxis de cada etiqueta, es decir, cómo hacerlo, de qué se compone.
Para crear el link necesitaremos de:
- La etiqueta de apertura

<a>

- Dentro de la etiqueta pondremos el atributo href y dentro pondremos la URL de la página

- El contenido que nos va a decir qué es el link.

"Teoría Blogger"

- La etiqueta de clausura

</a>

Código final

<a href="http://teoriablogger.blogspot.com">Teoría Blogger</a>

Teoría Blogger

Atributos que más se usan

En la etiqueta <a> se usan los siguientes atributos:

Atributos	Muestra de sitaxis	Obligatorio	Función
href	<a href="URL"/>	SÍ	Sin esto, no podemos indicar a qué página nos debe llevar el navegador.
target="_blank"	<a target="_blank"/>	NO	Con este atributo podemos la página se abre en otra pestaña o ventana.
style	<a style=""/>
id	<a id=""/>
class	<a class=""/>
title	<a title=""/>

domingo, 11 de septiembre de 2011

Encuestas muy interesantes para tu blog

1:04 Teoría Blogger Comentá!

Seguramente la mayoría de los blogueros de Blogger, han puesto una encuesta en su blog con el gadget que nos ofrece Blogger. Si bien es una opción, existe una página que no sólo crea las encuestas, sino que también nos da la oportunidad de modificarlas y personalizarlas.

Esta es la opción que nos ofrece Blogger
para insertar una encuesta en el diseño del blog

99polls es una página que nos permite crear encuestas flash. Dichas encuestas de dicha página, son simples, ya que cuentan con lo escencial: La pregunta, las opciones, un botón para votar y un botón de resultado.
También nos permite modificar sus colores (ya sean los de las letras, de las preguntas, de los bordes).
Una de las características, respecto de su función, es que sólo nos permite votar una sola vez. De ninguna manera se puede votar dos veces (salvo que tengamos dos ordenadores).

Crear encuestas gratis y eficientes1- Vamos a 99polls.com
2- Damos clic a Registrarse
registrarse en 99polls.com

4- Llenamos el simple formulario y damos clic en donde dice "Para hacer su primera encuesta Hacer clic acá" (como se ve en la siguiente imagen). Crear nuestra primer encuesta

5- Ahora vamos a elegir las funciones de la encuesta:
a) Allí elegimos el diseño (Tema) de la encuesta, entre la gran variedad que se nos presenta.
b) El ancho de la encuesta (recuerda que los números son en píxeles).
c) El color del fondo con código hex. O también puedes cambiarlo con la paleta que nos ofrece.
d) La pregunta la cual vamos a interrogar a los lectores
f) Las respuestas que nos van a dar los lectores (hay un límite de hasta 9 respuestas). Además nos da la opción que asignarle una imagen para cada encuesta.
g) Luego nos da la opción de elegir si queremos que nuestra encuesta aparezca en el listado de encuesta de 99polls.com o no.
h) Aquí van una especie de etiquetas o tags que se ponen para que sea más facil la búsqueda de tu encuesta.
Personalizar tu encuesta

6- Una vez hecho todo, hacemos clic en el botón guardar y luego nos aparecerá la página en la que nos aparece el código para insertar lo en el sidebar o en un post.
Lo copiamos y lo pegamos en donde quieras (los sectores ya nombrados).
Copiar el código de la encuesta y pegarla en un post o el sidebar

Copiar el código de la encuesta y pegarla en un post o el sidebar

7- Para insertarlo en tu blog debemos ir a Blogger y debemos elegir entre publicarlo en una entrada o en un gadget.
Si es en una entrada vamos a Creación de entradas → Nueva entrada → Y lo pegamos en el editor de entradas. Luego lo publicamos.
En cambio, si es en un gadget, vamos a Diseño → Elementos de la página → Añadir un gadget → Elegimos el gadget de tipo HTML/Javascript y lo pegamos allí. Luego lo guardamos.

Crear un diseño para tu encuesta

Cuando creamos la encuesta, en el paso 5- a, elegimos el tema para la encuesta. Las opciones son variadas, pero puede pasar que no estemos satisfechos con algún diseño y queremos que tenga los colores que nosotros queramos.
Para eso vamos a la solapa "Mis Temas" que aparece en la siguiente imagen:

Una vez que entramos en la solapa Mis Temas, hacemos clic en donde dice "Para hacer su primer tema Hacer clic acá".
Crear el primer tema

Allí tenemos todas las opciones para modificar o crear tu tema para tu encuesta.

Consejo
Puedes crear un tema que tenga los colores de tu blog para que tenga la misma temática de éste.

sábado, 10 de septiembre de 2011

¿Cuántas entradas tiene tu blog?

0:27 Teoría Blogger 3 comentarios

Este truco consiste en un gadget que mediante un script, puede mostrarte la cantidad de entradas publicadas en tu blog.
Es una pequeña función que a pesar de que es lo único que muestra, se actualiza sólo. Es decir, una vez que publiquemos más entradas no hay que modificar nada.

Cantidad de entradas en gadgetVamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Seleccionamos el tipo de gadget HTML/Javascript y pegamos el siguiente código:

Este blog tiene <script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src=http://tublog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount>
</script> entradas

Lo que hay que modificar es lo que está escrito en verde, allí tenes que asignar tu dominio blogspot; y lo que está escrito en rojo, allí tenes la opción de elegir si querés borrar o no el mensaje para que aparezca el número en una frase.
Por ejemplo "Este blog tiene ..... entradas"

viernes, 2 de septiembre de 2011

Etiqueta hr

14:22 Teoría Blogger Comentá!

La etiqueta <hr> se indica cuando se quiere llevar a cabo una línea horizontal para separar un texto con otro. El uso frecuente de esta etiqueta en un solo post o página puede resultar desprolijo e innecesario.

Sintaxis

Para determinar esta línea horizontal vamos a escribir solo una etiqueta: <br/>. ¿Por qué no usamos dos etiquetas, la de incio y la de final? Porque esta etiqueta no encierra un contenido de ninguna manera.

<hr/>

El resultado de esta etiqueta nos da una barra horizontal como esta:

Atributos que más se usan

Atributos	Muestra de sitaxis
style	<hr style=""/>
id	<hr id=""/>
class	<hr class=""/>
width	<hr width=""/>
align	<hr align=""/>

domingo, 28 de agosto de 2011

Imagen flotante solo en una entrada particular

12:04 Teoría Blogger Comentá!

Para que se entienda mejor esto, paso a explicar. El "truco" consiste en hacer que una imagen (cualquiera) flote en la parte inferior, es decir, que esta imagen esté siempre presente en la entrada en la que vamos a insertar esta imagen.
Podemos ver el ejemplo en esta entrada en particular, donde la imagen que aparece abajo es sólo por esta entrada.

Cuando entremos a otra entrada o página, la imagen desaparecerá.

Una imagen flotante en post1) Vamos a Blogger.
2) Clickeamos en el botón Entrada Nueva Botón Nueva Entrada

[Para la anterior interfaz ir a Creación de entradas → Nueva entrada].
3) Vamos a pegar el siguiente código:

<img style="position: fixed; bottom: -1pt; right: 0pt;" src="URL de la imagen" />

En lo escrito en turquesa vamos a cambiar el right por left si queremos que la imagen flote en la izquierda. Esta opción es por supuesto opcional.
En lo escrito en verde, insertaremos la URL de la imagen.

jueves, 18 de agosto de 2011

Propiedad text-shadow

20:23 Teoría Blogger 1 comentario

La propiedad text-shadow, permite dar sombra a un determinado texto. Esta sombra se puede modificar en cuanto a posición, nitidez y color. Usar esta etiqueta es muy eficiente estéticamente y además es algo muy moderno.

Sintaxis

En esta propiedad, se pueden poner de 2 a 4 valores: Posición eje X, Posición eje Y, Nitidéz y Color.
Así usamos text-shadow con todos sus valores:

text-shadow: 1px 1px 3px #FF0400;

El primer valor se posiciona de modo horizontal. Y si pones el signo menos (-) la sombra se correrá hacia la izquierda.
El segundo valor hace que la sombra se posicione verticalmente. Si precede un signo menos a este valor, la sombra se irá hacia arriba.
El tercer valor hace que la sombra tenga una especie de "esfumado" o le quita nitidez al aumentar el valor. Este valor es opcional.
El cuarto valor hace que le de color a la sombra. Este valor es opcional.
Así usamos text-shadow en CSS:

<style>
span{
text-shadow:1px 1px 3px #FF0400;
}
</style>

Así usamos text-shadow en HTML:

<span style="text-shadow:1px 1px 3px #FF0400;">

Ejemplos

Ejemplo de texto con sombra nítida

<span style="text-shadow:1px 1px #FF0400;">Ejemplo de texto con sombra nítida</span>

Ejemplo de texto con sombra esfumado menor

<span style="text-shadow:1px 1px 1px #FF0400;">Ejemplo de texto con sombra esfumado menor</span>

Ejemplo de texto con sombra esfumado medio

<span style="text-shadow:1px 1px 3px #FF0400;">Ejemplo de texto con sombra esfumado medio</span>

Ejemplo de texto con sombra esfumado mayor

<span style="text-shadow:1px 1px 6px #FF0400;">Ejemplo de texto con sombra esfumado mayor</span>

Ejemplo de texto con sombra nítida sin color

<span style="text-shadow:1px 1px;">Ejemplo de texto con sombra nítida sin color</span>

Los colores que se ponen al final del valor de la propiedad pueden ser establecidos como Colores Hexagecimal, RGB o con el nombre.
Para tener una lista de colores y saber cómo se usa, haz click aquí.

Menú con cajas de redes sociales para tu blog

18:50 Teoría Blogger 4 comentarios

Atención! Como bien indica luego, este truco se aplica en un gadget (sidebar)

Como ya dijimos en posts anteriores, las redes sociales ya son una parte inevitable para incorporar a la actualidad a tu blog.
Entonces qué mejor que incorporarlos a tu blog, haciendo así, que los visitantes puedan acceder a ellas mediante un diseño cómodo, elegante y fácil.
Este truco se puede ver claramente a la derecha de Teoría Blogger:

Enlaces de redes socialesPara esto vamos a instalar el CSS en la plantilla yendo a Blogger.com → Diseño → Edición de HTML → buscamos la etiqueta </head> y arriba de este pegamos las siguientes fórmulas CSS:

<style>
/* LINKS DE REDES SOCIALES */
#seguir-redes-sociales {width:100%;float:right;}
.redsocialmenu {background:transparent;border:1px solid #898989;padding:10px;margin-bottom:10px;}
.redsocialmenu:hover{background:#CCCCCC;border:1px solid #898989;padding:10px;}
.redsocialmenu a {text-decoration:none;font-weight:bold;color:#555555;}
.redsocialmenu a:hover {text-decoration:none;font-weight:bold; color:#4CA5FF;}
.redsocialmenu img{vertical-align:middle;margin-right:5px}
</style>

Modificar el CSS[+]

Ahora vamos a insertar las cajas de los links de las redes sociales en un gadget, entonces vamos a Diseño → Elementos de la página → Añadir un gadget → Elegimos el tipo de gadget HTML/Javascript → Ahora copiamos el siguiente código HTML:

<div id="seguir-redes-sociales">
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyzoSHZOKTR0_rMZAT1os2R-SkRiOgmoglocLTsuUxWiK8zS9HlUs35duOqdrMzOB8V2CL-dHwOmdGybBeTzIWXC0JBFIxmxJyEi_zC5uEAPWprcdGOKdRgqWAQfZCow537gnxVVqgIdQ/s0/social-connect-facebook.png" title="Hazte Fan!" alt="Facebook" /> <a href="URL de página en Facebook">Facebook</a>
</div>
<div class="redsocialmenu">
<img src="http://1.bp.blogspot.com/_8aZXeWtZzQY/TToWlf12jfI/AAAAAAAAAKg/0l6avwDaxfo/s000/social-connect-twitter.png" title="Sígueme!" alt="Twitter" /> <a href="URL de Twitter">Twitter</a>
</div>
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9IHn0uwL1gwzynncLWa3niJjktf3Jpkrd5ZqcPx0G47aBEIfVaQdx_HCMoM0QuOUvFlrB3iuQQNf1EdNlfw8Hzixk7gtH2j3Z8wnv8LeCMHa6KW-bi454h2-qdLzuJP212U2oijsO3aA/s1600/youtube-logo.png" title="Obsérvanos!" alt="Youtube" /> <a href="URL de usuario en Youtube">You Tube</a>
</div>
</div>

Como es posible deducir, en lo que está marcado en distintos colores va la URL de:

La página en Facebook
Tu usuario en Twitter
Y tu canal en Youtube

domingo, 14 de agosto de 2011

Etiqueta strike o s

16:35 Teoría Blogger Comentá!

La etiqueta strike (<strike>) implica simplemente que un texto sea tachado.
Muchas veces esta etiqueta es usada irónicamente para mostrar que uno se ha equivocado con un texto o palabra.

Sintaxis

La etiqueta strike o s (<s>) se usa con un texto de intermediario. Esto significa que supone de dos etiquetas y en el medio se inserta el texto: una que abre la función (<strike>) y otra que la cierra (</strike>).
Ejemplo:

Venus es <strike>un canal</strike> el segundo planeta que gira en torno al Sol
Venus es ~~un canal~~ el segundo planeta que gira en torno al Sol

Etiquetas o propiedades paralelas

Existen otras alternativas para determinar este efecto de la etiqueta strike. En la siguiente tabla mostramos esas alternativas ya sea usando HTML o CSS:

Strike en HTML

<s></s>

Strike en CSS
<span class="tachado">Este texto está tachado gracias al CSS →</span>	span .tachado { text-decoration:line-through; }

Atributos que se tienden a emplear

Lista de todos los atributos que son más factibles para usar en esta etiqueta (hay más atributos para emplear):

Atributo	Muestra de sintaxis
title	<strike title="">Tachar</strike>
style	<strike style="">Tachar</strike>
id	<strike id="">Tachar</strike>
class	<strike class="">Tachar</strike>

Actualización: 3 de mayo del 2013.

Ambas etiquetas <s> y <strike> fueron eliminadas en la nueva versión 5 de HTML.

viernes, 12 de agosto de 2011

Colores Hex, RGB y nombre (lista completa)

23:05 Teoría Blogger Comentá!

Muestra	Hex	RGB	Nombre
	#000000	rgb(0,0,0)	black
	#FFFFFF	rgb(255,255,255)	white
	#0000FF	rgb(0,0,255)	blue
	#00FF00	rgb(0,255,0)	lime
	#FFFF00	rgb(255,255,0)	yellow
	#00FFFF	rgb(0,255,255)	aqua - Cyan
	#FF0000	rgb(255,0,0)	red
	#008000	rgb(0,128,0)	green
	#2E8B57	rgb(46, 139, 87)	seagreen
	#00FF7F	rgb(0, 255, 127)	springgreen
	#FFD700	rgb(255,215,0)	gold
	#DAA520	rgb(218, 165, 32)	goldenrod
	#DEB887	rgb(222, 184, 135)	burlywood
	#F0E68C	rgb(240, 230, 140)	khaki
	#F5F5DC	rgb(245, 245, 220)	beige
	#808000	rgb(128, 128, 0)	olive
	#FF00FF	rgb(255,0,255)	magenta - fuchsia
	#FF69B4	rgb(255, 105, 180)	hotpink
	#DA70D6	rgb(218, 112, 214)	orchid
	#FFC0CB	rgb(255, 192, 203)	pink
	#FFA500	rgb(255,165,0)	orange
	#008080	rgb(0, 128, 128)	teal
	#40E0D0	rgb(64, 224, 208)	turquoise
	#7FFFD4	rgb(127, 255, 212)	aquamarine
	#87CEEB	rgb(135, 206, 235)	skyblue
	#800000	rgb(128, 0, 0)	maroon
	#A52A2A	rgb(165, 42, 42)	brown
	#DC143C	rgb(220, 20, 60)	crimson
	#808080	rgb(128, 128, 128)	gray - grey
	#708090	rgb(112, 128, 144)	slategrey - slategray
	#E6E6FA	rgb(230, 230, 250)	lavender
	#C0C0C0	rgb(192, 192, 192)	silver
	#EE82EE	rgb(238, 130, 238)	violet
	#800080	rgb(128, 0, 128)	purple
	#4B0082	rgb(75, 0, 130)	indigo
	#FA8072	rgb(250, 128, 114)	salmon
	#F5F5F5	rgb(245, 245, 245)	whitesmoke
	#F5DEB3	rgb(245, 222, 179)	wheat
	#FF6347	rgb(255, 99, 71)	tomato
	#D8BFD8	rgb(216, 191, 216)	thistle
	#D2B48C	rgb(210, 180, 140)	tan
	#4682B4	rgb(70, 130, 180)	steelblue
	#FFFAFA	rgb(255, 250, 250)	snow
	#6A5ACD	rgb(106, 90, 205)	slateblue
	#9ACD32	rgb(154, 205, 50)	yellowgreen
	#A0522D	rgb(160, 82, 45)	sienna
	#FFF5EE	rgb(255, 245, 238)	seashell
	#F4A460	rgb(244, 164, 96)	sandybrown
	#8B4513	rgb(139, 69, 19)	saddlebrown
	#4169E1	rgb(65, 105, 225)	royalblue
	#BC8F8F	rgb(188, 143, 143)	rosybrown
	#B0E0E6	rgb(176, 224, 230)	powderblue
	#000080	rgb(0, 0, 128)	navy
	#191970	rgb(25, 25, 112)	midnightblue
	#C71585	rgb(199, 21, 133)	mediumvioletred
	#48D1CC	rgb(72, 209, 204)	mediumturquoise
	#00FA9A	rgb(0, 250, 154)	mediumspringgreen
	#7B68EE	rgb(123, 104, 238)	mediumslateblue
	#9370DB	rgb(147, 112, 219)	mediumpurple
	#BA55D3	rgb(186, 85, 211)	mediumorchid
	#0000CD	rgb(0, 0, 205)	mediumblue
	#778899	rgb(119, 136, 153)	lightslategray
	#20B2AA	rgb(32, 178, 170)	lightseagreen
	#FFA07A	rgb(255, 160, 122)	lightsalmon
	#90EE90	rgb(144, 238, 144)	lightgreen
	#FAFAD2	rgb(250, 250, 210)	lightgoldenrodyellow
	#E0FFFF	rgb(224, 255, 255)	lightcyan
	#ADD8E6	rgb(173, 216, 230)	lightblue
	#1E90FF	rgb(30, 144, 255)	dodgerblue
	#696969	rgb(105, 105, 105)	dimgray
	#00BFFF	rgb(0, 191, 255)	deepskyblue
	#9400D3	rgb(148, 0, 211)	darkviolet
	#00CED1	rgb(0, 206, 209)	darkturquoise
	#2F4F4F	rgb(47, 79, 79)	darkslategray
	#483D8B	rgb(72, 61, 139)	darkslateblue
	#E9967A	rgb(233, 150, 122)	darksalmon
	#8B0000	rgb(139, 0, 0)	darkred
	#9932CC	rgb(153, 50, 204)	darkorchid
	#FF8C00	rgb(255, 140, 0)	darkorange
	#556B2F	rgb(85, 107, 47)	darkolivegreen
	#8B008B	rgb(139, 0, 139)	darkmagenta
	#BDB76B	rgb(189, 183, 107)	darkkhaki
	#006400	rgb(0, 100, 0)	darkgreen
	#A9A9A9	rgb(169, 169, 169)	darkgray
	#B8860B	rgb(184, 134, 11)	darkgoldenrod
	#008B8B	rgb(0, 139, 139)	darkcyan
	#00008B	rgb(0, 0, 139)	darkblue
	#8FBC8F	rgb(143, 188, 143)	darkseagreen
	#FFF8DC	rgb(255, 248, 220)	cornsilk
	#6495ED	rgb(100, 149, 237)	cornflowerblue
	#FF7F50	rgb(255, 127, 80)	coral
	#D2691E	rgb(210, 105, 30)	chocolate
	#7FFF00	rgb(127, 255, 0)	chartreuse
	#5F9EA0	rgb(95, 158, 160)	cadetblue
	#8A2BE2	rgb(138, 43, 226)	blueviolet
	#F0FFFF	rgb(240, 255, 255)	azure
	#FAEBD7	rgb(250, 235, 215)	antiquewhite
	#F0F8FF	rgb(240, 248, 255)	aliceblue

Cómo aplicarlos en los códigosPara empezar, estos colores se usan sólo en propiedades en el que se necesitan colores.
Tales como:

Propiedad color
Propiedad background
Propiedad background-color
Propiedad border-color
Propiedad outline-color
Propiedad text-shadow

En cualquiera de los casos, debemos copiar el cógido Hex, rgb o el nombre del color como el valor de la propiedad:
<style>
h1 {
color:#0000FF;
}
h1 {
background:rgb(0,0,255);
}
h1 {
border-color:blue;
}
</style>
Todo lo escrito en azul es el valor de la propiedad.
Ahora mostraré los mismos ejemplos que los anteriores, pero aplicado a HTML:
<h1 style="color:#0000FF;">Ejemplo</h1>
<h1 style="background:rgb(0,0,255);">Ejemplo</h1>
<h1 style="border-color:blue;">Ejemplo</h1>

Mejorar blog, según la revista USERS

13:43 Teoría Blogger Comentá!

La revista Users es una revista que personalmete compro mensualmente, para enterarme de la última tecnología, aprender sobre computación, internet, etc.
En cada edición de la revista, siempre hay un tema principal. Un tema en el cual le dedican varias páginas en el medio.
En la edición nº 241, aparece como tema principal y a aprender, sobre cómo mejorar nuestros blogs, con el título de "Blogs Super Poderosos".
Escaneé las 11 páginas que le dieron lugar en esta prestigiosa revista.

Blogs Super Poderosos por User

Descargar todas las imágenes juntas

martes, 31 de mayo de 2011

No permitir usar click derecho en tu blog

0:42 Teoría Blogger 2 comentarios

Si por alguna razón no querés que tus lectores puedan copiar un texto o una imagen de tu blog, mirá este post porque es justo lo que estás necesitando y es un truco que podría ser uno de los más buscados.
En este post te vamos a mostrar 3 formas diferentes para proteger los contenidos de tu blog: Una forma es usando atributos HTML y las otras dos formas son códigos Javascript. Usa la que te parezca más eficiente.

Proteger contenidos de tu blog

1^er código

En el primero vamos a mostrar el código HTML, en el que tenemos que ir a Blogger → Diseño → Edición de HTML → buscamos la etiqueta <body> y la reemplazamos por

<body oncontextmenu='return false' onkeydown='return false'>

2^do código

En este caso, es un script que se debe poner en el sidebar. Así que vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Elegimos el gadget de tipo HTML/Javascript y pegamos el siguiente código:

<script language="Javascript">

</script>

Contra importante:
Este script no permite de ninguna manera copiar textos, pero sí imágenes.

3^er código

El resultado de este script es muy particular con respecto a otros que se pueden observar porque este, al hacer click derecho en alguna parte de la página, se activa una ventana de alerta que dice "En este blog está prohibido usar click derecho!".
Para aplicar este script, debemos ponerlo en el sidebar. Para eso vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Elegimos el tipo de gadget HTML/Javascript y pegamos el siguiente código:

<script language="Javascript">
document.oncontextmenu = function() {
return false
}
function right(e) {
var msg = "En este blog está prohibido usar click derecho!";
if (navigator.appName == 'Netscape' && e.which == 3) {
alert(msg);
}
else if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) {
alert(msg);
return false;
}
return true;
}
document.onmousedown = right;
</script>

El mensaje de la ventana de alerta puede cambiar si lo deseas: cambiando el texto marcado en rojo por el que quieras que aparezca.

sábado, 28 de mayo de 2011

Cronómetro en tu blog

12:45 Teoría Blogger Comentá!

Esta herramienta que puedes añadirlo en tu blog solo si tienes algo en especial que estás mostrando o como una función particular simplemente. Es eficiente y funciona a la perfección en todos los navegadores.
El código se inserta sólo como gadget es decir que aparecerá en el sidebar. El cronómetro es simplemente el segundero digital, un botón de inciar, de parar y de reiniciar el contador.

Insertar cronómetro al sidebarComo ya te mencionamos, este es un gadget, así que vamos a ir a Blogger → Diseño → Elementos de la página → Añadimos un nuevo gadget → Y seleccionamos el gadget de tipo HTML/Javascript y pegamos el siguiente código:

<form name="crono">
<div align="center"><center>
<p><input title="Este truco en teoriablogger.blogspot.com" type="text" size="8" name="display" value="00:00:0" /><input type="button" name="Iniciar" value=" Iniciar " onclick="IniciarCrono()" /></p>
<p><input title="Este truco en teoriablogger.blogspot.com" type="text" size="8" name="parcial" value="00:00:0 " /> <input type="button" name="Parcial" value="Parcial" onclick="ObtenerParcial()" /></p>
<p><input type="button" name="Parar" value=" Parar " onclick="DetenerCrono()" /><input type="button" name="Cero" value="Cero" onclick="DetenerCrono(); InicializarCrono()" /></p>
</center></div>
</form>
<script type="text/javascript" src="https://sites.google.com/site/teoriablogger/archivos-js/cronotb.js"></script>

sábado, 9 de abril de 2011

Lograr que comente cualquiera en tu blog

0:11 Teoría Blogger 15 comentarios

Muchas veces pasa que un lector quiere comentar en un blog y no puede hacerlo, ya que precisa de una cuenta en Google o en las que se puedan para comentar en un blog de Blogger (Ver imagen).

Opciones de cuenta para comentar en un blog de Blogger

Esto no sería un problema si lo solucionamos haciendo que cualquiera pueda comentar sin tener cuenta en ninguna página de las que figura en la lista del formulario.

Comentarios con identificación de cuenta y anónimosPara empezar, queremos decirles que hemos analizado la opción que nos ofrece Blogger y sólo encontramos la del riesgo de spam y tener comentarios anónimos sin saber de ninguna manera, quién es el autor.
Para lograr el objetivo del post, vamos a Blogger → Configuración → Entradas y Comentarios → y en el título "¿Quiénes pueden realizar comentarios?", vamos a seleccionar la primera opción: "Cualquiera - incluidos los usuarios anónimos" [Como vemos en la siguiente imagen].

Opción para que comente cualquiera en un blog de Blogger. Configurar.

Cuando lo hayamos hecho hacemos click en el botón de abajo, "guardar configuración" y luego pasamos a ver el blog para probar el formulario de comentarios y observar en la lista que aparecieron dos nuevas opciones de identificación de comentarista: Anónimo y Nombre/URL.

Opción de comentar en un blog de Blogger con anonimato.

miércoles, 9 de marzo de 2011

Cómo se compone una fórmula CSS

13:57 Teoría Blogger Comentá!

Una buena manera de entender (para los que empiezan) cómo se estructura un código CSS, es sabiendo los nombre y las partes del mismo.
Este post es más bien teórico (y por ser teórico, va a ser cortito), ya que vamos a explicar cómo se compone una línea de código CSS y los nombres de las partes.

Selector: es allí donde vamos a poner a una etiqueta, clase (ejemplo, .header) o una ID (ejemplo, #header) para poder darle estilo con las otras partes que vamos mencionando.
En el ejemplo vamos a darle estilo a la etiqueta <h1>.
Propiedades: es la función del estilo. Aquí debemos tipear la propiedad para dar estilo al Selector.
En el ejemplo que vemos en la imagen, font-family significa que al selector le va a dar la fuente arial, este último es el valor.
Valor: es el contenido de la propiedad y aquí es el lugar más personalizable ya que es aquí donde a las porpiedades se le puede dar color, fuente, decoración de texto, etcétera.
Declaración: es el conjunto de todo lo que abarcan las llaves.

Entonces, la fórmula sería:

Selector+Llave abierta+propiedad+valor de propiedad+llave cerrada

Un poco más...
La fórmula que dimos, es lo básico. Es decir, la fórmula que dimos es sólo para asignar la modificación con una sola propiedad.
Para asignar dos propiedades, debemos asignar un punto y coma (;) luego de la primer propiedad. De esta manera la fórmula sería la siguiente:

Selector+Llave abierta+Propiedad+Dos puntos (:)+valor de propiedad+punto y coma(;)+2ºPropiedad+Dos puntos (:)+Valor de 2º Propiedad+Llave cerrada
Ejemplo:
H1{font-family:arial; text-decoration: underline}

Puedes asignar muchas propiedades y sus respectivos valores, siempre que postpongan un punto y coma antes de tipear uno nuevo.

martes, 8 de febrero de 2011

Marquesinas al estilo Teoría Blogger

15:50 Teoría Blogger 6 comentarios

Estilo T.B.

Blanco y negro

Negro y blanco

Azul

Rojo

Verde

Naranja

Amarillo

Violeta

Fuccia

Dorado

Marrón

Morado

Plateado

Agregar una caja marquesina en mi blogPara hacerlo, simplemente debes copiar el objeto deseado y puedes pegarlo en:

Una entrada: Blogger → Creación de entradas → Nueva entrada → Solapa Edición de HTML.
Un gadget: Blogger → Diseño → Elementos de la página → Añadir un gadget → HTML/Javascript.

Personalizar tu cajaPara crear tu propia caja con los colores que quieras, cambia los códigos marcados en colores:

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% rgb(32, 134, 202); color: rgb(255, 255, 255); font-family: arial,helvetica; font-size: 14px; font-weight: bold;"><marquee scrolldelay="30" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">Texto phttp://www.blogger.com/img/blank.gifara exponer</marquee></p>

Modifica el código en color rojo para asignar el color del fondo.
Modifica el código en color verde para asignar el color de la letra
Modifica el texto en color azul para asignar un texto que quieras que sea expuesto.

Video explicativoVer video en Teoría Blogger videos | Ir a Teoría Blogger videos

domingo, 6 de febrero de 2011

Subir plantilla desde el ordenador a Blogger

21:50 Teoría Blogger 2 comentarios

Para los que recién empiezan, el diseño es vital para atraer al lector. Es decir, si queremos "vender" que nuestro blog es muy bueno, los lectores tienen un 50% de la "compra" hecha en su cabeza si el diseño del blog les parece visualmente un poema. Si bien varias veces lo repetimos, Btemplates.com es para nosotros una de las mejores páginas para descargar plantillas de cualquier tipo (incluyendo, premium).
A pesar de, el ya no tan nuevo diseñador de plantillas de Blogger (que puede ser atractivo y seductor para algunos blogueros) y de las plantillas que nos permite tener y modificar Blogger con el editor mencionado anteriormente, las plantillas personalizadas y creadas por expertos no deja de ser una opción válida para los blogueros y para los que les gusta apuntar más arriba.
En este post te vamos a enseñar a descargar una plantilla y luego subirla a Blogger (la nueva versión).

Cambiar plantilla de tu blog en Blogger

Para empezar,vamos a btemplates.com (aunque hay otras páginas de similar rubro)
Buscamos en BTemplates, la plantilla que creas ideal para tu blog.
Una vez que hayas encontrado tu plantilla y hayas visto el demo (para ver el demo se hace clic en el botón "Preview" de la página de tu plantilla) le das clic a "Download".
Guardamos en la carpeta que querramos y veremos en la misma, que se ha descargado un archivo de extensión .zip
Estos archivos de extensión .zip son archivos compactados, es decir que para descomprimirlo necesitamos un programa instalado en nuestro ordenador que sepa usar ese tipo de archivos. Existen varias opciones, pero nosotros recomendamos la opción fácil, segura, rápida y gratuita, el programa 7-Zip. Para descargar en la página oficial clic aquí.
Cuando hayamos descargado e instalado 7-Zip en nuestro ordenador, vamos a dirigirnos una vez más al archivo .zip mencionado en el punto 4 y le damos clic derecho y buscamos el botón "7-Zip" y las opciones que aparece le damos clic a Extract here to "Nombre de la plantilla/"
Vamos a Blogger → Plantilla y en la parte superior derecha de la pantalla hay un botón que dice "Crear/Restablecer copia de seguridad".
Cuando hagamos clic nos va a aparecer una ventana emergente con un campo de texto junto a un botón que dice Examinar le damos clic ahí.
Buscamos la carpeta que descomprimimos y dentro de esta carpeta, es probable que haya otra carpeta con el mismo nombre de la plantilla deseada (aclaro que "es probable" porque en algunos casos no existe tal o tales carpetas).
De todos modos si encontramos carpetas, debemos asegurarnos de que tenga el mismo nombre que la plantilla y vamos a encontrar un archivo con extensión .xml que también debe tener exactamente el mismo nombre de la plantilla que descargamos y que vimos en Btemplates.
Clic en el botón Subir.
Ver la nueva apariencia del tu blog!