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

::Visitantes de tu blog en linea::

::Visitantes de tu blog en linea::

.

Este post lo puedes encontrar en mi blog.

Hola soy alex (HACKTIME) aqui les traigo el codigo para poder tener un contador de visitantes online de tu blog, no tiene publicidad ni links, muy bueno.

.

Solo copialo y pegalo, pero no olvides cambiar donde dice URL de tu blog, en:

Plantilla—->Nuevo elemento de pagina—->HTML/Javascript.

Eso es todo.

No olviden dejar sus comentarios

::Contador de visitas sin publicidad::

::Contador de visitas sin publicidad::

.

Este post lo pueden ver en mi blog.

.

Lo q les traigo aqui es un contador de visitas totales de tu blog si nada de publicidad, ni links ni nada y muy bueno, solo tienes q copiar y pegar el sig codigo en:

.

Plantilla—->Nuevo elemento de pagina—->HTML/Javascript:

.

Solo cambia donde dice URL de tu blog por la url de tu blog y ya esta.

.

No olviden dejar sus comentarios

::Redirecion de una pagina web/blog::

::Redirecion de una pagina web/blog::

Este hack lo puedes encontrar en mi blog.

Hola soy Hacktime uno de los nuevos miembros de Trucosblogger, este es mi segundo post espero q les agrade.

Quienes deseen redireccionar un blog o una página a otra distinta de Blogger solamente deben introducir un código en su plantilla (Ir a Plantilla –> Edicion HTML), antes de </head> :

<script language=’javascript’ type=’text/javascript’>location.href=&quot;http://dirección a la que queremos redireccionar.com&quot;</script>

Guardar y listo.
Este truco permite aprovechar el tráfico que recibía el blog antiguo, de forma que nos lo pensaremos mucho mejor a la hora de eliminar un blog y así, de paso, evitaremos la propagación de virus a través de ellos.
Curiosamente a esos virus se llega a través del redireccionamiento del blog eliminado.

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.

::Boton para cualquier uso::

::Boton para cualquier uso::

.

Durante mucho tiempo estuve buscando como hacer un boton como el de abajo para poder hacer enlazes o simplemente para lucir un blog y al fin lo encontre.

Ejemplo:

EL codigo para hacer un boton es este:

Solo cambia donde dice ” Bienvenidos a HACKTIME” y donde dice “tublog”. El problema es q los enlazes no sirven, pero el boton se ve bien.

No olviden dejar sus comentarios

::Abrir links externos en una nueva pagina::

::Abrir links externos en una nueva pagina::

.

Este es un hack para todos los q quieran q cuando alguien pinche sobre un enleze, no se salga de tu blog.

.

He aquí los pasos para instalar el script:Nos dirigimos a:

.

Plantilla–Edicion de HTML, y buscamos el siguiente codigo:

.

</head>

.

Y justo antes de él colocamos:

.

<script language=’javascript’>

var dominio = "www.tublog.blogspot.com";

var dominio1 = "tublog.blogspot.com";

var script = "javascript:void(0);";

var imagenesblogger0 = "bp0.blogger.com";

var imagenesblogger1 = "bp1.blogger.com";

var imagenesblogger2 = "bp2.blogger.com";

var imagenesblogger3 = "bp3.blogger.com";

var blogger1 = "www.blogger.com";

var blogger2 = "www2.blogger.com";

var publicidad = "pagead2.googlesyndication.com";

function LinksExternos() {

var Externo;

if (document.getElementsByTagName(‘a’)) {

for (var i = 0; (Externo = document.getElementsByTagName(‘a’)[i]); i++) {

if (

Externo.href.indexOf(dominio) == -1 &amp;&

Externo.href.indexOf(dominio1) == -1 &&

Externo.href.indexOf(script) == -1 &amp;&

Externo.href.indexOf(imagenesblogger0) == -1 &amp;&

Externo.href.indexOf(imagenesblogger1) == -1 &amp;&

Externo.href.indexOf(imagenesblogger2) == -1 &amp;&

Externo.href.indexOf(imagenesblogger3) == -1 &amp;&

Externo.href.indexOf(publicidad) == -1 &&

Externo.href.indexOf(blogger1) == -1 &&

Externo.href.indexOf(blogger2) == -1

)

{

Externo.setAttribute(‘target’, ‘_blank’);//Externo.setAttribute(‘class’, ‘linkexterno’);

}

}

}

}

