Evitar que una entrada aparezca en los resultados de Google

18 de agosto de 2014 36 comentarios ,


Algunas veces por diversas razones podremos enfrentarnos con la situación de no querer que una entrada en particular se muestre en los resultados de búsqueda de Google, quizá porque has eliminado esa entrada y sigue apareciendo en los resultados, o por cuestiones de privacidad, estrategia de posicionamiento (SEO), etc.
Si bien la mayoría de nosotros queremos ser amados por Google, también podemos decirle "aquí no". De manera que, puedes crear una(s) excepción(es) para que Google no muestre en sus resultados las entradas que no quieras que aparezcan ahí.

Eliminé una entrada y ¡sigue apareciendo en Google!

Por ejemplo, podría darse el caso de que nos vemos obligados a eliminar alguna entrada de nuestro blog, ya sea por cuestiones personales, legales, arrepentimiento, o la razón que sea. Lo ideal sería que al eliminarla desapareciera para siempre del universo, pero la mayoría de las veces no es así, al menos no de inmediato como quisiéramos. Si la entrada estaba indexada por los motores de búsqueda entonces es posible que esa entrada se siga mostrando en los resultados de Google, aun sin importar que esa URL sea inaccesible.

No es mayor problema, pero hay quienes no quieren que haya rastro alguno de esa entrada, sobre todo porque aun cuando esa entrada ya no exista alguien podría verla desde la caché.

Lo que tenemos que hacer en estos casos es pedirle a Google que elimine dicha entrada de los resultados de búsqueda, y hacerlo es muy sencillo, para ello usaremos las Herramientas para webmasters de Google.

Primero ingresa a la herramienta Eliminar contenido obsoleto, pega ahí la URL de la entrada que ya no existe y da click en Solicitar eliminación.


En ese momento Google analizará la URL, si comprueba que en verdad ya no existe te confirmará con un "This content is gone", así que da click nuevamente en Solicitar eliminación, y a esperar a que los robots hagan su trabajo.


¿Y qué pasa si no he eliminado ninguna entrada pero no quiero que ese post aparezca en Google?

También puede darse el caso que no quieras que una entrada en particular se muestre en los resultados de búsqueda, pero no quieres eliminarla de tu blog, sólo no quieres que aparezca en Google, quizá porque esa entrada pueda afectarte el posicionamiento, o porque no es relevante para ti o tus lectores.

Como no quieres eliminarla de tu blog entonces tienes que decirle a los robots que no indexen esa entrada, y para ello usaremos la herramienta que Blogger nos ofrece desde la configuración del blog, así que nos dirigimos a Configuración | Preferencias para motores de búsqueda | Rastreadores e indexación, y en donde dice Archivo robots.txt personalizado da click en Editar para habilitarlo en caso de que no lo hayas hecho antes.

Ahí agrega lo siguiente:

User-agent: Mediapartners-Google
Allow: /

User-agent: *
Disallow: /20014/08/mi-entrada-que-ya-no-existe.html
Disallow: /search
Allow: /

Sitemap: http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?orderby=UPDATED

Ahí deberás agregar la URL de la entrada que no quieres que aparezca en los resultados de Google y que será ignorada por los robots.
Si quisieras añadir más de una entrada sólo agrega otra línea igual con su URL correspondiente, por ejemplo:

Disallow: /20014/08/mi-entrada-que-ya-no-existe-1.html
Disallow: /20014/08/mi-entrada-que-ya-no-existe-2.html

Nota que en las URLs no ponemos el nombre del blog pues no es necesario, sólo agrega desde la diagonal que aparece antes de la fecha (o de la P en caso de que se tratara de una página estática).
Al mismo tiempo hemos aprovechado para añadir nuestro sitemap en el archivo robots.txt, ahí deberás poner el nombre de tu blog donde se indica.

Para asegurarte que todo está bien puedes comprobar tu archivo robots.txt en las Herramientas para webmasters, sólo considera que los robots se toman unos días en pasar por el blog así que la comprobación no la verás de inmediato.




