Generación OPin

Error en páginas estáticas de OPinTemplates

noreply@blogger.com (OPin) — Mon, 23 Jun 2014 22:54:00 +0000

Si usted ha seleccionado un template de OPinTemplates y el mismo le presenta las páginas estáticas como un resúmen tipo magazine que debería funcionar con un "leer más" pero no lo hace, deberá encontrar en el código de su plantilla el siguiente código:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='summary' expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>

Y reemplazarlo por el siguiente:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='leermas' expr:href='data:post.url'>Leer más »</a>
</b:if>

</b:if>

Música de fondo flotante

noreply@blogger.com (OPin) — Mon, 26 May 2014 21:31:00 +0000

Hace unos días a mi hijo se le ocurrió que los reproductores de música que pongo de fondo en algunos de mis blogs esté visible mediante un gadget que le permita a los visitantes apagar la música si la considera molesta.

Esto quiere decir que hay que evitar que el visitante ande de aquí para allá buscando dónde se nos ha ocurrido ocultar el widget.

Se me ocurrió que lo más fácil era combinar dos trucos que desde Ciudad Blogger se habían puesto a mi disposición.

El primero es el de anuncio flotante que permanece llamando la atención del visitante en la parte superior izquierda de la pantalla. El truco era suplantar ese anuncio por los reproductores de audio HTML5 que el mismo Potro había publicado un tiempo atrás.

En los reproductores se debe añadir la URL de tu canción en formato MP3 y otra URL de tu misma canción pero en formato OGG, ambas almacenadas en algún host del estilo de Dropbox. Son dos formatos porque algunos navegadores no admiten aun el formato MP3, específicamente el navegador Opera pues según sé Firefox desde la versión 21 ya admite MP3.

Hay varios programas para PC y Mac que convierten archivos de audio y video en formato OGG, pero además hay varios sitios en línea que también lo hacen, uno de mis favoritos es media.io

En el código te facilito debes cambiar lo marcado en rojo por las URL de tus archivos de audio.

<audio controls>
<source src="URL del archivo mp3" type="audio/mpeg">
<source src="URL del archivo ogg" type="audio/ogg">
<embed src="URL de tu archivo mp3" type="audio/mp3" width="200"
height="100"/>
</audio>

Tambien puedes jugar con los atributos del elemento AUDIO y VIDEO que son: controls, autoplay, loop, muted, y preload

controls permite que se muestren los controles y el reproductor en sí.
autoplay hace que el archivo se reproduzca al cargar la página.
loop reproducirá el archivo una y otra vez.
muted quitará el audio del archivo.
preload define si el reproductor se debe cargar cuando se cargue la página.

Todos deben ser colocados a continuación de "audio controls"

Sólo debes copiar y pegar este código en un elemento HTML/Javascript de tu blog.

<center>
<style type="text/css">
#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;
visibility: hidden;
z-index: 200;
top: 27px;
left: -13px;
}
</style>

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

</source>
</source>

</audio>
</div>

Widget con humor

noreply@blogger.com (OPin) — Fri, 02 May 2014 22:58:00 +0000

Frases cómicas, irónicas y para pensar se acumulan en el blog Tirando Piedras Mentales (http://piedrasmentales.blogspot.com.ar) del cual mantengo los Feed a la vista en varios de mis blogs. Lamentablemente con esa modalidad se muestra de manera permanente la misma frase hasta que se publique la siguiente.

Para hacer más dinámica y divertida esta entrega de humor es que implenté un widget que muestra de manera aleatoria una frase diferente cada vez que refresquemos la página o ingresemos nuevamente a nuestro blog.

Sólo debes copiar y pegar este código en un elemento HTML/Javascript de tu blog.

<center>
<style>
#random-posts img{border-radius: 10px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #F5F5F5;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 14px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 12px;background: none; padding: 0px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=1;
var rdp_snippet_length=300;
var rdp_info='no';
var rdp_comment='no';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src="http://piedrasmentales.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'> 
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNj7_TBAhT1iAGWgMkPXFxgraWmyWS8C1cbR53-qGuLlQ_SWT8jcL3KRydpUe-zKGcPuTNTjzYdHgZujmpxJozUTr_9N4SjxOCGJlqQfSeOtmF5vpK9jnH8yRcJGWbOkHSi4-8tXflWJ8/s1600/no_thumb.png"}}};document.write('
<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"></a>');document.write('<div>
<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>
');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">
'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div>
</span>'};document.write('<br/><div class="rp-snippet">
'+rdp_snippet+'</div>
<div style="clear:both">
</div>
</li>
')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src="http://piedrasmentales.blogspot.com/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
<i><b><a href="http://piedrasmentales.blogspot.com.ar/p/blog-page.html"><span style="font-size: xx-small;"><span style="color: #999999;">QUIERO ESTE WIDGET</span></span></a></b></i>

Widget de pestañas TAB en jQuery

noreply@blogger.com (OPin) — Wed, 09 Apr 2014 13:17:00 +0000

¿Alguna vez viste esos blogs que tiene un área de widget con pestañas en la barra lateral que consiste en perfil, popular, reciente y cuenta con puestos dentro de un solo clic ? Se conoce más comúnmente como widget de pestañas en jQuery , que le permite guardar una gran cantidad de espacio en la barra lateral manteniendo una interfaz amigable para sus usuarios mediante la combinación de 3 diferentes widgets en uno solo.

En este artículo, vamos a mostrar cómo añadir un Sidebar Widget jQuery con pestañas en Blogger.

¿Qué es un Widget con pestañas jQuery ?Habrás visto un montón de sitios web que tienen un widget con pestañas en la parte superior de su barra lateral donde mantiene tres cajas en un solo lugar y que te proporciona la posibilidad de seleccionar uno entre ellos.

No sólo le permite ahorrar un poco de espacio en la barra lateral , sino que también mantiene tu blog con un diseño limpio y profesional.

Una gran cantidad de los sitios web más populares llamados grandes, están utilizando la misma técnica para mostrar más widgets en menos espacio.

La primer cosa que hay que hacer es ir a Blogger Template >> >> Editar HTML y pegar el siguiente código CSS justo encima de la etiqueta ] ]> < / b: skin > . Si tienes un archivo de hoja de estilo CSS separada , entonces también puede añadir el siguiente CSS a la misma.

