Widgets de Articulos Recientes Para Blogger

Te has preguntado muchas veces como aumentar la cantidad de paginas vistas de tu  Blog O Website? pues dejame decirte que mostrando el Widget de Articulos Recientes es una manera excelente para que los visitantes naveguen tu sitio y observen mejor tus articulos.

Ademas reduce el Bounce Rate-es tiempo un visitante pasa en tu sitio antes de irse de la misma.

Chequea Articulo Añadir Entradas Recientes Animadas

La manera mas recomendada de reducir el Bounce Rate en tu blog o website. Pues he aqui un super truco al utilizar el Widget Advanzado de Articulos Recientes asi las personas se interesaran en lo mas reciente o nuevo. Como añadir este bello widget con Hover Effect a Blogger. Espero que te guste el Multi colorido widget de texto de articulos recientes hecho con CSS & jQuery.Atre a tus visitantes y aumenta Paginas vistas.

Como añadir un estilo diferente de Widget de Articulos Recientes en Blogger.

1. Entra en Blogger  >> Diseño >> Añadir un gadget >> Añadirlo en espacio de HTML/Javascript.

2. Pegue el siguiente codigo en espacio de HTML/Javascript.

Estilo 1:-Ver Ejemplo en Vivo

<script 
src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script><div 
id="recent-posts"><script language="JavaScript">





home_page = "http://xxxx.blogspot.com/";

numposts = 5;



imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 
6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 
0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = 
false;showPostDate = false;summaryPost = 0;summaryFontsize = 
10;summaryColor = "#666";icon2 = " ";</script><script 
src="http://dl.dropboxusercontent.com/s/niuq8uqagunjvbq/recent-posts-min-1-ycode.js"
 type="text/javascript"/></script><link rel="stylesheet" type="text/css" 
href="http://dl.dropboxusercontent.com/s/ecikvgo68yrfgps/recent-posts-min-1.css"
 />

Estilo 2

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript">


home_page = "http://xxxx.blogspot.com/";
numposts = 5;

imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="http://dl.dropboxusercontent.com/s/niuq8uqagunjvbq/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/b5er1tiy806lg6x/recent-posts-min-4.css" />

Configuracion:


Ahora Reemplace la direccion Url= http://xxxx.blogspot.com con tu direccion de tu Blog

Usted tambien puede Personalizar  a su gusto el CODIGO .

numposts = 5; Total numero de articulos que deseas mostrar con este widget.

 Chequea Articulo Widget de Entradas Recientes

Read More

Como Abrir Enlaces de Page List En Una Nueva Ventana

En el tutorial de ciudad blogger explicare como abrir cada enlace de tu Widget de PageList en una nueva ventana.

