Identificar vinculos externos

En esta ocasión aprenderemos algo muy útil, que nos sirve para identificar los vinculos externos por medio de un icono pequeño.

El truco consiste en utilizar los «selectores de atributos». Por ejemplo, esto permitiría detectar todas las etiquetas A que contengan un vínculo a cualquier tipo de archivo:

En este caso identificaremos a dos tipos de archivos similares (en este caso archivos comprimidos), así que usaremos el mismo icono:

a[href $=’.zip‘], a[href $=’.rar‘]{
padding-right: 18px;
background: transparent url(http://bp0.blogger.com/_Zuzii37VUO4/Rh1xnUrQooI/AAAAAAAAAhc/wU0nM7M_Ebo/s1600/icono_zip.gif) no-repeat center right;
}

Aqui identificaremos con un icono a una hoja de estilo (CSS) externa:

a[href $=’.css‘]{
padding-right: 18px;
background: transparent url(http://bp2.blogger.com/_Zuzii37VUO4/Rh2GS0rQopI/AAAAAAAAAhk/4QyZEOVo2L8/s1600/icono_css.gif) no-repeat center right;
}

Aquí identificamos un archivo de texto:

a[href $=’.txt‘]{
padding-right: 18px;
background: transparent url(http://bp2.blogger.com/_Zuzii37VUO4/Rh2JS0rQoqI/AAAAAAAAAhs/8cn9Frf0DqE/s1600/icono_textoplano.gif) no-repeat center right;
}

O incluso podemos identificar el enlace a un e-mail:

a[href ^=»mailto:»] {
padding-right: anchoImagen;
background: transparent url(URL_imagen) no-repeat center right;
}

Y para identificar a un vinculo externo cualquiera (sin definir las clases) el siguiente código:

.linkexterno {
background: transparent url(http://bp1.blogger.com/_Zuzii37VUO4/Rimp_xN7pfI/AAAAAAAAAmM/kp9QQ5bj-nc/s1600/icono-link-externo.png) no-repeat center right;
padding-right: 14px;
}

Todos estos códigos deben de ser añadidos en:

Plantilla–Edición de HTML

Antes de ]]></b:skin>

Guardar los cambios y listo

Nota: Los iconos usados pertenece a BlogyWeb.

Otros Trucos

Diferenciar links externos con CSS
Selectores condicionales

Crear degradado con CSS

Lo que aprende uno leyendo otros blogs ¿no?, pues si la verdad se aprende mucho principalmente de parte de Francisco y su blog Recursos Blog y Web (aunque mas chido suena «Blogyweb»). Leyendo algunos de sus pasados posts encuentro esta utilidad que me pareció estupenda y no me he resistido a contárselas: Degradado con CSS

Esta técnica se consigue utilizando un color de fondo y una imagen con degradado blanco a transparente, y a continuación te explicamos:

• Creamos una clase que con el color de fondo que deseamos y una imagen con degradado de la siguiente forma (colocamos esto antes de ]]></b:skin> )
  

#degradado { /*ponemos las dimensiones del área de degradado*/
width:150px; height:150px; /*Nos resuelve el problema de visualización del degradado en internet explorer, solo tienes que cambiar la ruta de tu imagen*/ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’degradado.png‘); /* Esta clase la creamos para que firefox ignore la corección de visualizacion del IE. */
}

.degradado[class] { /*Sigue la parte importante, seleccionamos la ubicación de nuestra imagen, su posición y como queremos se repita.*/
background:url(degradado.png) top left repeat-x;
}

• Ahora sólo otorgas la clase «degradado» y selecciona el color de fondo, por ejemplo:

<div class=»degradado» style=»background-color: #33CCFF;» >
<p>Este texto tendra un degradado de fondo</p>
</div>

Nos quedaria algo como esto:

Este texto tendra un degradado de fondo

Este texto tendra un degradado de fondo