/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}

Ahora este paso depende enteramente de la codificación de la plantilla de blogger pues diferentes diseñadores tienen diferentes formas de codificar, pero lo más común que encontraremos en las plantillas nos indica lo siguiente. Hay que mirar en la parte superior del código de su área de widgets Sidebar . Debería encontrar ésta línea o una similar que cumple su función <div id='sidebar-wrapper'>, justo debajo de ella hay que pegar el siguiente fragmento de código.

<div class='tabviewsection'>
<script type='text/javascript'>
  jQuery(document).ready(function($){
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
     
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
                    $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
                    $(this).addClass("tabs-widget-current");
                    $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });      
 </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
<li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
 </b:section>                                    
</div>
              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
 
 </b:section>                                      
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>

<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                      
</div>
</div>

Una vez realizados los dos pasos, guardar la plantilla pulsando "Guardar plantilla" en la parte superior. Ahora si vas a la zona de diseño podés ver tres áreas de widgets justo por encima de la barra lateral. Allí podés añadir widgets , preferentemente los que más espacio ocupan, como ser "Entradas populares" o "Etiquetas". La primer lengueta se reserva para un widget que ocupe poco espacio, como puede ser el Perfil sin datos (solo la foto) .

Suerte.

Tomado de

http://www.mybloggerlab.com/2014/04/how-to-add-jquery-tabbed-sidbar-widget-in-blogger.html

Lista de enlaces como menú desplegable

noreply@blogger.com (OPin) — Sat, 22 Mar 2014 22:21:00 +0000

Cuando en tu blog haces referencia a diferentes páginas mediante el gadget "Lista de enlaces" puede que la lista se haga tan larga que te ocupe la totalidad de la página.

Esto ocurre con frecuencia en blogs de arte o fotografía donde se genera una lista agrupada por el nombre del artista y provee un link hacia la web del mismo o simplemente a la nota o post en el mismo blog.

Como nadie quiere tener ocupada la sidebar con una lista que ocupa todo el espacio, lo más recomendable es realizar un menú desplegable.

Si, ya sé que el gadget "Lista de enlaces" provee la opción de definir la cantidad de enlaces a mostrar, pero lamentablemente no aparece un botón que nos de la opción de "mostrar todos" o menos, como ocurre con el gadget "Lista de blogs".

Así que se me dio por experimentar un poco y aplicar a la lista de enlaces un menú desplegable.

Para ello debes entrar en el editor y buscar el gadget según el nombre que el mismo tenga. Para saberlo alcanza con ir a Diseño y colocar el cursor del mouse sobre el gadget sobre la palabra Editar. Al pie de página aparecerá el código que da nombre al gadget.

En base a eso buscalo en la plantilla y al expandir el artilugio verás las siguiente parte de código.

<ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>

Eso deberás reemplazarlo por el siguiente código.

<center><br/>
<select class='menu-links' onchange='location=this.options[this.selectedIndex].value;'>
<option><h2>Listado desplegable de todos los artistas</h2></option>
<b:loop values='data:links' var='links'>
<option expr:value='data:links.target'><data:links.name/>
</option>
</b:loop>
</select>
</center>

Y listo, ya puedes verlo funcionar.

Con eso es suficiente, pero puedes cambiar el texto Listado desplegable de todos los artistas donde se indica y también puedes darle un poco de color para que se vea más acorde a la paleta de colores de tu página

Solo deberás pegar antes de
]]></b:skin> este código:

.menu-links{
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */
}

Ahí puedes cambiar los colores donde se indica en verde.

Suerte.

Añadir botones sociales a todas las imágenes

noreply@blogger.com (OPin) — Thu, 06 Feb 2014 01:26:00 +0000

Fotos e imágenes se han convertido en una parte tan integral de los blogs que muchas imágenes son tan importantes como los textos. Ésto no solo es válido para los blogs de fotografía pues cualquier visitante podrá compartir la información de un post en base a la foto asociada al mismo.En el mundo moderno una imagen vale más que mil palabras .

En este post vamos a ver cómo utilizar las imágenes para conseguir que los visitantes compartan tu posts agregando botones de social bookmarking adheridos a las imágenes de tu blog e ir directamente a compartir la imagen (de ahí el post) en Facebook , Twitter , Pinterest y otras networks.

Para ello vamos a utilizar el gadget de SlingPic que ofrece un servicio para los usuarios de Blogger. péguele un vistazo a la demo a continuación , simplemente coloque el cursor sobre las imágenes para ver las opciones :

Añadir a Blogger

Usted puede recurrir al sitio web de SlingPic y allí elegir las opciones que más le gusten o utilizar las siguientes combinaciones pre-hechas.

Nota: Debe haber iniciado la sesión en tu Blogger para poder ingresar el widget.

Default Theme

Dark Theme

Light Theme

Advertencia: En muchos blogs al introducir este servicio se observa un cambio de posicionamiento de las imágenes. Hace más de tres meses que envié la pregunta al servicio de soporte técnico y no han respondido, así que aconsejo usarlo siempre y cuando no altere la alineación de las imágenes.

Suerte.

Fuente: http://www.spiceupyourblog.com

Centrar AdSense

noreply@blogger.com (OPin) — Sun, 22 Dec 2013 04:08:00 +0000

Creo que a muchos nos llega a molestar que el AdSense de Blogger no solo no nos rinda ninguna ganancia sino que además quede antiestético, no solo por sus dimensiones antojadizas, sino también porque resultan imposibles de alinear a nuestro gusto.
Muchos gadgets de Blogger solo pueden ser ajustados entrando en la plantilla y agregando código.
En mi caso centrar el AdSense resultó fácil gracias a una entrada de http://leperogeek.blogspot.com.ar