window.onload = function() {LinksExternos();

}

</script>

.

Cambiamos www.tublog.blogspot.com y tublog.blogspot.com con la dirección de tu blog (con y sin www respectivamente) y listo.

No olviden dejar sus comentarios

::Leer más en tus posts::

Hola a todos, no soy leonel, soy un nuevo integrante de TRUCOSBLOGER, me llamo Alex y son el dueño de hacktime, hoy les traigo un hack, el famoso hack de “Leer más” en los posts. Este tema ya habia sido publicado, pero, no es por nada pero no le entendi, asi que trate un nuevo hack facil de hacer.

Este hack es facil de hacer pero hay que tener cuidado de no borrar ni una sola coma..

Primero nos vamos a:

Plantilla—->Edición Html, buscamos </head> y justo antes colocamos el siguiente código:

<style type=’text/css’>.ver_menu { display:block; }.ocultar_menu { display:none; }</style><script type=’text/JavaScript’>function desplegar(categoria){var menu = document.getElementById(categoria);if(menu.className == &quot;ver_menu"){menu.className = &quot;ocultar_menu";}else{ menu.className = &quot;ver_menu"; } }</script>

Guardamos los cambios y nos dirigimos al lugar que deseamos añadir el despegable, se puede agregar en post y en sidebars. Editamos una entrada y añadimos lo siguiente:

<script type=’text/JavaScript’>

</script>

<div class=’UNIQUENAME’>

<a href=’javascript:desplegar(“UNIQUENAME”);’>Leer más</a>

<ul class=’ocultar_menu’ id=’UNIQUENAME’>

En este espacio todo lo que deseamos ocultar,texto, imágenes, vídeos, un agradecimiento a Hacktime, etc..

</ul>

</div>

Solo cambia los valores en azul y ya esta.

::Q hacer despues de descargar la plantilla::

::Q hacer despues de descargar la plantilla::

Para poder instalar una de nuestras plantillas en tu blog solo tienes q seguir estos sencillos pasos, procura guardar una copia del codigo html de tu blog por si algo te sale mal.

1. Guarda el archivo.

2.Abrimos la carpeta donde se descarg el archivo. Y abrimos la carpeta.

3. Adentro de la carpeta hay un archivo en block de notas.

4.Copiamos el archivo.

5.Y lo pegamos donde estaba la carpeta q descargamos.

6.Asi debe de quedar.

7.Luego ve a Plantilla—-> Edicion HTML. Y le pones en examinar.

8.Te va a aparecer un cuadro como este, solo busca el archivo q tiene un icono de un block (NO EL Q ESTA EN LA CARPETA CON SIERRE), y le pones en abrir.

9.Luego solamente tendras q apretar en subir, y ya esta.

Si no te funciona no dudes en contactarme.

No olviden dejar sus comentarios

::"Leer mas" en tus posts::

::”Leer mas” en tus posts::

Este hack es facil de hacer pero hay q tener cuidado de no borrar ni una sola coma..

Primero nos vamos a:

Plantilla—->Edicion Html, buscamos </head> y justo antes colocamos el sig. codigo:

<style type=’text/css’>.ver_menu { display:block; }.ocultar_menu { display:none; }</style><script type=’text/JavaScript’>function desplegar(categoria){var menu = document.getElementById(categoria);if(menu.className == &quot;ver_menu”){menu.className = &quot;ocultar_menu”;}else{ menu.className = &quot;ver_menu”; } }</script>

Guardamos los cambios y nos dirigimos al lugar que deseamos añadir el despegable, se puede agregar en post y en sidebars. Editamos una entrada y añadimos lo siguiente:

<script type=’text/JavaScript’>

</script>

<div class=’UNIQUENAME’>

<a href=’javascript:desplegar(“UNIQUENAME”);’>

Leer más

</a><ul class=’ocultar_menu’ id=’UNIQUENAME’>En este espacio todo lo que deseamos ocultar,texto, imágenes, vídeos, un agradecimiento a Hacktime, etc..</ul>

</div>

Solo cambia los valores en azul y ya esta.

.
No olviden dejar sus comentarios