Ventana Emergente en Blogger. Ventanas Popups

Las ventanas Pop-Up son esas ventanas que se abren aparte del sitio web que estamos viendo, y si bien tienen muy mala fama porque generalmente están llenas de publicidad que no queremos ver y que no solicitamos, ahora puedes reivindicarlas dándoles funciones útiles como abrir un formulario, una foto, un texto, etc.

Primero hay que ir a Diseño > Edición de HTML y pegar antes de lo siguiente:

10 Plugins de sliders y galerias para jQuery

Los sliders y galerias jQuery estan muy de moda en el diseño web actual, y esto es debido a la variedad de formas, colores y sobre todo elegancia que jQuery ofrece, en este post les presento 10 de los plugins mas populares para hacer sliders y galerias, todos incluyen demo......

7 Hostings gratuitos que valen la pena revisar

Esta es una recopilación de 7 hostings gratuitos para diseñadores y desarrolladores web que quieren practicar y mostrar su trabajo en linea pero no quieren pagar un hosting (todavía), la mayoría sin publicidad.
a continuación una lista de los hosts.....

4 Maneras de redireccionar una pagina web

En este tutorial veremos 4 maneras de como hacer una de las cosas mas comunes que hay en desarrollo web: los pasos para la redireccion estan a continuacion...

CSS Básico: ¿Qué es CSS y para que sirve?

Para seguir este tutorial es necesario tener un conocimiento basico de HTML.
En este tutorial veremos los puntos basicos de CSS (Cascading Style Sheets) el lenguaje de estilización por excelencia., su funcion es estilizar una pagina web mediante el uso de selectores y atributos.
La sintaxis de CSS es la siguiente:

1 2 3

selector{ propiedad:valor; }

Antes de CSS para estilizar una pagina se tenían que repetir etiquetas una y otra vez, ahora gracias a CSS y sus selectores la pesadilla termino.

¿Cómo llamar a CSS dentro de HTML?

Existen 3 métodos para incrustar un cogido CSS en un documento HTML y hacer que funcionen juntos:...

PHP desde cero: Métodos POST y GET

Para usar formularios en HTML tenemos las variables externas (GET y POST) son dos métodos diferentes definidos en HTTP que hacen cosas ligeramente diferentes, pero ambos son capaces de enviar remisiones de formas al servidor.

PHP desde cero: Condicionales

En este tutorial aprenderemos las condicionales en PHP las cuales nos dan la posibilidad de analizar una situación y ejecutar el codigo correspondiente basándose en las condiciones definidas.
En PHP la declaración de condicionales es igual a las de la mayoría de lenguajes de programación existentes.
Las condicionales en PHP mas comunes son if, elseif y switch...

5 Elementos básicos de HTML

• Tutorial de: HTML
• Dificultad: Facil
• Tiempo: 45 Minutos

Divisiones, títulos, listas, enlaces, etc. son los elementos mas basicos en de paginas web con HTML, en este tutorial con un par de ejemplos sencillos veremos de manera practica la función de cada uno de ellos.

  Ejemplo de una pagina completa:.....

¿Qué es HTML y como funciona?

Si no sabes absolutamente nada de diseño de paginas web, estas en el lugar correcto en este tutorial aprenderás desde cero como funcionan y de que están hechas las paginas web.

¿Qué es HTML?

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web
Wikipedia.org

Es un lenguaje muy sencillo y fácil de aprender.

Elementos HTML:

Los documentos HTML estan compuestos por elementos, estos a su vez por etiquetas, atributos y el contenido del elemento, he aqui graficado:

1	<p class="texto">Soy un texto dummy</p>

Este es un elemento de párrafo, <p> viene de paragraph. Todas los elementos tienen como inicial sus nombres en ingles.

sigue con el post.........

PHP desde cero: Operadores

 Aparte de los operadores aritméticos de suma , resta , multiplicación , división , residuo , incrementacion y disminución existen otros operadores muy útiles en PHP que veremos en este tutorial........

PHP desde cero: Conceptos básicos

 

• Tutorial de: PHP
• Dificultad: Facil
• Tiempo: 30 Minutos

PHP es el lenguaje de programacion web mas usado en el mundo, si deseas aprenderlo sin saber nada, haz llegado al lugar indicado: PHP desde cero es una serie de tutoriales dirigida a aquellos que tengan un minimo concepto de HTML y quieran aprender de este fabuloso lenguaje de programacion.
PHP significa Hypertext Pre-processor. Fue creado por Rasmus Lerdorf en 1994.

Lo que necesitas

• Un servidor local o remoto (Appserv, XAMPP)
• Un editor de texto (Dreamweaver, Notepad++, E text editor)
• Un mínimo conocimiento de HTML.

Vamos a empezar con el siguiente ejemplo de código PHP con HTML:.............

Orbit: Slider de imágenes con jQuery

Aunque S3Slider es un slideshow que funciona muy bien y ha tenido buena aceptación, son muchos quienes desean que este gadget cuente con flechas de desplazamiento para poder navegar por las imágenes de forma más inmediata.