Sólo debe ingresar en el editor de la plantilla y buscar (Ctrl + F) la línea:

]]></b:skin>

Justo antes de la misma deberá ingresar el siguiente código, según el AdSense se encuentre en el area de widgets o entre las entradas.

/* centrar en barra lateral */

.AdSense {

text-align:center;

}

/* centrar entre entradas */

.inline-ad{

text-align: center;

}

En mi caso esto solucionó el problema. Espero que a usted también le sirva

Luces intermitentes de Navidad

noreply@blogger.com (OPin) — Mon, 16 Dec 2013 23:33:00 +0000

No me diga que es de los que le gusta poner huevadas para decorar el blog para Navidad o Año Nuevo...¿En serio?

¿Cualquier cosa que brille o se mueva?

Mire, hay muchos lugares donde le ponen nieve que cae de una forma, o de otra, o de otra y usted, tal vez como yo, está sudando a 38 ºC en el living de su casa sin entender que gracia tiene esa nieve artificial en medio de tanto calor.

Ahora que si usted se encuentra en el hemisferio norte, seguramente con abrir un poco las cortinas podrá ver nieve real y no necesitará de artilugios tan falsos como los que le comenté.

¿Que igual quiere algo para poner en el blog?

¿En serio?

Bueno amigo, usted lo ha pedido.

Copie el siguiente código y péguelo en cualquier elemento HTML de su blog y listo, lucesitas que se prenden y apagan.

No pida mucho más...