Menú horizontal con buscador expandible

30 de julio de 2014 64 comentarios ,

El menú horizontal con buscador integrado parece ser uno de los favoritos por muchos blogueros. Esta es una variante, se trata de un menú horizontal con subpestañas y que incluye un buscador que se expande al pasar el cursor sobre él cubriendo casi todo el ancho del menú. Puedes verlo funcionando en este blog de pruebas.

Este menú está hecho únicamente con CSS por lo que no tendrás que preocuparte por la compatibilidad con librerías de scripts, ni con navegadores pues funciona bien con todos los navegadores en sus últimas versiones.

El efecto expandible lo conseguimos también con CSS, y es simple, sólo establecemos que el ancho del buscador sea de 0px en su estado normal, y luego aumentamos el ancho al pasar el cursor sobre él. Juego de niños, ¿no? ;)

ATENCIÓN: Si usas una plantilla original de Blogger primero necesitas seguir los pasos de esta entrada, de lo contrario el menú podría no verse o funcionar correctamente.

Para poner este menú en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos CSS:
#menuBuscador {
position: relative;
width: 95%; /* Ancho del menú */
height: 40px;
padding-left: 14px;
background: #CC2A41; /* Color de fondo */
}
.menusearch {
padding:0;
margin:0;
list-style:none;
position:relative;
z-index:5;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
}
.menusearch li:hover li a {
background:none;
}
.menusearch li.top {display:block; float:left;}
.menusearch li a.top_link {
display:block;
float:left;
height:40px;
line-height:40px;
color:#fff; /* Color de los títulos */
text-decoration:none;
font-size:14px; /* Tamaño de la fuente */
padding:0 0 0 12px;
cursor:pointer;
}
.menusearch li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link:hover, .menusearch li:hover > a.top_link {color:#fff;}
.menusearch li:hover {position:relative; z-index:2;}
.menusearch ul,
.menusearch li:hover ul ul,
.menusearch li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menusearch li:hover ul.sub {
left:0;
top:40px;
background:#351330; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menusearch li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menusearch li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#fff;
font-size:14px;
text-decoration:none;
}
.menusearch li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#351330 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat;}
.menusearch li:hover ul.sub li a:hover {
background:#CC2A41; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menusearch li:hover ul.sub li a.fly:hover, .menusearch li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#CC2A41 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menusearch li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #351330; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search input[type="text"] {
background: #fff url(//lh4.googleusercontent.com/-1jhhmuhclMc/U8_hntfKzCI/AAAAAAAAFi8/hqlTRAByrVM/s32/buscar.png) no-repeat center left;
position: absolute;
right:3px; /* Distancia del buscador desde la derecha */
outline:none;
font-size: 13px; /* Tamaño de la fuente del buscador */
color: #ccc;
width: 0;
margin: 0;
padding: 12px 0 12px 35px;
z-index: 1000;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#search input[type="text"]:hover, #search input[type="text"]:focus {width:94%} /* Ancho del buscador cuando se expande */

Luego en Diseño crea un gadget HTML/Javascript y ahí pega lo siguiente:
<div id='menuBuscador'>
<ul class='menusearch'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>
</ul>

<!-- Buscador -->
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>

</div>


Ya sólo deberás guardar los cambios. El primer código son los estilos, ahí verás en color verde dónde cambiar los colores, fuentes, etc., o sea, el aspecto del menú. En color rojo van las URLs y los nombres de tus pestañas y subpestañas.

Antes de <!-- Buscador --> puedes agregar más pestañas. Por ejemplo: si quisieras añadir otra pestaña simple, agrega una línea como esta:
<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>

Si quisieras agregar una pestaña con subpestañas entonces agrega este código:
<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>

Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:
<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>

Eso es todo, menos complicado de lo que parece. Sin duda es un menú que hay que considerar, no sólo por lo atractivo del buscador, sino por la posibilidad de agregar subpestañas y sin necesidad de usar ningún script. Además que podemos personalizarlo tanto como queramos.
 
Ir Arriba Ir Abajo
I Ciudad Blogger