El resultado sera de acuerdo al degradado del fondo de la imagen, en un ZIP se encuentran 2 diferentes degradados y el ejemplo que te acabamos de presentar. Recuerda que de acuerdo al tamaño del fondo que necesites será la imagen. Espero que te sirva. CLICK AQUÍ PARA DESCARGAR.

Detectar navegador con CSS

El siguiente truco esta basado en una de las características de Internet Explorer que es el no aceptar los comentarios formados por doble barra (//), por lo que cualquier cosa seguida por // lo entenderá como parte del código. Por ejemplo:

// display: hidden;

Firefox lo tomará como comentario y no ejecutará e IE lo tomará como código y lo ejecutará. De esta manera, podemos mostrar diferentes cosas dependiendo del navegador. Por ejemplo, en este caso, el rectángulo inferior será rojo si no se usa Internet Explorer y verde si lo es.

El CSS necesario es la siguiente:

#nonie, #iebased { margin: auto; margin-top: 20px; width: 400px; padding: 10px;
background-color: #f8e6e6; border: 1px solid #d2a2a2;
//background-color: #dbecd3; //border: 1px solid #b1d2a2; }

#nonie { //display: none; }

#iebased { display: none; //display: visible; }

Y estos los dos DIVs que se obtendrían dependiendo del navegador:

<div id="nonie">No estás utilizando Internet Explorer.</div>

<div id="iebased">Estás utilizando Internet Explorer.</div>

Para colocarlo como widget en Blogger, debemos colocar el CSS antes de ]]></b:skin>

Y colocar codigo de los DIVs en:

Plantilla–Elementos de la Pagina–HTML/JavaScript

Guardamos los cambios y listo 😉

Via: Vagabundia

U Comment I Follow

Aunque la correcta escritura seria: «You Comment, I Follow» su pronunciación es la misma; su traducción en español seria: «Tu comentario, Lo Sigo», pero ¿que es?…

El movimiento «U Comment I Follow» es una iniciativa la cual sirve para agradecer los comentarios publicados en tu blog, es decir, se agradece a los usuarios por medio de un link hacia su blog, claro que el link lo tendría que incluir esa persona, al momento de publicar un comentario.

La opción de no seguir el link de los comentarios, viene por defecto en casi todas las plataformas de blog, por eso he decidido eliminar el código, para así poder agradecer a todos los que se han tomado unos segundos para comentar en el blog, si tu también quieres hacerlo, haz lo siguiente…

Nos dirigimos a:

Plantilla–Edición de HTML

– Activa la casilla «expandir plantillas de artilugios».

Buscamos el siguiente código y eliminamos lo que se encuentra con rojo:

<dl id=’comments-block’>
<b:loop values=’data:post.comments’var=’comment’>
<dt class=’comment-author’expr:id=’"comment-" + data:comment.id’>
<a expr:name=’"comment-" +data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Guardamos y listo.

La moderación de los comentarios te permitirá evitar publicar los que contengan Spam o enlaces no autorizados, por lo que esta modificación no afectará lo más mínimo en cuanto a la protección de tu sitio.

Esta noticia la encontré en Zona Cerebral

PD: Para que este movimiento se pueda extender con mayor rapidez, puedes «menear» esta noticia para que todo el mundo la conosca.

Agredecer comentarios.

Solo da click en el cuadro que dice «menealo»

Optimiza el titulo de tu blog para los buscadores

El titulo los dice todo, esta utilidad era posible para wordpress editando un simple codigo o con un plugin, nosotros optimizaremos el titulo para que quede de esta forma: Titulo del Post–Titulo del blog, pues que antes nuestras entradas se mostraban de esta forma: Titulo del blog–Titulo del Post.

Lo haremos editando un simple codigo:

Nos dirigimos a:

Plantilla–Edicion de HTML

Buscamos el siguiente codigo:

<title><data:blog.pageTitle/></title>

Y lo cambiamos por este:

<b:if cond=’data:blog.pageType == «item»‘>
<b:section id=’titleTag’>
<b:widget id=’Blog2′ locked=’false’ title=’Blog Posts’ type=’Blog’>
<b:includable id=’comments’ var=’post’/>
<b:includable id=’postQuickEdit’ var=’post’/>
<b:includable id=’main’ var=’top’><title><b:loop values=’data:posts’ var=’post’><b:include data=’post’ name=’post’/></b:loop> : <data:blog.title/></title></b:includable>
<b:includable id=’backlinkDeleteIcon’ var=’backlink’/>
<b:includable id=’feedLinksBody’ var=’links’/>
<b:includable id=’backlinks’ var=’post’/>
<b:includable id=’status-message’/>
<b:includable id=’feedLinks’/>
<b:includable id=’nextprev’/>
<b:includable id=’commentDeleteIcon’ var=’comment’/>
<b:includable id=’post’ var=’post’><data:post.title/></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Guardamos y listo, ahora tendremos nuestro blog optimizado para los buscadores 😉

ACTUALIZACION:

Podemos cambiar el «:» (marcado con azul, en el coidgo anterior) por la tipicas flechitas que salen en wordpress 🙂

Visto en Blog y Web
Via–Widget Base

Proteger email con Javascript

¿Por que mi e-mail se llena de basura (spam)? Pues la respuesta es facil, de seguro habras colocado tu email en alguna pagina web/blog, pero los spammers no se ponen a revisar cada web/blog para llenar nuestro e-mail de basura: entonces ¿quien hace el trabjo sucio? pues los Spambots, ¿que son los spambots?, pues son maquinas diabolicas que estan al servicio de sus dueños, los «Spammer» que se encargaran de hacerte perder el tiempo borrando cada uno de sus malevolos mensajes, e incluso engañarte con algun mail publicitario.

¿Como hago para protegerme?

Usando Javascript. Puesto que los spambots rastrean todo el codigo que se encuentre en tu blog y si lo encuentra, enseguida enviara spam, pero el unico codigo que no rastreara es el JavaScript.

El codigo seria el siguiente:

<SCRIPT TYPE="text/javascript">
<!–
emailE=(‘yourname@’ + ‘emailserver.com’)
document.write(‘<A href="mailto:’ + emailE + ‘">’ + emailE + ‘</a>’)
//–>
</script>

Pero como no todos los usuarios que visitan tu pagina usan Tienen el JavaScript habilitado, asi que les dejaremos un mensaje para que lo habiliten, quedando el codigo asi:

<SCRIPT TYPE="text/javascript">
<!–
emailE=(‘yourname@’ + ‘emailserver.com’)
document.write(‘<A href="mailto:’ + emailE + ‘">’ + emailE + ‘</a>’)
//–>
</script>

<NOSCRIPT>
<em>Direccion de Email protegido por Javascript.<BR>
Por favor habilita JavaScript para contactarme.</em>
</NOSCRIPT>

Podemos colocar este truco como un widget (Plantilla–Elementos de Pagina), o para colocarlo en algun post, segun vuestras necesidades. Espero os sirva.

Trucos para posicionarse en Google o como conseguir muchas visitas

Ahora que estoy metido en esto del concurso de HazRuido he necesitado conocer algo mas, de lo que ya se, de posicionamiento en Google y como conseguir visitas hacia un determinado web/blog, he aqui unos muy bueno trucos:

1. Añade tu web a Google aunque Google no asegura que añadirá tu web/blog, pero es muy, pero muy recomendable hacerlo.
2. Piensa muy bien en el titulo que le colocas a tu web/blog, porque los motores de búsqueda usan los títulos de las páginas en sus resultados de búsqueda.
3. Consigue enlaces de paginas con un alto PageRank.
4. Enlazar: error si piensas que no te aporta nada linkar a otros blogs, es una característica común a los blogs importantes… estos linkan y tu debes linkar de cara a los motores de búsqueda optimizarás la indexacion de tu sitio.
   La forma de hacerlo más común es incluyendo un blogroll.
5. Utiliza trucos de SEO y MEO (algunos ya están incluidos aquí).

Ayuden me a posicionar mi sitio de Habitaquo a cambio recibirás un enlace mio en mi próxima sección de Enlaces. Continuara…