if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
  {cot_t1_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";}
else
  {cot_t1_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";}
var cot_tl_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: left top;}';
var cot_tl_fixedCSS='#cot_tl_fixed{position:fixed;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'_position:absolute;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'top:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'left:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'clip:rect(0 100 85 0);';
var cot_tl_fixedCSS=cot_tl_fixedCSS+cot_t1_DOCtp;
var cot_tl_popCSS='#cot_tl_pop {background-color: transparent;';
var cot_tl_popCSS=cot_tl_popCSS+'position:fixed;';
var cot_tl_popCSS=cot_tl_popCSS+'_position:absolute;';
var cot_tl_popCSS=cot_tl_popCSS+'height:98px;';
var cot_tl_popCSS=cot_tl_popCSS+'width: 1920px;';
var cot_tl_popCSS=cot_tl_popCSS+'right: 120px;';
var cot_tl_popCSS=cot_tl_popCSS+'top: 20px;';
var cot_tl_popCSS=cot_tl_popCSS+'overflow: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'visibility: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'z-index: 99999;';
var cot_tl_popCSS=cot_tl_popCSS+cot_t1_DOCtp2;
document.write('<style type="text/css">'+cot_tl_bodyCSS+cot_tl_fixedCSS+cot_tl_popCSS+'</style>');

function COT(cot_tl_theLogo,cot_tl_LogoType,LogoPosition,theAffiliate)
{document.write('<div id="cot_tl_fixed">
');
document.write('<></a>');
document.write('</div>
');}

//if(window.location.protocol == "http:")
COT("http://www.honeybearplayhomes.com/resources/flashing%20christmas%20lights.gif", "SC2", "none");
//]]>
</SCRIPT>

Si tiene inconvenientes encopiarlo, le paso la dirección del creador original.

http://tester2.synthasite.com/christmas-lights-top.php

Medir la velocidad de tu blog

noreply@blogger.com (OPin) — Wed, 04 Dec 2013 17:51:00 +0000

No le voy a negar que existen infinidad de herramientas para verificar el desempeño técnico de su blog o página web.
Por lo general se miden diversas variables que son útiles a la hora de seleccionar nuestros proveedores de servicios. Como en Blogger nuestros proveedores gratuitos son el propio Blogger (y Google) así como también Picassa, no tendremos mucho que analizar más que cambiar de proveedor de servicio de Internet.

¿Cuales son los factores que afectan la velocidad de mi blog?

Hosting

Sin duda el principal factor. Dónde está ubicado el servidor, la latencia del mismo, el número de saltos (tracert) hasta llegar al mismo, el tiempo de respuesta, la velocidad del disco duro que tiene instalado, los recursos del servidor (RAM, Procesadores, etc), tipo de tarjeta de red, Sistema Operativo, ancho de banda asignado, etc. Un hosting de calidad es necesario, a ser posible en el mismo país hacia el que va dirigida la web, con unas características suficientes y a ser posible dedicado (muy importante este detalle).

Red

No es lo mismo la red donde está conectado nuestro servidor, al igual que la red a la que se conectan nuestros clientes. Que tu centro de datos tenga contratada una red de calidad es muy recomendable, tanto por fiabilidad como por velocidad. A veces se redireccionan a otros nodos por averías en la red o mantenimiento, y pasamos de tener un tracert de 8 saltos a tener uno de 13 saltos. Cuanto menos nos pase, mejor. El operador de ADSL (o similares) con el que trabajen nuestros clientes también influirá en la velocidad a la que ellos cargarán nuestra página web, aunque este factor escapa totalmente a nuestro control .

Programación

Otro factor muy importante. En igualdad de condiciones, una web bien programada y optimizada, sobre todo en temas de diseño y consultas a bases de datos, correcto uso de la cache, etc, influye enormemente en la velocidad de carga de la misma. Hay que cuidar cada vez más estos detalles.

Una vez conocidos los factores que determinan el tiempo de carga de tu página web, es hora de ver las herramientas para poder hacer dicho proceso, pero para mí hoy en día hay na que me resulta eficiente y les vengo a recomendar sin dejar de lado a las otras:

Pingdom Tools es, sin duda, la herramienta online mas completa para medir y mejorar la velocidad de carga de tu página web. Su funcionamiento consiste en testear tu página web por completo rastreando todo el contenido a través del código HTML (es capaz de detectar imágenes, CSS, Javascripts, RSS, Flash y frames/iframes).

Click para probar tu blog

De hecho, imita la manera en la cual se cargaría tu web normalmente. El funcionamiento es realmente sencillo, solo ingresamos la url y listo, le damos clic en “Test now!”, pero no todo queda ahí, ya que, de forma gratuita, te permite medir 3 bloques importantes de tu página web:

Test total de la página web: Aparte de mostrarte el tiempo total de carga de la página web, te muestra individualmente cada uno de los elementos de tu pagina (en forma de grafico de barras), desde que hacen contacto con tu servidor hasta se descargan.
Salud DNS: Comprobación rápida de la conexión con tu servidor, algo muy útil cuando tienes problemas de carga.
Ping y Traceroute: Son comandos muy útiles que nos permiten acceder a información básica de nuestro equipo para poder, por ejemplo, comunicarnos vía remota o con otros equipos de la red.

Muy util sin dudas ya que su gráfico de barras nos permite apreciar el orden en que se cargan los elementos, su tiempo y su peso. Con esa información deberias poder decidir que puedes eliminar de tu blog para mejorar la carga y que no.

También incluye un historial estadístico para ver el avance en la optimización en el paso del tiempo, pero también requiere un dominio propio para que no aparezcan resultados de otros blogs con la terminación .blogspot.com.

Fuente http://ignaciosantiago.com

Oxitoxina - OPINTEMPLATES

noreply@blogger.com (OPin) — Sat, 23 Nov 2013 02:53:00 +0000

Oxitoxina es un maravilloso template que OPINTEMPLATES entrega gratis para su uso comercial o privado. Este limpio y claro template, usa el fabuloso Diapo Pixedelic free jQuery slidesow, un slider con el que se pueden mostrar imágenes, videos, botones o tablas, de manera muy simple.
Oxitoxina no es un template responsive, pero gracias a usar el ancho completo de la plantilla en cada post, resulta de fácil lectura en dispositivos móviles.
Si usted desea mantener algunos widgets siempre visibles, use el footer o el área social provista.
Oxitoxina esta basadoa en la misma plantilla que tanto éxito ha tenido durante tanto tiempo.
Descárguela y disfrute otra plantilla gratuita producida por OPINTEMPLATESPRO.

Template Name:Oxitoxina by OPintemplates
Platform: Blogger / Blogspot
Release date : 22, Nov 2013
Author : www.opintemplatespro.blogspot.com
License : Creative Commons Attribution 3.0
Level :Template Premium Original
Stile : Magazine
Features : Two columns, fix, tree columns at foot
Color : Black, Yellow, White

Evaluation :

correct operating

This Template is free to use and is not actively supported by the author, but will be monitored for serious bugs that may need correcting.

Creative Commons Attribution: You are free to use, distribute or adapt this template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.

"Google Code Subversion Repository" Solicitar contraseña ? Solución !

noreply@blogger.com (OPin) — Fri, 08 Nov 2013 19:28:00 +0000

¿Cómo corregir un "Google-Code-Subversion-Repository" Password Request? la solución es simple !
Seguramente hoy ha encontrado un error en su blog tal como yo hace un tiempo. Debo confesarle que me tomó un buen tiempo averiguar lo que le había pasado a mi página.En primer lugar, si usted está utilizando una plantilla ajena es muy difícil encontrar exactamente dónde está el problema , ya que puede ser causado incluso por alguno de los widgets.Una manera simple de probar que está cambiando su plantilla es desactivar de a uno sus widgets y ver que va pasando con cada uno .Así es como normalmente aparece en los sitios web afectados por el error.El error se produce en forma de un cuadro de diálogo como se muestra en la siguiente figura y afirma

"El sitio dice : Usuario y contraseña son solicitados por http://reader-download.googlecode.com. El sitio dice: "Google Code Subversion Repository"

Solución 1

Busque el lugar en su página web HTML , donde hay una referencia a " googlecode.com " y retírela.

Esta simple acción suele dar resultados. Normalmente tiene un llamado a un archivo .js o una imagen que se encuentra en esa dirección. Usted podrá reemplazarla por otra que deberá almacenar en un sitio de su confianza.

Solución 2

Buscar en los widgets activos la referencia a la " googlecode.com " y retirarla.
Usted podrá reemplazarla por otra que deberá almacenar en un sitio de su confianza.

Espero les haya sido de utilidad.

40 plantillas Responsive gratuitas

noreply@blogger.com (OPin) — Fri, 01 Nov 2013 04:47:00 +0000

Aquí les traigo un TOP 40 de Plantillas gratuitas para Blogger que corresponden a diseño Responsive o Adaptativo. Si usted está buscando una plantilla de este tipo y todavía no ha logrado decidirse por la mejor, esta lista le será de mucha utilidad.

Son 40 Plantillas que usted podrá ver mediante un test Responsive y verificar como se mostrará en cada dispositivo en particular.

También podrá descargarla en forma directa, así que simplemente es cuestión de ponerse a elegir cual es la que mejor le resultará.

Nº	NOMBRE	BLOG	DEMO / TEST	DOWNLOAD
1	Galaxy Grey	Blogger	Clik Test Responsive	File XML
2	SimpleOne Grey	Blogger	Clik Test Responsive	File XML
3	SimpleOne V2	Blogger	Clik Test Responsive	File XML
4	DCM-v2 Blue	Blogger	Clik Test Responsive	File XML
5	Balance	Blogger	Clik Test Responsive	File XML
6	Blogger Responsive	Blogger	Clik Test Responsive	File XML
7	TheTuts	Blogger	Clik Test Responsive	File XML
8	Dark Light Faster	Blogger	Clik Test Responsive	File XML
9	Mayan Ringan V 1.1	Blogger	Clik Test Responsive	File XML
10	Loenpia Portpolio	Blogger	Clik Test Responsive	File XML
11	Johny Goreng	Blogger	Clik Test Responsive	File XML
12	Crazy Simple	Blogger	Clik Test Responsive	File XML
13	Responsive Herdiansyah	Blogger	Clik Test Responsive	File XML
14	The Bright	Blogger	Clik Test Responsive	File XML
15	Diffuser Magazine	Blogger	Clik Test Responsive	File XML
16	Bresponsive	Blogger	Clik Test Responsive	File XML
17	Sensational	Blogger	Clik Test Responsive	File XML
18	Johny Ribet	Blogger	Clik Test Responsive	File XML
19	FlatUI	Blogger	Clik Test Responsive	File XML
20	Simple Faster Responsive	Blogger	Clik Test Responsive	File XML
21	Elite Minima	Blogger	Clik Test Responsive	File XML
22	MaxMag	Blogger	Clik Test Responsive	File XML
23	Minimum	Blogger	Clik Test Responsive	File XML
24	Smoother Easy	Blogger	Clik Test Responsive	File XML
25	Blogholic	Blogger	Clik Test Responsive	File XML
26	DCM Dark	Blogger	Clik Test Responsive	File XML
27	Elite Classic	Blogger	Clik Test Responsive	File XML
28	MXfluity	Blogger	Clik Test Responsive	File XML
29	Shoppaholic	Blogger	Clik Test Responsive	File XML
30	The Sky Blue	Blogger	Clik Test Responsive	File XML
31	see book sekali	Blogger	Clik Test Responsive	File XML
32	Simple Clean Responsive V2	Blogger	Clik Test Responsive	File XML
33	Winter	Blogger	Clik Test Responsive	File XML
34	ShotMag	Blogger	Clik Test Responsive	File XML
35	FameMag	Blogger	Clik Test Responsive	File XML
36	Maju Jaya	Blogger	Clik Test Responsive	File XML
37	Gumi Vocaloid	Blogger	Clik Test Responsive	File XML
38	Termaximalist	Blogger	Clik Test Responsive	File XML
39	FW0 HT Green	Blogger	Clik Test Responsive	File XML
40	Hack4rt simple	Blogger	Clik Test Responsive	File XML

http://www.ketemplate.com

Flat Design Icons Set

noreply@blogger.com (OPin) — Sat, 19 Oct 2013 03:00:00 +0000

Nuevo conjunto de iconos que está inspirado en el nuevo diseño plano que es tendencia UI. Los iconos son minimalistas con algunos detalles distintivos para darles un poco de vida . Se ofrecen en archivo de forma vectorial psd.

Coloreando con imgr.co

noreply@blogger.com (OPin) — Sun, 13 Oct 2013 23:51:00 +0000

Cuando nos ponemos a trabajar en nuestros blogs se pone de manifiesto que para un buen diseño hace falta no solo un toque de buen gusto sino conocer bien que paleta de colores usaremos a la hora de colorear.

Los mismos generalmente obedecen a un criterio previo o a una imagen que hemos tomado como principal.

Así resulta que nos pasamos mucho tiempo tratando de encontrar los colores que corresponden a alguna imagen y así poder continuar con el diseño.

Todo esto se soluciona con un servicio gratuito anidado en la Red imgr.co nos pertime subir una imagen específica, sea un diseño o una captura de pantalla para luego encargarse de analizarla hasta darnos la paleta total de colores con su correspondiente código hexadecimal.

http://imgr.co/imgr.php

Espero les sea de utilidad

Desarrollo - OPINTEMPLATES

noreply@blogger.com (OPin) — Fri, 27 Sep 2013 04:08:00 +0000

Desarrollo es una maravillosa y eficiente plantilla para Blogger totalmente adaptativa o "responsive" diseñada por OPINTEMPLATES para regalárselas hoy a todos sus seguidores. Usando información de diferentes fuentes hemos construido esta plantilla que se adapta a todos los formatos de pantalla. Laptops, Tablets o celulares, mostrarán de una manera diferente y más eficiente la información de contenido de nuestros blogs.
Desarrollo cuenta con un slider de post recientes, social share mediante AddThis integrado, y recomended post al final de cada entrada.
Su diseño en rojo, gris y blanco, resalta los textos mediante fuentes grandes y uso completo de la pantalla.
Desarrollo es recomendado para quienes quieren llegar con sus blogs de forma simple y clara a los usuarios de nuevos dispositivos.
Disfrute de este maravillo template que OPINTEMPLATES quiere compartir con usted

Les recomendamos registrarse en forma gratuita en AddThis y obtener el código del sistema Smart Layers y reemplazarlo en la plantilla, para de esta manera poder recibir los resúmenes de uso en su blog

Template Name: Desarrollo by OPintemplates
Platform: Blogger / Blogspot
Release date : 18, Sep 2013
Author : www.opintemplatespro.blogspot.com
License : Creative Commons Attribution 3.0
Level :Template Premium Original
Stile : Magazine
Features : Two columns, responsive, tree columns at foot
Color : Red, Grey. White

Evaluation :

correct operating

This Template is free to use and is not actively supported by the author, but will be monitored for serious bugs that may need correcting.

Solución para navegadores que no soportan WebP

noreply@blogger.com (OPin) — Thu, 12 Sep 2013 02:17:00 +0000

Como les contaba en el post anterior, de a poco Google está cambiando el formato de nuestras imágenes por un nuevo estandard que disminuye el espacio de almacenamiento. El cambio se hace notorio en los navegadores que no soportan este formato, razón por la cual no mostrarán las imágenes. Seguramente hay algún problema comercial sobre el tema pues monstruos como Mozilla al momento no han hecho cambios.

El siguiente código puede ser agregado al encabezado de la plantilla de tu blog.

Hasta el momento había procedido a recargar las imágenes, pero al fin encontré un escrip JAVA que agregado al inicio del blog soluciona el tema.

Mientras todos se van adaptando a Google, les recomiendo que coloques está línea de código en sus plantillas.

<script type="text/javascript" src="js/webpjs-0.0.2.min.js"></script>

o este código. Este código sólo carga el archivo js cuando se detecta que webp no es soportado por el navegador :

Pérdida de imágenes en navegadores ajenos

noreply@blogger.com (OPin) — Wed, 11 Sep 2013 05:14:00 +0000

A Mozilla se le está haciendo difícil visualizar algunas de nuestras imágenes y en días recientes han comenzado a desaparecer. Claro que si cambias de navegador podrás verlas sin problemas. Siguen allí aunque no las veas. La novedad es que si quieres copiarlas ahora se presentan con extención WebP, que ni siquiera tu antiguo Photoshop podrá leer.

WebP (pronunciado «weppy») es un formato gráfico que soporta la compresión con pérdida así como la compresión sin pérdida Está desarrollado por Google, basándose en tecnología adquirida con la compra de On2 Technologies. Como derivado del formato de vídeo VP8, es un proyecto hermano del formato WebM, y está liberado bajo la licencia BSD.

WebP es uno de lo mejor que le pasó después de que Google adquirió On2 en 2010. Mientras que WebM no tiene una fuerte adopción fuera de YouTube y Firefox comenzado a apoyar H.264 después de algunos años de lucha, WebP es un formato de imagen que ya es utilizado por muchos sitios y aplicaciones. Puede reemplazar JPEG y PNG, y se puede utilizar para crear imágenes que se comprimen de manera más eficiente (un 35%) y se ven mejor. "Mediante la conversión de archivos PNG y JPEG a WebP, la Chrome Web Store fue capaz de reducir el tamaño de imagen en un 30% en promedio," informa Google.

El formato es compatible con Chrome, Opera, Android 4.0 + y hay muchas herramientas que le ayudan a convertir imágenes a WebP y verlos. También es interesante saber que todas las imágenes alojadas por los servicios de Google como Picasa Web, Blogger y Google pueden ser convertidos a WebP con un simple ajuste de URL.

Hay cambios en Picassa y dentro de ellos está el de ir pasando poco a poco todo su contenido a WebP con todos los problemas que para nosotros tendrá el recuperar imágenes que Mozilla no muestra o la imposibilidad de reutilizar estas imágenes hasta que Photoshop disponga de la herramienta idónea.

Yo ya estoy intentando recuperar mis antiguas imágenes.

Lo mejor es recurrir a los backup que uno debería tener, pero si eso es imposible, dado que la imagen en realidad está disponible como WebP solo debemos bajarla en ese formato a nuestro disco duro y allí convertirla nuevamente a JPG o PNG.

Para ello nada mejor que un conversor muy completo que gratuitamente nos entrega XnView Software en ésta dirección

http://www.xnview.com/en/xnconvert/

Descarguenlo, instálenlo y comiencen a recuperar aquellas imágenes que no quieren que sean WebP.

OTRA SOLUCIÓN MÁS PRÁCTICA AQUÍ: http://generacionopin.blogspot.com.ar/2013/09/solucion-para-navegadores-que-no.html

Cómo ven mi blog en otros dispositivos?

noreply@blogger.com (OPin) — Sat, 31 Aug 2013 19:27:00 +0000

No solo quienes tratamos de diseñar templates necesitamos ver como aparece nuestro blog en los diferentes aparatos que poseen los usuarios. De la disposición, velocidad y claridad en que nuestro blog aparezca depende que los usuarios o visitantes se queden un rato más o quieran regresar.

En las últimas semanas he estado practicando un poquito de lo que se llama Responsive Design y que realmente nos permite llegar de la mejor forma posible a todos los terminales sacrificando la belleza o personalización que a muchos nos gusta usar para decorar y hacer especial a nuestro blog.

El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es la técnica de diseño usada que mediante el manejo de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al mayor tipo de los entornos del usuario.

Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado se mostrará de diferentes maneras, preferiblemente la mejor adaptada en cada tipo de dispositivo: PCs, tabletas, teléfonos móviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles y la pantalla queda con letras e imágenes tan pequeñas que casi no se pueden leer.

Así los desarrolladores se evitan tener que diseñar aplicaciones ad-hoc para versiones móviles, por ejemplo, una aplicación específica para iPhone, otra para móviles Android, etc.

Como hoy en día, la variedad de dispositivos existente en el mercado ha provocado que la información disponible no sea accesible desde todos los dispositivos, o bien es accesible pero la experiencia de navegación es muy pobre, les recomiendo la utilización de un servicio web gratuito que les permite confirmar de qué manera se ve nuestro blog en cada aparato que se encuentra en el mercado. Claro, si se ve muy mal habrá menos visitas y necesitarán usar mi próximo template, que será full Responsive.

Para comprobar como se ven nuestros blogs sin tener que pedir prestado otros aparatos para hacerlo, visiten http://resizemybrowser.com/ , elijan una medida o aparato (unos en posición vertical y horizontal) hagan click y en la ventana de URL del navegador que se les abrirá peguen la dirección de sus blogs. Click y verán cómo los ven a ustedes los demás.

Otro sitio donde pueden obtener similares ( o mejores ) resultados es http://responsivetest.net

Solar - OPINTEMPLATES

noreply@blogger.com (OPin) — Sun, 18 Aug 2013 19:33:00 +0000

Solar es una plantilla para blogger que OPINTEMPLATES le entrega a usted sin costo. Es una plantilla orientada a sitios que manejen artículos sobre medio ambiente. El diseño clásico de OPINTEMPLATES más una curiosa computadora usada como slider, se complementa con diversas facilidades que harán la experiencia de uso algo memorable. Como siempre, si usted desea que algunos widgets esté siempre disponibles para el lector, simplemente ubiquelos en la parte inferior de la página o footer. El resto de los widgets se verán únicamente en la HOME page. La idea es disponer del mayor espacio posible en el área de post. Esperamos que este template gratis que le regala OPINTEMPLATES le agrade a usted.

It also has an additional headline as blog submission, automatic text as the author's presentation and a sector of Related Post invites readers to keep reading your blog.

Undoubtedly a beautiful template that you can adapt to many different applications.

Template Name: Solar by OPintemplates
Platform: Blogger / Blogspot
Release date : 18, Aug 2013
Author : www.opintemplatespro.blogspot.com
License : Creative Commons Attribution 3.0
Level :Template Premium Original
Stile : Magazine
Features : Two columns, fixed width, tree columns at foot
Color : Blue, Blue sky, Grey. White

Evaluation :

correct operating

This Template is free to use and is not actively supported by the author, but will be monitored for serious bugs that may need correcting.

Retro Social Icons por BRAINLEAF

noreply@blogger.com (OPin) — Fri, 16 Aug 2013 23:14:00 +0000

Dos conjuntos son mejor que uno! No hay mejores palabras para describir brevemente el contenido del artículo de hoy. No uno, sino dos juegos de iconos de medios sociales en un archivo zip. Perfecto para los sitios de diseño grunge. Espero que les gusten.

El conjunto incluye 84 iconos, dos tipos diferentes y dos medidas diferentes, a saber: 42 iconos y 42 iconos 128x128px 48x48px. En cuanto a los Términos y Condiciones de Uso, usted encontrará todos los detalles dentro del paquete zip (Readme.txt).

http://brainleaf.eu

Presentación de diapositivas con Picasa

noreply@blogger.com (OPin) — Mon, 22 Jul 2013 20:00:00 +0000

Sé que son muchos los lectores que se hacen malasangre con el tema de las presentaciones en Blogger. Incluso he incluido en mis tutoriales una descripción para cambiar el tamaño del widget que viene de base en Blogger. (Aquí) y que forma parte del top five de los post más frecuentados o populares en este blog.

Sin embargo la cosa es más simple desde hace un tiempo (largo). No hace falta recurrir a ninguno de los diferentes sistemas de almacenamiento de imágenes que proveen widgets de presentación, sinplemente hay que usar lo que uno tiene de regalo gracias a Google: Ésto es , por supuesto, Picasa.

Hágame caso y entre en su escritorio de Blogger.

Si usted hace Click en la imagen de su perfil en la esquina derecha superior, seguramente le aparecerán algunas opciones de entre las cuales le sugiero haga click en "Configuración de la cuenta".

Se abrirá otra ventana en la que a la izquierda y bien abajo se observa la palabra "Productos" Haga click allí.

Le aparecerá entonces una lista con todos los productos que usted está usando y entre ellos debería encontra uno llamado "Álbumes web de Picasa". Hagame caso y haga click allí.

Al entrar le aparecerá una frase que dice "Haz clic aquí para volver a Álbumes web de Picasa." hágale click porque en el nuevo formato aún no he jugado lo suficiente como para indicarle el camino.

Arme un álbum nuevo o seleccione un álbum existente. Ábralo.

En la extrema derecha le aparecerá un texto que dice "Enlazar a este álbum" hágale click.

Se desplegará un nuevo menú con una linea que dice "Incrustar proyección de diapositivas" si, adivinó, haga click

Al fin le aparecerá un menú para preparar su presentación.

Coloque la medida deseada.

Indique Reproducir automáticamente y copie el código resultante que el sistema le entrega más abajo.

Presione la tecla "Listo" y su código deberá pegarlo en algún elemento HTML, o como yo lo hago aquí, directamente dentro de un post.

Y de paso le muestro mis pinturitas.

Suerte.

Byte wordl - OPINTEMPLATES

noreply@blogger.com (OPin) — Thu, 18 Jul 2013 03:23:00 +0000

Byte wordl es una plantilla para blogger que OPINTEMPLATES le entrega a usted sin costo. Es una plantilla orientada a sitios que manejen artículos sobre tecnología . El diseño clásico de OPINTEMPLATES más una curiosa computadora usada como slider, se complementa con diversas facilidades que harán la experiencia de uso algo memorable. Como siempre, si usted desea que algunos widgets esté siempre disponibles para el lector, simplemente ubiquelos en la parte inferior de la página o footer. El resto de los widgets se verán únicamente en la HOME page. La idea es disponer del mayor espacio posible en el área de post. Esperamos que este template gratis que le regala OPINTEMPLATES le agrade a usted.

It also has an additional headline as blog submission, automatic text as the author's presentation and a sector of Related Post invites readers to keep reading your blog.

Undoubtedly a beautiful template that you can adapt to many different applications.

Template Name: Byte world by OPintemplates
Platform: Blogger / Blogspot
Release date : 18, Jul 2013
Author : www.opintemplatespro.blogspot.com
License : Creative Commons Attribution 3.0
Level :Template Premium Original
Stile : Magazine
Features : Two columns, fixed width, tree columns at foot
Color : Blue, Blue sky, Grey. White

Evaluation :

correct operating

This Template is free to use and is not actively supported by the author, but will be monitored for serious bugs that may need correcting.

Iconos de marcas

noreply@blogger.com (OPin) — Thu, 11 Jul 2013 03:53:00 +0000

Otro regalo para los seguidores del blog.

Hoy estamos encantados de ofrecer un conjunto de iconos útiles realizados por Dan Leech. El conjunto de Dan contiene 100 iconos PNG de los sitios web más populares, aplicaciones y organizaciones, todos en once tamaños (16, 24, 32, 48, 64, 128, 256, 512, 1024, 2048 y 4096 píxeles cuadrados).

Los iconos blancos tienen fondos transparentes, lo que los hace increíblemente útiles para estilo con CSS.

http://www.smashingmagazine.com

El bajón de visitas por culpa de Penguin

noreply@blogger.com (OPin) — Mon, 08 Jul 2013 20:20:00 +0000

El monopolio que tiene Google en Internet está asesinando a muchos blogs . La gran mayoría de bloggers intenta por todos los medios revertir una tendencia a la baja en las visitas que se viene presentando desde que el gigante informático decidió cambiar el algoritmo para su buscador a inicios de 2012. Antes de ésto había sitios que medianamente lograban algunas visitas como para no sentirse tan solos, pero con el tiempo eso cambio hasta relegarlos al sótano de la quinta, sexta o hasta la décima página de las búsquedas.

Primero fue un algoritmo denominado Panda que determinó que algunos sitios no eran relevantes por más actualizaciones que hubiera y la gente intentó reducir el número de links, mejorar la experiencia de usuario, velocidad del sitio, SEO, .... Se toleró la perdida de visitas aún cuando llegó otro animal llamado Penguin, otro dichoso nombre que utilizó Google para llamar a su nueva actualización al algoritmo de búsqueda. En mi mejor blog pasé de 200 visitas diarias a 45 de la noche a la mañana y sigue bajando.

Google es libre de cambiar sus métodos, pero el buscador con su nuevo algoritmo no le importa que tanto nos rompamos la cabeza con contenido o si actualizamos el sitio 10 veces al día, simplemente seremos ignorados mientras que otros blogs con menor contenido gozan de mejores posiciones.

Es cierto que tampoco se puede culpar del todo a Google por la reducción de visitas. Hay una crisis mundial y específicamente de España que ha reducido muchísimo el caudal de blogs que se encuentran activos.

En abril de 2012 Google presentó su nuevo algoritmo Google Penguin en sustitución de Google Panda y se puede decir que desde entonces ha dado dolor de cabeza a más de un técnico S.E.O y a más de una empresa.

Con Google Penguin, Google pretende mejorar la experiencia del usuario aportándole contenidos de valor con enlaces a sitios de calidad que coincidan con lo que está buscando. Se dijo inicialmente que Google Penguin iba a penalizar los sitios web sobreoptimizados en S.E.O., lo que nos hizo temblar a muchos técnicos S.E.O. Pero realmente lo que Google Penguin ha penalizado ha sido a aquellos sitios que usaban técnicas que Google consideraba poco éticas, como el stuffing, el intercambio de enlaces etc. Pero analicemos más detenidamente los cambios que ha supuesto Google Penguin.

En primer lugar, introduce un incremento de las búsquedas relacionadas, que serán de mayor calidad. El algoritmo considerará aspectos como las tendencias actuales y las búsquedas anteriores del usuario.

En términos de búsquedas locales (por ejemplo en España usando Google.es) Google Penguin proporciona resultados actuales y de mayor calidad. El nuevo algoritmo intenta ofrecer resultados a la búsqueda del usuario que estén relacionados con su localización. Por ejemplo, si busco guardería de perros y estoy en Zaragoza, Google dará más valor a las guarderías caninas situadas en esta localidad, ya que considera que son las que realmente me aportarán valor (¿para qué me interesa a mi una guardería que esté en Almería?).

Ahora Google Penguin otorga todavía más importancia a que los contenidos sean frescos, es decir, aporta mayor valor a aquellos sitios que se actualicen con frecuencia por considerarlos que están actualizados a las últimas tendencias.

Pero Penguin todavía lleva más lejos el concepto de adaptarse a las necesidades del usuario. Ha mejorado el sistema de sinónimos en las búsquedas para aportar mayor valor en la búsqueda.

Y ahora viene la parte que hemos comentado anteriormente: Google penalizará a los sitios sobreoptimizados. En términos de enlaces, penalizará el intercambio de enlaces, los enlaces de sitios web que no guarden relación con nuestro contenido o enlaces de sitios situados en el extranjero (como podés pensar, no sería muy natural que este sitio web recibiese un enlace de una página porno situada en Ucrania). También olvídate de tener tu web en una granja de enlaces ya que a Súper Pingüino no le hace ninguna gracia.

Prestar también atención al anchor text de los enlaces entrantes ya que a Google Penguin no le hace gracia que todos tengan el mismo texto ancla (normalmente las palabras clave). Deberás combinar palabras clave, el nombre de tu página y texto del tipo "haz clic aquí".

También se penalizará el stuffing (abuso de las palabras clave) Por ejemplo el siguiente contenido estará penalizado "vendo tornillos en Zaragoza, haz clic aquí para ver la mejor pagina de tornillos en Zaragoza para comprar buenos tornillos: tornillos de todas clases y tamaños". Este sitio (además de ser una aberración para los ojos) será penalizado.

Ojo a copiar contenido de otras páginas web, también estará penalizado ya que Google, además de considerar que no aporta ningún tipo de valor, lo vinculará a un intento de sobreoptimizar nuestro sitio web. En términos de contenido asegúrate que en tu web no existe ningún tipo de contenido oculto ya que si el nuevo algoritmo se entera ya puedes despedirte de aparecer en Google.

Con Google Penguin las redes sociales han cobrado una importancia extraordinaria. Asegúrate de añadir bookmarks (botones de redes sociales como Facebook, Twitter y Google+) a tu sitio web ya que Google considera que si un contenido es compartido es porque es de alta calidad.

Y esto es todo.

Suerte.

Fuentes: Pinche Película y Eduardo Martinez Blog

Entradas Relacionadas Circulares

noreply@blogger.com (OPin) — Mon, 08 Jul 2013 00:29:00 +0000

Para aquellos que les ha gustado nuestro post Widget de Entradas Relacionadas para Blogger se me ocurrió darle un pequeño giro para aquellos que quieren hacer algo diferente en sus blogs.

Modifiqué un poco el archivo JAVA para que las imágenes aparezcan en formato circular. Tal vez sea una cosa muy simple para muchos de ustedes y puede que no tenga mayor sentido, pero me ha gustado así.

Para realizarlo simplemente deberan seguir los mismos pasos que detallamos en la entrada original y una vez que tengan todo en funcionamiento reemplazarán la siguiente línea de código

https://dl.dropbox.com/u/14895124/Javascript/related-posts-with-thumbnails-for-blogger%5B1%5D.js

por ésta otra

https://dl.dropboxusercontent.com/u/14895124/Javascript/related-posts-with-thumbnails-for-blogger-circle.js

Algo simple ¿no?

Suerte y que lo disfruten