[+/-] Cambiar el texto del feed en Blogger

Si estan aqui casi estoy seguro que ya tienes un blog en Blogger y ya has visto este texto, o algo parecido:

Suscribirse a: Entradas (Atom)

La verdad es que el texto es muy genérico, y en veces no va con nuestros blogs. En esta entrada del blog, te explicaré como cambiar el texto del link anterior, así como agregarle imágenes o algo por el estilo.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[1] Para modificarlo, necesitas entrar en Edición de HTML y expandir las plantillas de artilugios.

[2] En el código de tu plantilla busca algo parecido a la primer línea de el siguiente código:

<b:includable id='feedLinksBody' var='links'>

[3] Si ya encontraste el código verás justamente esto:

<b:includable id='feedLinksBody' var='links'>
  <div class='feed-links'>
  <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
</b:includable>

[4] Para modificarlo o ya sea eliminarlo, simplemente tienes que cambiar los códigos en verde o en rojo:
<data:feedLinksMsg/>
Esta linea es lo mismo que Suscribirse a:
<data:f.name/> (<data:f.feedType/>)
Y esta otra es equivalente a Entradas (Atom)

[5] Espero que hasta el momento todo este claro. Ahora si ya lo modificaste a tu gusto le agregaremos unos estilos:

Suscribirse a: Entradas (Atom)

Los estilo tambien pueden ser de las siguentes maneras xD:

.feed-link {
padding:20px 40px 0 0;
color:#CF6100;
background:url(http://img444.imageshack.us/img444/7574/rsskw6.png) no-repeat top right;
text-decoration:none;
}

.feed-links {
border-left:4px double black;
border-right:4px double black;
background:#CEDDCE;
}

.feed-link {
padding:20px 40px 0 0;
color:#CF6100;
background:url(http://img444.imageshack.us/img444/7574/rsskw6.png) no-repeat top right;
text-decoration:none;
}

.feed-links {
border:3px double #DF7211;
background:#FDEFD2;
-moz-border-radius:0 25px;
}

.feed-link {
padding:20px 40px 0 0;
color:#CF6100;
background:url(http://img444.imageshack.us/img444/7574/rsskw6.png) no-repeat top right;
text-decoration:none;
}

.feed-links {
border:3px dotted #DF7211;
background:#FDEFD2;
-moz-border-radius:0 25px;
}

.feed-link {
padding:20px 40px 0 0;
color:#CF6100;
background:url(http://img444.imageshack.us/img444/7574/rsskw6.png) no-repeat top right;
text-decoration:none;
}

.feed-links {
border:3px solid #DF7211;
background:#FDEFD2;
-moz-border-radius:0 25px;
}

.feed-link {
padding:20px 40px 0 0;
color:#CF6100;
background:url(http://img444.imageshack.us/img444/7574/rsskw6.png) no-repeat top right;
text-decoration:none;
}

.feed-links {
border:3px dotted #DF7211;
background:#FDEFD2;
-moz-border-radius:25px 0;
}

.feed-link {
padding:20px 40px 0 0;
color:#CF6100;
background:url(http://img444.imageshack.us/img444/7574/rsskw6.png) no-repeat top right;
text-decoration:none;
}

.feed-links {
border:3px solid #DF7211;
background:#FDEFD2;
-moz-border-radius:15px 15px;
}

.feed-link {
padding:20px 40px 0 0;
color:#CF6100;
background:url(http://img444.imageshack.us/img444/7574/rsskw6.png) no-repeat top right;
text-decoration:none;
}

.feed-links {
text-align:center;
border:3px double #DF7211;
background:#FDEFD2;
-moz-border-radius:0 25px;
}

/!\ En esta entrada se asume que tienes conocimientos básicos de colores en RGB o Hexadecimal. Si no los tienes aún, revisa esta entrada: Colores en RGB o Hexadecimal.

[+/-] Complementos básicos para Firefox.

Hoy en día el navegador web, cada vez se va haciendo mas protagonista en una PC, que el mismo Sistema Operativo. Ya que al encender la Computadora, el usuario a lo primero que se inclina es a abrir el Navegador Web y claro siempre va a requerir y necesitar un buen navegador web.

Y para eso que mejor que el Mozilla Firefox, un navegador de código abierto, es decir que es gratis a cualquier usuario en general, además de que es totalmente personalizable, pues cuenta con una innumerable gama de complementos desarrollados en su mayoría por sus usuarios voluntarios.

Y como son tantos, debe ser dificil saber cuales valen la pena instalar, pero aquí te tenemos una corta pero interesante colección de varios de ellos además de que son de gran utilidad:

ToolBar Buttons

Un complemento de Firefox para añadir botones a la barra de Herramientas y no tener que entrar en los menús y buscar la herramienta.

IE Tab

Es sin duda una gran herramienta para desarrolladores web, ya que te permite comprobar fácilmente como se muestra tu página en IE con un solo clic y a continuación cambiar de nuevo a Firefox.

DownLoad Helper

La manera fácil de descargar y convertir vídeos de cientes de sitios similares a YouTube.
También funciona para audio y galerías de imágenes.

AdBlock Plus!

¿Alguna vez te han molestado todos esos anuncios e imágenes en internet que, normalmente, hacen que tarde en cargar más el resto de la página? InstalaAdblock Plus ahora y olvídate de ello.

ColorZilla

Con ColorZilla puedes conseguir un color de la lectura desde cualquier punto en su navegador, ajustar rápidamente este color y pegarlo en otro programa. Puede acercarse la página que está viendo y medir distancias entre dos puntos cualesquiera de la página. El built-in del navegador permite elegir la paleta de colores de color predefinidas y guardar los juegos más utilizados en la costumbre paletas de colores. DOM espionaje características permiten obtener información acerca de diversos elementos DOM de forma rápida y sencilla. Y aún hay más ...

Imacros para Firefox

Si usted adora el navegador Firefox, pero está cansado de las tareas repetitivas como visitar los mismos sitios todos los días, completar formularios, y tener que recordar contraseñas, entonces iMacros para Firefox es la solución de sus sueños! iMacros fue diseñado para automatizar las tareas más repetitivas en la web. Si hay alguna actividad que tiene que hacer frecuentemente, sólo recuérdesela a iMacros. ¡La próxima vez que necesite hacerlo, el macro lo hará simplemente al apretar un botón! Con iMacros, puedes completar de forma rápida y fácil los formularios de la web, recordar contraseñas, descargar información de otros sitios, investigar la Web (extraer información de varios sitios), y más. Puede tener los macros en su computadora para su propio uso, o compartirlo con otros incluyéndolo en su propia página de inicio, blog, la Intranet de su empresa o cualquier otro servicio. ¡Los límites los pone únicamente su imaginación! Haga lo que haga con Firefox, iMacros puede automatizarlo.

Yahoo! Mail Notifier.

Yahoo Mail Notifier es muy básico; inserta un pequeño icono de correo en tu barra de estatus y te indica cuántos mensajes nuevos hay en tu cuenta de correo de Yahoo. Al hacer clic en el icono, accedes al correo. También puedes configurarlo para que aparezca una ventana emergente cada vez que te llegue un mensaje.

Gmail Manager.

Gmail lo mismo que el de Yahoo! y más. Si detienes el puntero de ratón sobre la aplicación, verás el número total de nuevos mensajes, cuántos mensajes de spam has recibido y la cantidad de espacio que ocupan tus mensajes recibidos. Por debajo, aparece una lista de tus diez mensajes más recientes, que muestra el remitente, el asunto y la primera línea del cuerpo del correo (puedes desconfigurar esta opción). Soporta múltiples cuentas de Gmail.

Firefox ShowCase

Showcase proporciona un nuevo modo de organizar las pestañas y ventanas de Firefox, mostrándolas como imágenes en miniatura en una ventana, pestaña, o el panel lateral. Incluye una barra de búsqueda para poder filtrar las miniaturas, y opciones para seleccionar las miniaturas del mismo modo en el que selecciona archivos en su sistema.

CoolPreviews

Esta interesante extensión te permite previsualizar una página web antes de hacer clic. Tras instalar Cooliris Previews, un pequeño icono azul aparecerá cerca de cualquier link en el que sitúes tu ratón. Desliza el ratón por el icono y aparecerá una ventana emegente que muestra la página. La vista previa de la página desaparece cuando el puntero deja de estar situado sobre el icono. En la parte superior de la ventana emergente hay iconos adicionales que te dejan bloquear la ventana abierta, abrir la previsualización en una nueva pestaña, mandarla por e-mail a un amigo, etc.

Si quieres aportar, alguno que te halla dejado un buen sabor de boca, ¿por que guardartelo?, compartelo!!

[+/-] Buscador de texto Interno

Hace tiempo publiqué como añadir un buscador interno, que busca en todas las entradas del blog. Pero gracias a varios comentarios pidiendo un buscador que solo busque texto en una misma página, aquí esta la forma en la cual podrán añadir un buscador de texto.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

Solamente necesitas alojar el código script buscar.js que viene aqui en este Zip donde prefieras.

O simplemente puedes usar la siguiente URL, del mismo archivo. Pero te limitarás a usarlo hasta que el autor lo borre:

http://ihgvgw.blu.livefilestore.com/y1p4n9tmyIDlySQ1r_GQbyPOIB1i7707uwU4r8k0cbCuNL9OrDIQJGao6EY3qQ9BvCVLkF5tBL_HSlgj9qzhbtAPw/buscar.js

[1]Despues te diriges a Edición HTML, y sin expandir plantillas de artilugios y ahí agregas después de <head> y antes de </head> el siguiente código

:

<script src='URL-buscar.js' language='JavaScript' type='text/javascript'></script>

[2]Una vez instalado, necesitas implementarlo. Y donde quieras ubicar el buscador de texto, ya sea un gadget o en la plantilla, deberás colocar el siguiente código:

<div id="buscar">
<input type="text" id="searchInput" value="Buscar"><button id="performSearch">Buscar palabras</button>
</div>

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

[+/-] Cambiar el color de la selección del texto

A veces queremos cambiar el color de fondo de la selección del texto, ya que por default viene un color azulado que en algunas ocaciones no se ve. O simplemente por personalizar nuestra página web o blog, podemos utilizar el siguiente código CSS:

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Como editar el código HTML de nuestra plantilla.

[1] Simplemente en la plantilla de el blog, antes de ]]></b:skin> o antes de </style> tienes que agregar:

::selection{ 
background:#FFFFFF;
color:#FFFFFF;
}
::-moz-selection{
background:#FFFFFF;
color:#FFFFFF;
}

En la propiedad:
background.- En esta se agrega el color en Inglés o en Hexadecimal.
color.- En esta se agrega también el color en Inglés o en Hexadecimal.

/!\ En esta entrada se asume que tienes conocimientos básicos de colores en RGB o Hexadecimal. Si no los tienes aún, revisa esta entrada: Colores en RGB o Hexadecimal.

Con esas lineas de CSS, tenderemos una selección de texto bastante presonalizada, pero si requieres un poco mas de personalización, puedes modificarlo de la siguiente manera:

OBJETO::selection{ 
background:#FFFFFF;
color:#FFFFFF;
}
OBJETO::-moz-selection{
background:#FFFFFF;
color:#FFFFFF;
}

Objeto hace referencia a una etiqueta HTML, una clase o una ID, las cuales se definen en un objeto determinado, como puede ser de la siguiente manera:

DIV,CLASE o ID::selection{ 
background:#FFFFFF;
color:#FFFFFF;
}
DIV,CLASE o ID::-moz-selection{
background:#FFFFFF;
color:#FFFFFF;
}
<DIV class='CLASE' id='ID'>Seleccion de diferente color</div>

De manera que si solo escribes DIV, estarás haciendo referencia a todos los <div> que tengas en la página.

Y si colocaras CLASE, estarías haciendo referencia a todos los objetos con esa misma clase(<div class='CLASE'> o <Span class='CLASE'>).

Pero si escribes solo ID, estarás haciendo referencia a un único elemento, que debe tener esa ID(<div id='ID'> o <span id='ID'>).

[+/-] Texto que crece solo

Se podría utilizar para publicidad o para cualquier otra razón que requiera una atención especial, lo sencillo de esto no es que aumente por si solo de tamaño si no que colocarlo es aún mas.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[1]Solo tienes que dirigirte a Edición de HTML, y colocar despues de <head> y antes de </head> el siguiente script:

<script language="JavaScript"> 
var banZoom = null 
function creceLetra() 
{ 
var obj = banZoom 
var tma 
tma = parseInt(obj.style.fontSize) 
window.status = obj.style.fontSize 
if (tma<obj.maxTam) 
{ 
obj.style.fontSize = tma + 1
setTimeout("creceLetra("+obj.maxTam+")",20) 
} 
else 
setTimeout("resetear()",500) 

} 
function resetear(mn, mx, rapidez, idBan) 
{ 
if (banZoom == null) 
{ 
banZoom = document.getElementById(idBan) 
banZoom.maxTam = mx 
banZoom.minTam = mn 
banZoom.rapidez = rapidez 
} 
banZoom.style.fontSize = banZoom.minTam 
setTimeout("creceLetra()",rapidez) 
} 
</script>

[2] Y luego de instalarlo, donde quieras mostrarlo, ya sea un gadget o en la plantilla, necesitarás agregar el siguiente código para mostrarlo:

<div id="letras" style="text-align:center;position:absolute; font-size:10px; height:56px;width:100%; background-color: #CCFFCC;border: 1px solid #000000;">AQUI EL TEXTO QUE AUMENTA SOLO</div>
<script>resetear(1, 48, 10, 'letras')</script>

[Modificaciones]

text-align:center
Alineacion del Texto:left,center,left,justify.

font-size:10px
Tamaño del texto inicial:big middle o tamaño en pixéles

height:56px
Alto del div, o contenedor: pixeles o porcentaje

width:100%
Ancho del div, o contenedor: pixeles o porcentaje

background-color: #CCFFCC
Fondo del div, o contenedor: Colores en RGB o Hexadecimal.

border: 1px solid #000000
1px=ancho del borde
#000000=color
solid= tipo de borde(solid,dotted,double,dashed)
Borde del div, o contenedor: Colores en RGB o Hexadecimal.

TEXTO QUE AUMENTA SOLO
Este se reemplaza por el que requieras.

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

[+/-] Colores en Hexadecimal o RGB

Los colores en RGB(RVA).

Los colores en RGB(RVA) hacen referencia a la intensidad del color deseado, es decir que según la intensidad del rojo, verde, o azul en un color, va a definir el mismo.

En un ejemplo sencillo, para definir en un texto que el color de la letra sea blanco, en RGB se escribiría:
color:(255,255,255)

Donde:

color:(RRR,GGG,BBB)
R=Red ó Rojo.
G=Green ó Verde.
B=Blue ó Azul.

Los números que hacen la referencia al color en RGB llegan a 255, que es el máximo y el mínimo es de 0. Es decir que la referencia al color del rojo, verde y azul en el color negro en los tres casos es cero(0) y se escribiría:
color:(0,0,0)

Los colores mas comunes definidos en RGB son los siguientes:
(255,0,0) Rojo
(0,255,0) Verde
(0,0,255) Azul
(255,255,0) Amarillo
(255,0,255) Magneta

Los colores en Hexadecimal ó HTML.

Los colores en Hexadecimal al igual que los colores en RGB, se definen casi de la misma manera solo que en los colores Hexadecimal, la máxima cifra es de 256, que da a la multiplicación de 16*16.

En el mismo ejemplo del color blanco en el texto, se definiría de esta manera:
color:#FFFFFF

Donde:

color:#RRGGBB;
R=Red ó Rojo.
G=Green ó Verde.
B=Blue ó Azul.

Las cifras van de 0-9 y de ahí sigue de la A-F, para definir el 10-16. Para saber el código RGB de un Hexadecimal se multiplican el #[R*R][G*G][B*B], es decir:

El rojo sería:
#FF0000=(255,0,0)
#00FF00 Verde
#0000FF Azul
#FFFF00 Amarillo
#FF00FF Magneta

El siguiente conversor ayudará muchísimo para lograr convertir de uno a otro:

Conversor RGB<->HTML

Pero si quieres seleccionar el color de una paleta con todos los colores utiliza esta otra herramienta:

[+/-] Enlace aleatorio

Si tienes demasiados enlaces en tu web o blog, puedes usar este script, para que se vea menos abultada tu página, es sencillo instalarlo solamente tienes que dirigirte a la parte de Edición HTML, sin expandir las plantillas de artilugios, de blogger, en el blog que prefieras.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[1] Ya en el panel de Edicion HTML, copia y pega el siguiente código, antes de </head>:

<script>
var direcciones = new Array("URL_1", "URL_2", "URL_3", "URL_4")
function enlaceAleatorio(){
aleat = Math.random() * direcciones.length
aleat = Math.floor(aleat)
window.location=direcciones[aleat]
}
</script>

Cada dirección tiene que estar separada por una coma(,) y cada una debe estar entre comillas dobles("URL"), pueden ser los enlaces que quieras.

[2] Donde prefieras que este el enlace aleatorio, debes ingresar el siguiente código:

<a href="javascript:enlaceAleatorio()">Aqui el texto</a>

En el texto color rojo, puedes cambiarlo por el texto que prefieras.

[+/-] Subir Imágenes en Picasa o en Blogger

Este es un servicio exclusivo para los usuarios de picasa aunque para nosotros los de Blogger usuarios es demaisado facil subirlas con el editor de entradas de blogger:

[1] Solo presionamos el boton que tiene una imagen y nos abrirá una ventana como esta:

[2] Luego elegimos cual imagen subir desde nuestro PC con el boton de examinar. Despues elegir como queremos que la imagen se muestre en la pagina web y una vez configurada la imagen presionamos el boton de Subir Imagen:

[3] Y cuando la imagen este alojada en el servidor de blogger te avisará de una forma amigable, aqui solo es necesario hacer click en finalizado:

[+/-] Modificar solo los gadgets de la barra lateral

Esta vez explicaré como modificar los gadgets de la barra lateral sin afectar los demás, como la cabecera o los post. Esto es relativamente sencillo solo tienes que entrar a Edicion HTML, de tu blog, sin expandir las plantillas de artilugios.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Como editar el código HTML de nuestra plantilla.

Ahora, antes de la eqiqueta ]]></b:skin>, debes agregar estas lineas de estilo:

.sidebar .widget {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background:black; 
}

Estas lineas de estilo le darán un fondo negro a tus widgets de la derecha, y les redondeará los bordes.

Estas otras lineas de estilo son para editar el titulo y el contenido los widgets de la sidebar:

/*Modificar los titulos de todos los widgets*/
.sidebar .widget .title {
  font-family:georgia;
}

/*modificar los links del titulo de todos los widgets*/
.sidebar .widget h2 a{
  color:green;
  background:(url_imagen) repeat-y top right #ff0000;
}

/*Modificar el contenido de los widgets de seguidores*/
.sidebar .Followers{
  color:green;
  background:black;
}

/*Modificar el titulo de los widgets listas de link en la sidebar*/
.sidebar .LinkList .title {
  background:black;
  text-transform:lowercase;
}

/*Modificar el titulo de los widgets de seguidores en la sidebar*/
.sidebar .Followers .title {
  background:black;
  text-transform:lowercase;
}

/*modificar los links del titulo los widgets HTML en la sidebar*/
.sidebar .html h2 a{
  color:green;
  background:(url_imagen) repeat-y top right #ff0000;
}

/*modificar el contenido de los widgets HTML en la sidebar*/
.sidebar .html .widget-content{
  color:green;
  text-transform:uppercase;
}

/*modificar el contenido de todos los widgets*/
.sidebar .widget .widget-content {
  color:green;
  text-transform:uppercase;
}

/*modificar los links del contenido de todos los widgets*/
.sidebar .widget .widget-content a{
  color:green;
}

Los efectos mas comunes o mas faciles y atractivos en CSS, son los siguientes:

background:(url de la imagen) repetir alineacion alineacion_2 color;

Las propiedades del background:
Si tienes un background con imagen

url de la imagen: Aqui va la url de tu imagen, esto es opcional
alineacion: Aqui esta la alineacion vertical de la imagen de fondo top,bottom,center.
alineacion_2: Aqui esta la alineacion horizontal de la imagen de fondo left,right,center.
repetir: repeat-x(repetir verticalmente),repeat-y(repetir horizontalmente),no-repeat(no repetir).
pero tambien puedes agregar solamente un color, o agregar un color a donde la imagen no alcanza
color:white, black, blue. o un color hexadecimal: #FF0000,#FFFF00.

color:color del texto;
text-transform:uppercase o lowercase;

Propiedades del text-transform:

uppercase: convierte a mayusculas el texto
lowercase: convierte a minusculas el texto

overflow:yes,no o auto;

Propiedades de overflow:

yes: Agrega barras de dezplasamiento al gadget
no: si tiene, quita las barras de dezplasamiento al gadget
auto: Si rebasa el ancho o el largo del widget agrega las barras si no, entonces no hace nada.

/!\ Puedes agregar un toque de originalidad agregandole a tus widgets transparencia.

/!\ Si quieres editar un widget y no esta en la sidebar solo elimina el ".sidebar".

[+/-] Transparencia en objetos (Opacidad)

Esto no es un truco ni demás, solo es un atributo de CSS que hace a cualquier objeto de una página web, disminuir la opacidad y hacer que se vean un poco transparentes, si no me estas entendiendo puedes hacer clic en:

Mostrar Ejemplo

[cerrar] /!\Trata de seleccionar algo!!!

[1] Para disminuir la opacidad de un objeto solo le agregaremos estas lineas de estilo:

Leer la entrada completa