CSS ¿Que?

CSS ¿como se come eso?, pues con la cuchara no? jaja, antes de seguir avanzando en los trucos para optimizar nuestros blogs, debemos aprender esto…

El blog de Tuneando lo explica de una forma, pero ahora yo lo explico de otra 🙂

CSS proviene del ingles Cascading Style Sheets, en español vendria a significar hojas de estilos en cascada, es usado para definir la presentación de un documento estructurado escrito en HTML o XML, mas facil, sirve para definir cada uno de los elementos de nuestros blogs, los colores, la posicion de la sidebar, el ancho del header, el header, los codigos para hacer las tabs, casi todo…

Entonces ¿Cual el CSS de mi blog?

Pues el CSS de Blogger se lo logra observar cuando visitamos nuestro blog, y presionamos las teclas CTRL+U (en firefox) o bien vemos el codigo fuente de la pagina, el CSS se va desde:

body {

y termina antes de:

</style>

Comunmente es empleado para separar el contenido del diseño, haciendo más fácil la maquetacion de las páginas web. El contenido puede cambiar, pero el diseño seguirá siendo el mismo.

Ahora con esta pequeñisima explicacion (porque la de Wikipedia es larguisima), muy pronto podemos avanzar a realizar mejores trucos, nos vemos pronto…

¿Que es un Feed despues de todo?

Feed, fed, fid, o como quieran llamarlos (aunque su nombre es Feed) los vemos en casi todos los blogs, en casi cualquier lado, nos estan inundando, nos estan invadiendo, debemos hacer algo para evitar la invasion, jaja… Un usuario de este blog me ha pedido que explicase ¿que es un feed?, y como soy muy generoso…

Un feed… un feed?, que es un feed?, pues no sabria como definirlo asi que vamos a acudir a la Wikipedia… 😛

La palabra feed es un anglicismo cuyo significado original es alimentar. Se emplea para denominar a los documentos con formato RSS o Atom, basados en XML, que permiten a los agregadores recoger información de páginas web.

Los feeds suelen incluir titulares de noticias o artículos, a menudo acompañados de un resumen. Son muy utilizados en los weblogs o bitácoras, así como en prensa electrónica.

Este término podría traducirse como fuente, canal o alimentador dado que su función es el suministro de información a los usuarios, aunque en la actualidad no existe una traducción bien establecida y por ello suele usarse el término en inglés.

Okey espero que ya sepan que es un feed (porque sino…), Ahora el feed de los posts de nuestro blog viene por defecto con la siguiente URL:

http://elnombredetublog.blogspot.com/feeds/posts/default

El feed de los comentarios de nuestro blog seria la siguiente URL:

http://elnombredetublog.blogspot.com/feeds/comments/default

Un blog posee varios y numerosos feeds (que no pienso nombrar ahora), a los feeds se los identifica con una imagen generalmente Naranja y con unas especios de ondas hacia arriba, si necesitan mas informacion dejadme un comentario, que yo tan generoso se las proporcionare 😀

Drag and Drop: Coger y Soltar

Bueno amigos, esto lo debí haber posteado desde el comienzo, pero no lo hice pensando que este blog no llegaría muy lejos…

Pues bueno, es muy importante conocer conocer esto porque algunas personas no conocen las nuevas funcionalidades de blogger (antes en estado beta) pues ahora aprenderemos algo «nuevo» sobre blogger:

¿Que es «drap and drop»?

Pues bien Wikipedia lo describe de esta forma:

Drag ‘n drop (arrastrar y soltar), es un término muy usado en informática que se refiere a la acción de arrastrar y soltar con el ratón objetos de una ventana a otra o entre partes de una misma ventana o programa.

Ahora bien, ¿donde incluye esta funcion el nuevo blogger?

La nueva funcionalidad de blogger se la utiliza en el «Editor de elementos de la pagina»

Ahora si amigos, hemos aprendido lo que es «drag and drop», muy pronto estaremos aprendiendo sobre mas cosas sobre el nuevo blogger.