Crea Encuestas en tu Blog

Aquí de nuevo otro truco el cual uso en Exiliados del Olimpo

Básicamente es una forma de crear una “Encuesta”, la cual pueden editar por completo ( colores y opciones ), hablo de Poll4You simplemente tienen que seguir unos simples pasos:

1. Poner la pregunta y seleccionar el numero de respuestas
2. Escribir las respuestas probables
3. Seleccionar los colores y poner su email ( para dar resultados )
4. Insertar el código en un Widget nuevo ( elemento de su blog, por medio de edición de Plantilla )

El código el cual tienen que insertar en el Widget debe de verse más o menos así:

<script src="http://www.poll4you.com/showpoll.php?id=3552" type="text/javascript"></script>
<!-- End Poll4You.com Html Code -->


Aquí un ejemplo de mi encuesta en Exiliados del Olimpo

Eliminar titulo en el nuevo Blogger

Esta es una forma muy sencilla de eliminar el titulo de nuestro blog:

Nos dirigimos a:

Plantilla–Edicion HTML–Marcamos la casilla expandir plantilla de artilugios

Una vez ahí debemos buscar esta parte del código:

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’PruebaBlog (cabecera)’
type=’Header’>
<b:includable id=’main’>
<div class=’titlewrapper’>
<h1 class=’title’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<data:title/>
<b:else/>
<a expr:href=’data:blog.homepageUrl’><data:title/></a>
</b:if>
</h1>
</div>

Eliminaremos las etiquetas <data:title/> guardamos los cambios y listo.

Sustraido sigilosamente de Gem@ que a su vez sustrajo de Ayuda para el Blog

Crea tu propio chat en tu blogger

De nuevo desde Exiliados del Olimpo les traigo un nuevo truco, en esta ocación algo que les permitira tener más interacción con sus usarios.

Estoes, un chat el cual pueden editar en tamaño y fondo, para ponerlo en su blog ( muy similar al MSN ), simplemente cualquiera puede entrar y es muy bueno debido a su poco tiempo de carga y su opcion de guardar mensajes ( para poder navegar y chatear ).

Pueden ver un ejemplo en : http://blog.exolimpo.com

Para conseguir uno simplemente necesitan entrar a http://www.xatech.com/web_gear/chat.php#top

Posteriormente elegir un fondo ( a la izquierda ) y hacer click en Update & Get Code, obtendran un código SIMILAR a este:

<embed src=http://www.xatech.com/web_gear/chat/chat.swf quality=high bgcolor=#000000 width=540 height=405 name=chat FlashVars="id=6345045" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.xatech.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://www.xatech.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://www.xatech.com/web_gear/chat/go_large.php?id=6345045">Go Large!</a></small><br>
El cual pueden poner en cualquier widget o Post

Darle Estilo a tu Buscador

¿Alguna vez han visto una caja de texto con colores / bordes o fondo personalizado?, si su respuesta es no simplemente cheque mi blog: http://blog.exolimpo.com fijense, en el menú izquierdo, mi buscador tiene color diferente.

Así que les enseñare como hacerlo, es bastante simple, solo se necesita un pequeño código de CSS:

.formas {
width:100px; /* Largo Horizontal del cuadro */
background-color: #FFB96E; /* Color de fondo */
color: #975000; /* Color de la letra */
font-weight: bold; /* Tipo de fuente, Negrita(bold) y Normal */
font-family: Verdana, Arial, Helvetica, sans-serif; /* Fuente */
font-size: 10px; /* Tamaño de la fuente */
border: 3px 1px 1px 2px; /* Grueso del borde, en orden: ^ > v

Si no sabes HEX colors ( para los colores del fondo, letra y Bordes ) checa este sitio web:
http://www.hitmill.com/html/rgbcolorvalues.html

Pueden usar esta modificación para dejar su buscador con mucho estilo:
Ejemplo: http://blog.exolimpo.com

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

Coloca una imagen estatica en la esquina de tu blog

Este truco lo puedes observar en mi blog, en la esquina inferior derecha, para realizarlo solo hay que hacer lo siguiente:

Añade esto abajo de style id=‘page-skin-1′ type=‘text/css’> o antes de /style

.estatica{
background-image: url(ruta/imagen.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}

Luego añade esta clase a la etiqueta body para que quede así.

body class="estatica>

Nota: Todo esto lo haces en Plantilla->Edicion HTML (no olvides guardar los cambios).

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.

Eliminar contorno a los enlaces (outline)

¿Has visto alguna vez ese bordecito a puntos alrededor de un enlace?

Suele aparecer cuando el enlace tiene el foco. ¿Si?, Bueno, de todas formas pongo una captura:

“Bien, pues esa linea a puntitos no es ni padding, ni margin ni border, (realmente no pertenece al modelo de caja de CSS). Pues resulta que esto se llama contorno y se controla mediante la propiedad outline.”

Como explican el Plan Seldon, y que a su vez lo explican en Vagabundia, la propiedad “outline” es la que le da, ese molestoso y feo contorno a los enlaces.

Como dice JMiur:

Estos contornos, se crean automáticamente sobre cualquier vínculo (etiqueta A), sobre cualquier elemento que pertenezca a un formulario y sobre las imágenes que se utilicen como mapas (etiqueta MAP), en teoría, “para destacarlos sobre el resto cuando tienen el foco” (cuando están activos), en la realidad, sólo sirven para molestarme.

Ahora vamos a desaparecer ese maldito contorno:

Nos dirigimos a:

Plantilla–Edición de HTML

Y antes de &lt;/b:skin&gt; colocamos el siguiente CSS:

a {
outline:none;
}

Guardamos los cambios y listo, y así hemos eliminado de nuestro territorio (blog) a ese contorno que tanto hemos amado por siempre; espero haya sido de ayuda

Banner rotativo que se actualiza con cada visita

Bien, he vuelto a publicar luego de hace más 7 días -soy Nachio el colaborador de Leonel, no él- y aquí estoy de nuevo para ofrecerles un truco agradable.

Este truco o hack, implementa un Script en el que el banner o header de nuestro blog, cambiará o variará a medida que entren al blog o lo actualizen. Esto dará un aspecto creativo y “renovado”.

Para eso nos dirigimos a Plantilla o Diseño –> Edición HTML –> Expandir Plantilla de Artilugios y apretamos “CTRL + F” y ponemos una frase o palabra de la siguiente parte del código..

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’El título de nuestro blog(Header)’ type=’Header’/>
</b:section>
</div>

Una vez localizado , seleccionamos y eliminamos esa parte, guardamos cambios y confirmamos que queremos eliminar el artilugio.

Luego nos vamos a “Elementos de Páginas”, seleccionamos “Añadir elemento ” y seleccionamos la opción “HTML/JAVASCRIPT” y añadimos lo siguiente a la altura de título ya eliminado

<script type=”text/javascript”>
var banner = new Array();

banner[banner.length] = “http://nuestraimagen.jpg“;
banner[banner.length] = “http://nuestraimagen.jpg“;
banner[banner.length] = “http://nuestraimagen.jpg“;
banner[banner.length] = “http://nuestraimagen.jpg“;
banner[banner.length] = “http://nuestraimagen.jpg“;

var random = Math.round(banner.length*Math.random());
document.write(‘<img style=”border: 0;” src=”‘ + banner[random] + ‘”>’);
</script>

Nota: Recuerda que puedes poner las imagenes que quieras que se actualizen con cada visita cuantas veces quieras, unicamente repite el código ” banner[banner.length] = “http://nuestraimagen.jpg“; ” debajo del anterior.

Espero que le sirva de utilidad, y no dejen de visitar mi blog de Gran Hermano Argentino
¡Saludos!

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.