Solo sigue estos sencillos pasos:
1. Entra en tu cuenta de Blogger y ve a "Plantilla"--> "Editar HTML" de tu blog.
2. Ahora encuentra el codigo de PageList widget . (Nota importante : Tambien puedes encontrarlo buscando <b:widget id='PageList)
Tu codigo de widget PageList  sera similar al codigo de abajo. Pero el id widget  (PageList1) podria ser diferente :

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
  </b:includable>
</b:widget>

3. Luego coloca el siguiente codigo azul blue ( target='_blank' ) como el ejemplo de abajo en el codigo de Link list .

b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href' target='_blank'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href' target='_blank'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
  </b:includable>
</b:widget>

Nota Importante : Debes incluir el espacio  antes de la palabra target='_blank' como muestra el ejemplo de arriba.
Para finalizar ahora da click en boton de Guardar Plantilla y listo.

Read More

Herramientas Indispensables Para Webmasters

Existen muchos instrumentos en la internet que pueden ayudar a mejorar
darle un giro y mantener tu blog.Muchos de estas utilidades hacen tu blog
mas rapido,facil y mas productivo.En este articulo quiero nombrar algunas de estas
herramientas que personalemente uso.

Estos son las siguiente:
1.Window Live Writer
Esta herramienta te permite ver el articulo antes de ser publicado y es sin duda una
de las utilidades mas interesantes que existen a la hora de escribir un articulo
para tu blog.

2.Google Webmaster Tool
Esta herramienta te permite someter un mapa de sitio a google.ademas de poder eaminar
cuantas personas han solicidado tus articulos en google,chequea errores de rastreo,las keywords famosas
la ejecutoria de tu blog,enlaces externos e internos y otras estadisticas que te ayudaran
a afinar tu blog para que se desempene mejor.

3.FireBug
Este mas bien es un add-on de firefox funciona de la siguiente manera cuando pones el cursor de tu
mouse sobre una area de tu pagina este mostrara el codigo que la conmpone.Podras cambiar el codigo y ver el resultado al instante ver el efecto.

4.Statcounter
Este es un rastreador de la pagina y provee estadisticas del trafico en tiempo real de tu blog
muchos prefieren este contador debido a que con una sola cuenta puedes manejar multiples sitios a la vez.

5.w3school
Este es un sitio web pero a la misma vez es una gran herramienta,es una pagina que te ensena sobre html,css y javascript ademas de
otros aspectos de construccion de una pagina.Esta escuela te brinda la oportunidad de practicar instantaniamente a la vez ver el resultado
en vivo.

6.Syntax highligter
Los navegadores de la web son muy habiles cuando entras o escribes codigos estos los traducen en imagenes y las muestran en el monitor
aun si lo que deseas mostrar son codigo.

7.Color Picker
En este tool podras hacer la seleccion del color que desee,solo da click en el color y copia el codigo hex,solo lo tendras que poner en tu hoja de estilo.

8.Colt
Este Copia el texto del enlace facilmente.Este tiene tres opciones,solo copia el texto anchor,solo el enlace o copia ambos en forma de texto Html o Enlace Html.

9.Ping O Matic
Esta herramienta provee el servicio de pinging- servicio que envia mensaje a los motores de busqueda dandole a conocer que tu blog o pagina se actualizo.
Consejo usalo cada vez que publiques un nuevo articulo.

10.Google Serach
Es el navegador de la internet que mas se usa en el mundo y de gran relevancia a la hora de buscar datos e informacion ademas de la gran variedad
de informacion que encontraras en el mismo.

Read More

Como Añadir Texto Deslizable a Tu Blog De Blogger

Una barra de estado (Status Bar),es similar a una línea de estado, es un área de información que normalmente se encuentra en la parte inferior de las ventanas en una interfaz gráfica de usuario.

 Una barra de estado a veces se divide en secciones, cada una de las cuales muestra una información diferente. Su trabajo es principalmente para mostrar información sobre el estado actual de su ventana, a pesar de algunas barras de estado tienen una funcionalidad adicional.

Ejemplo: Barra de Estado

En este tutorial te mostrare el truco de insertar Texto Desplazable en Barra de Estado en tu blog de blogger.Solo tienes que seguir los siguientes pasos.
1.Entra en tu cuenta de Blogger
2.Da clic en añadir un gadget en la barra del lado.
3.Seleccione Html/JavaScript y anade en encasillado disponible el codigo de abajo.

<script language=javascript> function statusbar(val) { var msg = "Escribe Tu Mensaje Aqui"; var res = " "; var speed = 100; var pos = val; if (pos > 0) { for (var position=0 ; position< pos; position++) { res += " "; } res+=msg; pos--; window.status = res; timer = window.setTimeout("statusbar("+pos+")",speed); } else{ if( -pos < msg.length) { res += msg.substring(-pos,msg.length); pos--; window.status=res; timer = window.setTimeout("statusbar("+pos+")",speed); } else { window.status= " "; timer = window.setTimeout("statusbar(100)",speed); } } } statusbar(100); </script>

4.Nota:Solo reemplaza Escribe Tu Mensaje Aqui por un mensaje que desees poner aqui cual se mostrara en la barra de estado.

5.Por ultimo Guarda el Html/Javacript y luego vea tu pagina pra que veas este super truco en accion. 

Read More

Efecto De Cargar Pagina En Blog De Blogger

Esta vez les introducire al super truco para tu blog de blogger.Toma alrededor de 2.3 segundos para una pagina cargar completamente.Pero te gustaria añadir un truco o efecto a estos 2.3 segundos? Si es asi entonces este simple tutorial es para ti.Este truco o efecto funciona con jquery chequea el ejemplo en enlace de abajo y te daras cuenta como funciona este truco o efecto al subir una nueva pagina o blog.

Ejemplo:

Solo siga estos pasos para anadirlo a tu blog.

1. Entra en tu cuenta de blogger Ve a  Diseno >> Editar HTML

2.Encuentra esta etiqueta </head>  usando Ctrl+F   

3.Pega el codigo de abajo antes de la etiqueta </head> 

<style>
/*  bloggertrix.com */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Vz1Puji4SEOfyrMP9SzkcvEzxmvOL-7WBSI-NaTd9xao3ErQqJ48tCMrARCo5bNceDUymxyQbifelHKoI3u77wmtuQQ2Y7CW39T4_pDmwCYBloUvEJa7qPRKeMwqJ5vjEAXCrpEp6Y6G/s1600/Bloggertrix-loading.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #md-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#md-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#md-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$("html").removeClass("MD");


$("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) });


$(window).load(function(){

    $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>

4. Ahora encuentra el siguiente codigo <body> usando Ctrl+F
Nota:si no la encuentras pega el codigo debajo etiqueta </head>

5.  Pega 1 de los codigos de abajo despues de etiqueta <body>

* Anade este codigo para mostrar este efecto para todas las paginas del blog.

<div id='md-loading'><div 
id='md-progress-bar'></div><div 
id='md-loader'>Loading...</div></div>

Anade este codigo para mostrar este efecto solamente en la Pagina Principal.

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

 <div id='md-loading'><div  
id='md-progress-bar'></div><div  
id='md-loader'>Loading...</div></div></b:if>

7. Guarda tu Plantilla Ahora.
y tu truco efecto esta listo.

Read More

Los Mejores Trucos Para Iphone o Ipod

iPhone 3G and iPod Classic 5G. (Photo credit: Wikipedia)

Los 10 mejores Trucos para iPhone o iPod
1. Llegar a la primera pantalla de inicio
Usted tiene un gran número de aplicaciones instaladas. Sus aplicaciones más importantes se encuentran en la primera pantalla, ¿no? Digamos que está actualmente en la pantalla 7, y quiere llegar a la primera pantalla. Simplemente haga clic en el botón de Inicio para llegar allí.

2. Voltear páginas pulsando
Muchas aplicaciones para el iPhone cuentan con un sistema de paginación con puntos en la parte inferior de la pantalla, como por ejemplo:

   . La pantalla de inicio
   .Safari
    .Tiempo

Usted probablemente sabe quepuede voltear las páginas de estas aplicaciones deslizando hacia la izquierda o derecha en la pantalla. También puede puntear en las zonas a ambos lados de la línea de puntos en la parte inferior de la pantalla:
Tapping es ligeramente más rápido que deslizar

3. Accedé a controles del iPod desde cualquier lugar
¿Quieres hacer una pausa al podcast rápidamente. Basta con hacer doble clic en el botón de Inicio, y se abre una ventana con los controles del iPod, lo que le permite hacer una pausa, jugar, saltar pistas o ajustar el volumen del iPod:
Puede pulsar el botón iPod en la ventana para ir directamente al iPod.
De forma predeterminada, este truco sólo funciona si una pista de iPod está jugando. Sin embargo, puede cambiar el comportamiento del botón del hogar de acción de doble clic, vaya a Ajustes> General> Botón de Inicio:
Elección de Casa significa que el doble clic tiene el mismo efecto que un solo chasquido: Simplemente te lleva a tu pantalla de inicio.



Teléfono Favoritos: configuración predeterminada trae tus contactos favoritos para la marcación rápida. Sin embargo, si usted elige iPod , haga doble click te lleva directamente a la aplicación iPod, independientemente de si está escuchando una canción o no.
Usted puede usar los controles del iPod configuración para desactivar la función que muestra los controles del iPod cuando se reproduce una pista.

4. Teclado truco # 1: Rápidamente escriba un punto y un espacio
Cuando termine de escribir una frase, normalmente se desea escribir un punto, seguido de un espacio. Esto es un poco incómodo ya que tienes que tocar la tecla de número inferior izquierda, seguido de un punto, seguido de la barra espaciadora. La forma más rápida: simplemente pulse dos veces la barra espaciadora.
(Si esto no funciona, vaya a Ajustes> General> Teclado y gire el "." Opción de acceso directo en.)



5. Teclado truco # 2: Llene un solo número o símbolo
La forma más habitual para introducir dígitos o símbolos es tocar la tecla numérica a continuación, toque los dígitos o símbolos, a continuación, toque la tecla numérica (que ahora muestra ABC) de nuevo para volver al teclado normal.
Si sólo desea escribir un grifo de un solo dígito o símbolo y mantenga pulsada la tecla N para que aparezca el teclado de números / símbolos y arrastre el dedo hacia el dígito o símbolo que desea escribir, y dejar ir. Estos tipos del / símbolo dígitos y enseguida vuelve al modo ABC.

6. Teclado truco # 3: El bloqueo de mayúsculas
El teclado del iPhone tiene un modo Caps Lock para escribir en mayúsculas palabras aunque esta desactivado de forma predeterminada. Para activarlo, vaya a Ajustes> General> Teclado y active el interruptor Lock Enable Caps en ON. Cuando utilice el teclado dos toques rápidos en la tecla Mayús para activar el bloqueo de mayúsculas (la tecla Shift se vuelve azul). Escriba sus mayúsculas, a continuación, pulse la tecla Shift de nuevo para desactivar el bloqueo de mayúsculas.

7. Teclado truco # 4: Si mantiene pulsado teclas para más opciones
Muchas teclas que aparezca una lista de otros símbolos u opciones si toca y las mantiene por 1 segundo. Por ejemplo:

    Manteniendo presionado E, Y, U, I, O, A, S, L, Z, C o N hace aparecer las letras acentuadas
    Si mantiene pulsado $ en el teclado de números / símbolos muestra otros símbolos de moneda
    Manteniendo presionado "o" en el teclado de números / símbolos revela comillas alternativos
    Manteniendo presionado? o! en el teclado de números / símbolos trae el símbolo o ¡¿
    Si mantiene pulsada la tecla. Com al introducir direcciones de Internet trae opciones para. Net,. Edu y. Org. Thi funciona al introducir direcciones de correo electrónico en Mail pulsando y manteniendo pulsado el. (Punto) clave.)


8. Guardar borradores de correo
Con el OS X aplicación Mail de Mac, es fácil guardar el mensaje actual-editado como un proyecto haciendo clic en el botón Guardar proyecto como en la barra de herramientas.
Guardar un proyecto en la aplicación Correo iPhone: En primer lugar, desde la pantalla de edición de mensajes, pulse el botón Cancelar. Usted puede después pulse en Guardar para guardar el mensaje actual como un borrador o no ahorran para borrar el mensaje.

9. Ir a la parte superior de la página
Deslizante hacia arriba y hacia abajo para desplazarse a través de una página web, un mensaje de correo electrónico o una lista de mensajes es bastante rápido, si usted está en la parte inferior de una larga lista de página o se necesita más tiempo para retroceder hasta la cima. Hay una manera más rápida para volver a la parte superior: simplemente pulse la barra de estado en la parte superior de la pantalla:
Esto funciona para la mayoría de las pantallas que implican desplazamiento.

10. Personaliza los iconos dock para iPod
iPhone viene con 5 iconos en el dock del iPod - Listas de reproducción, Artistas, Canciones, videos y más. Usted puede controlar qué tipo de icono muestra en la pantalla: Toque el icono Más y después en el botón Editar en la parte superior izquierda de la pantalla. Verá una lista de todos los iconos disponibles, basta con arrastrar un icono a un icono existente en la base de sustituir el icono que desea reemplazar.
Pulse Listo cuando haya terminado. Esto también funciona en la aplicación YouTube.

Read More

Blogger Tiene Un Nuevo Editor De Plantillas 2013

Blogger ha simplificado el proceso de editar la plantilla con un editor lleno de colores que identifica los ellementos de esta. El nuevo editor ademas tiene una prevista que muestra los cambios que hagas a tu html inmediatamente en la misma pantalla .Una mejora al editor es una moviada buena del equipo de Blogger que nos ayudaraa editar los codigos de la plantilla de una manera facil.

Que es un editor de Plantilla de Blogger?

El editor de plantilla Blogger es un editor provisto por blogger para editar tu plantilla de blog. La Plantilla define la estructura y la dinamica visula de tu blog, y el editor ayuda a modificarla en el Html.

Cambios en el Nuevo Editor de Plantilla Blogger. i

La imagen aqui abajo le dara una idea de lo que cambio.

Como puede ver Blogger ha anadido mas botones al Editor, y tiene un codigo Syntax Highlighted . Trataremos de cubrir cada elemento en detalle.

Numeros de lineas y Errores marcados

El editor numero de lineas en el lado izquierdo,y te ayuda a localizar las lineas facilmente cuando el editor de plantilla muestra un error.
La imagen abajo claramente muestra que he cometido un error en la linea  785. Marca la linea donde se cometio el error. Esto lo hace mas facil en localizar las cosas mientras editamos la plantilla.

Resaltado de Sintasis y Auto Formato

El editor de plantilla blogger ahora muestra un codigo de resaltado de sintasis,que lo hace facil de leer y interpretar.Este resaltado te ayudara a evitar errores cuando escribes un codigo. En la imagen de arriba </p> se muestra de rojo que te dira o senalara que algo en tu texto esta mal. El codigo sera automaticamente formateado y marcado al tiempo que escribe.

Plegado de Codigo

Con este nuevo editor, blogger se hace plegable y te permite  expandir o cerrar secciones with facilidad .
Usted puede expandir o cerrar  la mayoria de los elementos solo dando click al linea numerada asociada con el elemento.

Vista previa de plantilla en línea

El nuevo editor ofrese una vista previa en linea  que facilmente mostrara cualquier cambio hecho al codigo de la plantilla.

Salto a el codigo de Widge Salta a opcion de Widget te ayudara a buscar un codigo particular de Widget en la plantila.Da Click en el nombre del Widget , and y te llevara al codigo correspondiente.

Otros Botones Incluidos

Estos botones en el formato de plantilla ayudara a sangrar el codigo de plantilla .El boton de cambios revertidos es igual al boton de Clear edits del editor anterior. Esto revertira cualquier cambio guardado que hayas hecho.  El boton de Revert widget templates revertira cualquier cambio hecho en cualquier codigo del widget a su estado original.

Un buscador integrado, y funciones de reemplazo

El Editor de plantillas tiene la opcion de un buscador integrado para encontrar algo en el codigo de la plantilla facilmente.

Puedes tener la opcion de buscar  solo dando click en cualquier seccion del editor inmediatamente usando las claves de tu keyboard  Ctrl + F(Command + F on Mac). Puedes reemplazar o reemplazar todo usando Ctrl + Shift + F and Ctrl+ Shift + R respectively

Que este editor de Blogger No Incluye.

Este nuevo editor de blogger no tiene  Expand Widget Templates. Los codigos del widgets estan desplazados de principio  no hay manera de desplazarlos de un simple click. Pero esto no causa problemas pues tenemos el buscador de codigos.(si encuentra algo igual, el codigo se mostrara). Podrias encontrar problemas si tratas de usar la opcion de busqueda de tu Web Browser en vez del buscador integrado.
Blogger mantiene cambiando la interface y actualizandose frecuentemente  podriamos tener ratos duros  para actualizar a la vez los tutoriales que reflejen los cambios.

Read More