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

Abrir links externos en una nueva pagina

El siguiente script lo sustrage sigilosamente de Recursos Blog & Web asi que no se dará cuenta, y con este script podemos abrir todos los enlaces externos en una nueva página, ahorrando nos el trabajo de la inclusión en cada uno de ellos de “target=_blank”.

Y nos ha hecho el favor de adaptar el script para que funcione en blogger

He aquí los pasos para instalar el script:

Nos dirigimos a:

Plantilla–Edicion de HTML

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.

ACTUALIZACION:

En caso de que el código os de problema, Convertir HTML a Texto plano y seguimos los pasos indicados.

::Imagenes con subtitulo::

::Imagenes con subtitulo::

Aqui va el subtitulo de tu imagen

Cuando subes una imagen atravez del upload de blogger nos aparece un codigo mas o menos asi en edicion de html:.

<div style=”text-align: center;”><a onblur=”try {parent.deselectBloggerImageGracefully();} catch(e) {}” href=”http://bp3.blogger.com/_avcdxpb9yUs/RcMXPQ1lRrI/AAAAAAAAAJg/o2k-vhr9xKs/s1600-h/549474.jpg”><img style=”margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;” src=”http://bp3.blogger.com/_avcdxpb9yUs/RcMXPQ1lRrI/AAAAAAAAAJg/o2k-vhr9xKs/s400/549474.jpg” alt=”eneko” id=”BLOGGER_PHOTO_ID_5026887160060790450″ border=”0″ />Aqui va el subtitulo de tu imagen</a></div>

Solo escribe el subtitulo de tu imagen justo antes de </a> y eso es todo, solo centra el texto en redactar y ya esta.

No olviden dejar sus comentarios

Aumentar la popularidad de tu blog

Este artículo debería haberse publicado hace 2 dias pero estuve enfermo y por eso les pido disculpas.

Todos los bloggers deseamos tener una mayor influencia en la web. Por ello reuno aquí una serie de consejos para conseguirlo :

- Pon una sección de Links: llamada Blogroll en la que propondrás intercambios de enlaces a otros bloggers.
- Publica en otros Blogs: la gente que te lea, si le gustan tus artículos, visitaran tu blog, en mi caso TecnoRaro.
- Date de alta en directorios de Blogs: así subiras tu Pagerank.
- Incluye enlaces a marcadores: incluir un enlace del post a Meneame, Del.icio.us, Technorathi, … , nunca viene mal.

Si tienen alguna duda dejen un comentario.

::Ultimos comentarios en la sidebar::

::Ultimos comentarios en la sidebar::

.

Si quieres q los ultimos comentarios aparescan en tu side bar solo tienes q hacer lo sig:

Vas a:

.

Plantilla—-> Agregar elemento a la pagina—->Feed, y hay agregas la sig direccion:

http://NOMBRE DE TU BLOG.blogspot.com/feeds/comments/default

Solo cambia donde dice NOMBRE DE TU BLOG y ya esta solo escoge el numero de comentarios q quieras q aparescan, solo guarda y listo.

No olviden dejar sus comentarios

::¿Como ocultar el titulo en Blogger Beta?::

::¿Como ocultar el titulo en Blogger Beta?::

.

Este es un hack muy facil de aplicar. Lo unico q se tiene q hacer es lo sig:

.

Nos dirigimos a:

.

Plantilla—>Edicion de html

.

2. Buscamos el siguiente codigo:

.

#header {

margin: 5px;

//border: 1px solid $bordercolor;

text-align: center;

}

.

Y lo cambiamos por este:

.

#header {

margin: 5px;

//border: 1px solid $bordercolor;

text-align: center;

display: none;

}

.

Si se dan cuanta lo unico q hicimos fue agregar al final display: none; ese es el truco.

.

No olviden dejar sus comentarios

Lista de blogs Amigos

Lista de amigos YAJU

Ahora los que les propongo es que realicemos entre todos un Intercambio de Enlaces.

Ustedes nos agregan en su grupo de blogs amigos (o como lo quieran llamar), poner algun banner de este post (si agregan un banner tiene derecho a q nosostros pongamos una imagen y no solo su nombre, como enlaze a su blog), y luego dejan su link, y nosotros los agregamos a nuestra lista de amigos en movimiento. Asi todos salimos ganando.

.

Deja los siguientes datos en los comentarios:

.

Nombre del blog (o url de una imagen en caso de q hayas elegino poner un banner nuestro en tu blog):……………………

URL de tu web:……………………………………

::Obtener la URL de una imagen::

::Obtener la URL de una imagen::

Este no es un hack pero es uno de los fundamentos basicos q muchas personas no saben.

Bueno, para obtener la URL de una imagen en internet:

Primero se tiene q dar con el boton derecho sobre la imagen.

Luego damos click en “Propiedades”

Y donde dice “direccion URL copiamos todo el codigo y ya esta, ese el el codigo URL de la imagen.

Y eso es todo.

No olviden dejar sus comentarios

::Poner una imagen de fondo en tus entradas::

::Poner una imagen de fondo en tus entradas::

.

¿Quieres hacer que las entradas de tu blog se diferencien a la del cualquier otro blog?. Pues os traigo la solución…Vamos a ver como insertar una imagen de fondo en nuestros posts (entradas del blog).

.

Nos dirigimos a:

.

Plantilla–Edicion HTMLBuscamos el siguiente código:

.

.post-body {

clear: both;

padding-top: 10px;

}

.

Y lo cambiamos por el siguiente:

.

.post-body {

background: url(URL DE LA IMAGEN) top left;

clear: both;

padding-top: 10px;

}

.

Eso es todo, si no sabes como obtener la url de una imagen, ve a esta entrada.

.

No olviden dejar sus comentarios

Imagen de fondo en los posts

¿Quieres hacer que las entradas de tu blog se diferencien a la del cualquier otro blog?. Pues os traigo la solución…

Vamos a ver como insertar una imagen de fondo en nuestros posts (entradas del blog).

Nos dirigimos a Plantilla–Edicion HTML

Buscamos el siguiente código:

.post-body {
clear: both;
padding-top: 10px;
}

Y lo cambiamos por el siguiente:

.post-body {
background: url(URL DE LA IMAGEN) top left;
clear: both;
padding-top: 10px;

Guardamos los cambios y listo, ahora pasemos a ver el glosario de términos:

Ruta
“url()” es la ubicación de la imagen que deseamos tener como fondo entre los paréntesis.

Ubicación
“top” y “left” dan la ubicación a la imagen de fondo y puede tomar los valores: top, right, bottom, left y center (superior, derecha, fondo, izquierda, centro).

Frecuencia
“no-repeat” nos indica que no se repetirá la imagen, esta propiedad también puede tener los valores:
repeat – Este es el valor por default, sino especificas nada, tu imagen de fondo siempre se repetirá.
repeat-x – repite el fondo sólo de forma horizontal.
repeat-y – repite el fondo sólo de forma vertical.
no-repeat – no repite el fondo, este solo tendrá el tamaño que la imagen tenga.

Poner como valor Y el porcentaje seria en vertical, pero hay que tener en cuenta que si colocamos la Y hay que cambiar la palabra “bottom” por izquierda o derecha.

Espero os sirva.