Un slideshow que permite hacer eso es Orbit, que funciona a base de jQuery y muestra las imágenes con flechas de navegación. Pero además, en la parte superior izquierda indica cuál es la imagen que se está viendo, y del lado superior derecho un control de pausa e indicador del tiempo entre cada foto.

Una de las ventajas que me gusta de este slider es que el script cuenta con una versión corta, por lo que podremos colocar el script directo en la plantilla y así nos evitaremos colgarnos de un hosting.

Para empezar vamos a colocar los scripts que son lo que harán que funcione, así que vamos a Diseño | Edición de HTML y antes de </head> pegamos lo siguiente: ........

¿Cómo incluir una Radio Online en el Blog?

Si deseas que tu radio favorita suene en tu blog, lo podrás hacer utilizando un simple código que a continuación te proporcionare:

1. Necesitamos obtener la URL de la radio, es decir su dirección por donde transmite su señal. Generalmente se puede obtener desde el mismo reproductor que la emisora tiene en su página web, entonces tendrás que escuchar la radio, para luego poner el mouse sobre el reproductor, después presionar el botón derecho, el cual se abrirá una ventana y clic en Propiedades, es ahí en donde veras la URL por la cual transmite su música.

2. Pegar el siguiente código en donde quieras, sea en la Sidebar o en la Columna principal:..............

¿Como hacer una Nube de Etiquetas?

Una nube de etiquetas es una representación visual de las “etiquetas” o palabras clave usadas en un sitio web. Generalmente este listado de palabras se ordena alfabéticamente y con diferente tamaño según su relevancia.

Para empezar a poner nuestra nube de etiquetas en el blog tenemos que etiquetar todos nuestros post.

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios y tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>).

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

2. Después agregar el siguiente código entre ]]></b:skin> y </head>. Preferible que lo pegues casi al final (antes de </head>).

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://ayudaparaelblog.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

3. Buscar el widget con el id Label1 y con el title Etiquetas. Esto lo encuentras donde dice:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><?xml:namespace prefix = data /></data:label.name></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Una vez ubicado, tienes que reemplazar todo el código anterior por lo siguiente:.............

Etiquetas (categorías o secciones) en forma de un menú de pestañas o solapas

En algunos sitios web encontramos un menú de pestañas en forma horizontal para una navegación mucho mejor. Probablemente para algunos es de bastante utilidad por su fácil y rápida navegación por la página.

Para empezar a poner nuestro menú de pestañas en el blog tenemos que etiquetar todos nuestros post.

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios y buscas lo siguiente:...............

Menú desplegable, un simple botón

Este menú desplegable consiste en hacer clic al botón y se muestra una lista de opciones.

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>)

.texthidden {
display:inline
}

.shown {
display:block
}

2. Entre ]]></b:skin> y </head> agregar lo siguiente:.............

Agregar Emoticones en el blog

Emoticones.- Son figuras construidas con caracteres ortográficos, para expresar gestos o emociones en los mensajes enviados y los usuarios las utilizan diariamente en su chat. Algunas de las más usuales son:
1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <head> y </head>. Preferible que lo pegues casi al final (antes de </head>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

<script src='http://benjamin0331.googlepages.com/addSmiley.js' type='text/javascript'/>

2. Entre <b:skin><![CDATA[ y ]]></b:skin> agregar lo siguiente:

.post-body img#new {
margin:0;
padding:0;
border:none;
}

* Esto es para evitar que los Emoticonos se desplacen o se vean con un borde.

- Los emoticones se verán en los post (entradas) y en los comentarios cuando están expandidos. Una vez que el blog acabe de cargar aparecerán los emoticonos.

Nota: Estos emoticones te funcionan bien si es que no utilizas el Leer Más (Entradas ampliables).

Vía: Ben's

Cambiar el color de fondo de los comentarios

Consiste en agregar un color de fondo a los comentarios, el cual puedes asignar un color de fondo para el autor del blog (un color de texto también) y otro para el autor de los otros blogs................

Colores aleatorios en el fondo del blog

Consiste en un color distinto cada vez que entramos al blog.

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y buscas lo siguiente:

body {
background:$bgcolor;
...
}

* Eliminar background:$bgcolor;

2. Agregar el siguiente código después de <body>

<script type='text/javascript'>
var bgcolorlist=new Array("#626868", "#515f6c", "#999966", "#9ea8a8", "#b2bdbd", "#41485e", "#777777", "#eeeee6")
document.bgColor=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]</script>

- En new Array (), puedes cambiar los códigos de los colores que deseas.
Por otro lado, si quieres que más colores cambien le agregas más o en caso contrario le quitas.

- Para que veas el resultado en tu blog presiona F5 de tu teclado y veras que aparecen distintos colores en el fondo del blog.

Últimos Post

En Blogger existe la manera de agregarle a nuestro blog los títulos de los últimos post, pero a muchos no les ha gustado, quizás sea porque el número máximo de post es cinco, entre otras cosas. Pero existe un nuevo truco y me parece mucho mejor.

» Ir a diseño de plantilla, clic en Añadir un elemento de página y seleccionan HTML/Javascript. Ahí tendrán que agregar lo siguiente:......