miércoles, 29 de abril de 2009

Ocultar-eliminar el perfil (About me)

Me preguntaban cómo hacer para que el perfil quede oculto en la sidebar, pero sin quitar la opción de poder verlo cuando dejamos un comentarios en otro blog o en el nuestro es decir, ya no se mostrará esto:



quedando invisible en la sidebar:



pero cuando dejemos un comentarios se verá esto y también la imagen en los comentarios:

Para hacerlo, hay dos formar dependiendo si la plantilla es clásica o no.

PLANTILLA CLÁSICA

Para eliminar el perfil bastará con buscar el siguiente código en tu plantilla y borrar lo resaltado:

<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">
<!-- Begin #profile-container -->
<$BlogMemberProfile$>
<!-- End #profile -->


PLANTILLA DE BLOGGER BETA

Si bien hay varias formas de ocultar el perfil, aquí les enseñaré la que yo usé. Explicando un poco, la solución sería ligar el widget del perfil a una entrada que no usemos. Parece complicado, pero es algo muy sencillo de hacer.

♠ Lo primero que tenemos que hacer es crear una entrada que siempre estará guardada como borrador, una entrada "ficticia". La publicamos y copiamos la URL de la entrada.
♠ Luego de publicada esta entrada, vamos a Diseño/ Edición de HTML y expandir artilugios.
♠ En la plantilla, localizamos el widget del perfil (lo más fácil es hacerlo por su título , si lo tiene). En la imagen del "antes" pueden ver que mi widget se llama, "Datos personales", en tu plantilla debes de buscar el título que le pusiste al perfil:

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'>
<b:includable id='main'>


♠ Debajo de <b:includable id='main'> añades <b:if cond='data:blog.url == "URL_PAGINA_DE_ENTRADA"'> de manera que el código quede así:

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL_DE_LA_ENTRADA"'>


♠ Después deberás de seguir buscando hacia abajo hasta que veas el primer </b:includable> y antes de éste, pegas el siguiente código: </b:if>

♠ Damos click en guardar plantilla. Luego, guardamos como borrador nuestra entrada ficticia y ahí se quedará, ocultando nuestro perfil. Si publicamos esta entrada, el perfil sólo se mostrará en esa entrada en particular porque le hemos ligado el widget del perfil.

Espero que sea útil a las personas que preguntaban sobre una solución para este caso.

lunes, 27 de abril de 2009

Iconfu » crear íconos online

Con Iconfu podrás crear tus íconos online. Podrás dibujar tus íconos y retocarlos con la variedad de herramientas que ofrece :colores, esquinas redondeadas, formas, sombras,etc

Además, si deseas usar íconos ya hechos por otrso, podrás hacerlo ya que Iconfu alberga una gran librería de íconos compartidos. Y lo mejor es que si deseas, podrás retocarlos a tu gusto.

domingo, 26 de abril de 2009

Títulos de la sidebar personalizados III: fondos con imágenes distintas

Hace un tiempo habíamos visto cómo personalizar los títulos de la sidebar con colores y bordes y luego con imágenes e íconos. Ahora vamos a ver otra forma de personalizar los títulos de nuestra sidebar . Y esta tercera forma viene a raíz de algunas preuntas, como la que hizo G:
Aprendí mucho con este tutorial, pero, cómo hago para poner imágenes diferentes para cada título de la sidebar? ¿es posible?
La respuesta es afirmativa y ahora vamos a ver cómo hacerlo.

♠ Lo primero que haremos será ingresar a nuestro blog y de ahí a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Luego, buscamos el id del widget al que queremos poner un fondo a su título. Será sencillo de localizarlo si es que tiene un nombre. Por ejemplo, si mi gadget se llama "Datos personales" busco este nombre. Cuando lo encuentre se verá así:

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'>
Entonces, el id de este gadget es lo que está en negrita (Profile1) no incluyendo las comillas.

♠ Una vez que tengamos los id del gadget o gadgets cuyos títulos querramos cambiar de fondo, buscamos lo siguiente.Si nuestra plantilla es la mínima buscamos:

/* Sidebar Content
-------------------------------*/

Si usamos la plantilla rounders, buscamos:

/* Sidebar Boxes
-------------------------------*/

♠ Debajo de éste pegamos lo siguiente:

#Profile1 h2 {
background: url(AQUÍ-URL-IMAGEN-FONDO) left top;
}
Si queremos agregar otra imagen de fondo al título de otro gadget bastará con buscar su id y colocar un código igual al anterior solo que borraremos Profile1 y pondremos el id del otro gadget.

Si queremos colocar un ícono en lugar de un fondo, cambiaremos el código anterior del background por este otro: background: #FFFF99 url(aquí-imagen) no-repeat right; y seguiremos los otros pasos.

El resultado será el siguiente:

sábado, 25 de abril de 2009

Últimos comentarios con fecha y título del post

Hace un tiempo vimos cómo incluir una lista de últimos comentarios en nuestra sidebar de forma sencilla. En aquella ocasión, les dije que con ésa forma, sólo podíamos incluir cinco comentarios y que en futuros post les enseñaría otras formas de incluir más de cinco comentarios.
El tiempo pasó y olvidé de hacerlo, pero gracias a un comentario de Shirubia volví a recordarlo.

Si bien es cierto que hay varios scripts para lograr ésto, hoy vamos a ver uno que nos permitirá mostrar la fecha del comentarios y el título del post del que procede el mismo.

Bien, sin más preámbulos, empecemos.

♠ Lo primero que debemos hacer es ir a Diseño/ Elementos de la página y Añadir un gadget.
♠ Hacemos click en "HTML/Javascript" y pegamos el siguiente script:

<script type="text/javascript">
function showrecentcomments(json) {
for(var i=0; i < a_rc; i++) {
var b_rc=json.feed.entry[i];var c_rc;
if(i==json.feed.entry.length)break;
for(var k=0; k < b_rc.link.length; k++) {
if(b_rc.link[k].rel=='alternate') {
c_rc=b_rc.link[k].href;break;
}
}
c_rc=c_rc.replace("#","#comment-");
var d_rc=c_rc.split("#");
d_rc=d_rc[0];
var e_rc=d_rc.split("/");
e_rc=e_rc[5];
e_rc=e_rc.split(".html");
e_rc=e_rc[0];
var f_rc=e_rc.replace(/-/g," ");
f_rc=f_rc.link(d_rc);
var g_rc=b_rc.published.$t;
var h_rc=g_rc.substring(0,4);
var i_rc=g_rc.substring(5,7);
var j_rc=g_rc.substring(8,10);
var k_rc=new Array();
k_rc[1]="Ene"; k_rc[2]="Feb"; k_rc[3]="Mar"; k_rc[4]="Abr";
k_rc[5]="May"; k_rc[6]="Jun"; k_rc[7]="Jul"; k_rc[8]="Ago";
k_rc[9]="Sep"; k_rc[10]="Oct"; k_rc[11]="Nov"; k_rc[12]="Dic";
if("content" in b_rc){
var l_rc=b_rc.content.$t;
} else if("summary" in b_rc) {
var l_rc=b_rc.summary.$t;
} else var l_rc="";
var re=/<\S[^>]*>/g;
l_rc=l_rc.replace(re,"");
if(m_rc==true)document.write(k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');
document.write('<li><b>' + b_rc.author[0].name.$t + '</b>');
if(n_rc==true)document.write(f_rc);
document.write(':<br/>');
document.write('<a href="' + c_rc + '">');
if(l_rc.length < o_rc) {
document.write(l_rc);
} else {
l_rc=l_rc.substring(0,o_rc);
var p_rc=l_rc.lastIndexOf(" ");
l_rc=l_rc.substring(0,p_rc);
document.write(l_rc+'…');
}
document.write('</a></li>');
}
}
</script>

<script type="text/javascript">
var a_rc=10;
var m_rc=true;
var n_rc=false;
var o_rc=70;

</script>

<script src="http://AQUÍ-TU-BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Explicación:

» Donde dice "AQUÍ-TU-BLOG" deberemos de poner la dirección de nuestro blog.
» var a_rc=10; nos indica el número de coemntarios a mostrar.
» var m_rc=false; nos indica si mostraremos la fecha de los comentarios: true para mostrar la fecha y false para omitirla.
» var n_rc=false; permitirá que se muestre el título del post del que procede el comentario. Igual que el anterior código, true para mostrar el título y false para omitirlo.
» var o_rc=70; , aquí podremos graduar el número de letras que se mostrará por cada comentario.

♠ Damos click en Guardar y listo, ya tendremos la lista de últimos comentarios en nuestra sidebar.

viernes, 24 de abril de 2009

GameGames.com

GamesGames.com es un sitio web donde no sólo encontrarás entretenimiento sino que te permitirá agregar juegos a tu blog.

Para agregar un juego selecciona el código que te proporcionan y pégalo en tu blog. Hubo un juego que me gustó mucho se llama Burger Restaurant II y se los dejo.
Ya saben en GamesGames.com encontrarán éste y otros juegos!

Click para jugar [+/-]

miércoles, 22 de abril de 2009

Qué es un IFRAME

Despejando algunas dudas sobre algunos términos, he decidio hacerlo primero con IFRAME. Quizás el IFRAME más usado en los últimos tiempos (en el caso de los blogs) sea el gadget de Seguidores.

Pero , qué es exáctamente un IFRAME? De acuerdo a Wikipedia, un IFRAME es un elemento HTML que permite insertar o incrustar un documento HTML dentro de un documento HTML principal.
Explicándolo de una forma sencilla, un IFRAME nos permite incluir un objeto externo, como un documento HTML.

Una de las ventajas es que podemos agregar a nuestro blog contenidos de otros blogs o web, como YouTube:



Para agregar un IFRAME bastará agregar el siguiente código:

<iframe src="AQUÍ_LA_PÁGINA-HTML" width="300" height="400">
Aquí colocamos un texto alternativo para los usuarios que no ven IFRAMES, tipo "su navegador no soporta IFRAMES"
</iframe>

Donde podemos configurar el ancho y alto del IFRAME.

lunes, 20 de abril de 2009

Mostrar los últimos post en la sidebar (forma sencilla)

Hace un tiempo lo agregué a mi blog y quizás a alguien más le interese agregarlo al suyo. Agregar este gadget de "Últimos comentarios" no es nada complicado.

♠ Para empezar , vamos a Diseño/ Añadir un gadget y Feed
♠ En el gadget escribiremos la siguiente dirección:
http://aquitublog.blogspot.com/feeds/posts/default

Donde reemplazaremos aquitublog por el nombre de nuestro blog.

Probé con varios blogs de pruebas y en todos funcionó, menos en uno que tenía la plantilla Rounders ; si les sucede lo mismo, deberán de poner en vez de la dirección anterior, la siguiente:
http://aquitublog.blogspot.com/feeds/posts/full

♠ Damos click en "Continuar". En la ventana podremos configurar el título del gadget, el número de artículos a mostrar, si incluiremos las fechas y autores.


♠ Una vez que hayamos configurado todo, damos click en "Guardar" y éso es todo. Como les dije, nada complicado y muy sencillo.

domingo, 19 de abril de 2009

Cómo publicar un post

Una vez que hayas creado tu cuenta en Blogger, puedes empezar a publicar alguna nota o post en tu blog. Pero no sabes cómo? Conestos sencillos pasos sabrás cómo publicar un post.

♠ Una vez que hayas ingresado a tu cuenta de Blogger, has click en "Nueva entrada", un botón de letras blancas y con fondo celeste.

♠ Te encontrarás con el editor de texto, en el espacio en blanco podrás escribir tus notas, pero no sólo eso, también podrá incluir imágenes, enlaces, cuadros, etc. En futuros post te enseñaré cómo incluirlos.

♠ Una vez que hayas terminado de escribir, das click en "Publicar entrada" y listo! Ya publicaste un post en Blogger.

viernes, 17 de abril de 2009

Como crear un banner para tus links favoritos

Lo primero que vamos hacer es pegar éste código en nuestra plantilla. Para ello vamos a Diseño -> Edición de HTML y antes de </head>:

<link href='http://xosse.dorrio.googlepages.com/bannerxOsse.ccs' rel='stylesheet' type='text/css'/>
<script src='http://xosse.dorrio.googlepages.com/bannerxOsse.js' type='text/javascript'/>


También podeis descargar esos archivos, renombrarlos y subirlos a vuestro propio dominio. Así no estareis expuestos a su pérdida si algún día yo los elimino de mi espacio, por error o por que ya no los necesite.

Posteriormente crearemos un elemento nuevo en la Sidebar. Vamos a Diseño -> Elementos de la página -> Añadir un gadget -> HTML/Javascript y editamos:

<center>
<div id="mbs49808d35a52f6" class="mod_bannerslider" style="width: 180px; height: 80px;">
<div class="bs_opacitylayer">
<div class="bs_contentdiv"><a href="http://www.moendo.net/" target="mOendo do Revés"><img src="http://xosse.dorrio.googlepages.com/moendo-net.PNG" alt="mOendo.net" /></a></div>
</div>
<div class="bs_contentdiv"><a href="http://blogandroll-xosse.blogspot.com/" target="Blog and Roll"><img src="http://xosse.dorrio.googlepages.com/logo_BR.jpg" alt="Blog and Roll" /></a></div>
</div>

<script type="text/javascript"><br /> new ContentSlider("mbs49808d35a52f6", "fade", 2000, 1, 1);
</script>
</center></div>

Dentro de éste código podremos editar el tamaño de la caja, tanto su anchura (width) como su altura (height) y podremos, además, poner tantos links como nos parezca; sólo es preciso repetir la parte del código que contiene el link a la web y el link a la imagen, cambiándolo por otro diferente. Es téticamente es importante utilizar imágenes que se correspondan con las medidas de la caja, para ligar las webs que deseamos.

Football-Wallpapers.com

Hace un tiempo Adrián comentaba que le gustaría alguna página con wallpapers de fútbol. Pues bien, encontré esta web, football-wallpapers.com , donde podrán encontrar no sólo wallpapers de equipos y selecciones, sino que también una amplia variedad de avatares de fútbol. Aquí una pequeña muestra:

miércoles, 15 de abril de 2009

Chayanne - "Un siglo sin ti"

Una canción que volví a escuchar hace poco, mientras escuchaba una radio. Es algo antigua (aunque no tanto), pero tiene una letra muy hermosa.

Si ves algún video caducado, déjame un mensaje
para cambiar el video por otro. Gracias.


Letra de la canción:

Mil y una historia me he inventado
para estar aqui, aqui a tu lado...
y no te das cuenta que...
yo no encuentro ya que hacer.
Sé que piensas que no he sido sincero
sé que piensas que ya no tengo remedio.
Pero quien me iba decir
que sin ti no se vivir...
Y ahora que no estas aqui
me doy cuenta cuanta falta me haces....

Si te he fallado te pido perdón de la única forma que sé...
Abriendo las puertas de mi corazón
Para cuando decidas volver
Porque nunca habra nadie que pueda llenar
El vacio que dejaste en mi....
Has cambiado mi vida me has hecho crecer
Es que no soy el mismo de ayer
Un día es un siglo sin ti...

Mil y una historia me he inventado
para demostrarte que cambiado.
Ya lo que pasó paso
Rescatemos lo que nos unio...
Que todos aprendemos de nuestros errores
Solo yo te pido que ahora me perdones...
Pero quien me iba decir
Que difícil es vivir.....
Y ahora que no estas aquí
Me doy cuenta cuanta falta me haces.....
Si te he fallado te pido perdón de la unica forma que se
Abriendo las puertas de mi corazon
Para cuando decidas volver
Porque nunca habra nadie que pueda llenar
El vacio que dejaste en mi....
Has cambiado mi vida me has hecho crecer
Es que no soy el mismo de ayer
Un dia un siglo sin ti.....

Ooooh
Porque nunca habra nadie que pueda llenar
El vacío que dejaste en mi
Has cambiado mi vida me has hecho crecer
Es que no soy el mismo de ayer...

Cuanta falta me haces...

Si te he fallado te pido perdon de la unica forma que se
Abriendo las puertas de mi corazon
Para cuando decidas volver
Porque nunca habra nadie que pueda llenar
El vacio que dejaste en mi....
Has cambiado mi vida me has hecho crecer
Es que no soy el mismo de ayer
Un dia un siglo sin ti.....

Si te he fallado te pido perdón...

lunes, 13 de abril de 2009

Menú vertical desplegable

Ahora vamos a ver un menú muy sencillo y que puede servirnos para ahorrar espacio en la sidebar. La DEMO la pueden ver en mi blog, en la sidebar, donde dice "Enlaces".

♠ Vamos a Diseño - Edición HTML y justo después de <head> pegaremos el siguiente código:

<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

♠ Damos click a guardar.

♠ Ahora vamos a Diseño - Añadir un elemento de página - HTML/Javascript y añadimos el código:

<a href="javascript:void(0);" onclick="expandcollapse('Diccionarios')">

<img border="0" src=" AQUÍ-URL-IMAGEN-BOTÓN"/>

</a><br/>

<ul id="Diccionarios" class="texthidden">

<li><a href="http://www.rae.es/rae.html " target="_blank"> RAE

</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Videos')">

<img border="0"src="AQUÍ-URL-IMAGEN-BOTÓN"/>

</a><br/>

<ul id="Videos" class="texthidden">

<li><a href="http://www.youtube.com/" target="_blank"> YouTube </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Directorios')">

<img border="0" src="AQUÍ-URL-IMAGEN-BOTÓN&"/>

</a><br/>

<ul id="Directorios" class="texthidden">

<li><a href="http://www.blogsperu.com/" target="_blank"> BlogsPerú </a></li></ul>

♠ Agregaremos más enlaces o más pestañas al menú. Para que aparezcan los botones, reemplazamos AQUÍ-URL-IMAGEN-BOTÓN por la URL de nuestro botón con texto.

♠ Para hacer nuestros botones, podemos usar cualquiera de estas páginas, todas muy buenas y con herramientas sencillas de usar:

» Buttonator
» As Button Generator
» GR Sites

O si dominamos programas como Photoshop, podemos hacer algunos botones ahí, alojarlos y colocarlos en el código.

Agregando el nuevo gadget de seguidores

Hace varios meses atrás, Blogger nos permitió tener un gadget para que nuestros seguidores puedan tener las actualizaciones de nuestros blogs. Cuando surgió este gadget ( de seguidores) lo probé durante uno o dos días aproximadamente en la sidebar de mi blog, pero no me convenció totalmente y por eso decidí quitarlo...Pero mi opinión no es igual a la de todos, asi que esta entrada va dirigida a los que les guste este nuevo gadget de Blogger

Bien, hoy voy a contestar a dos preguntas frecuentes que me han formulado sobre este gadget.

¿CÓMO SEGUIR A ALGUIEN SI NO TIENE EL GADGET DE SEGUIDORES?

Para hacerlo, vamos a Escritorio y en la parte de abajo de la página veremos un panel donde se muestran los últimos post de los blogs que seguimos. Debajo de éste, veremos un botón que dice "Añadir" , aparecerá una ventana emergente donde escribiremos la URL del blog al que nos queremos suscribir, damos click a "Siguiente" y seleccionamos y seguiremos el blog de forma pública o no.



¿ES POSIBLE MODIFICAR EL GADGET?

Otra pregunta frecuente es que si se puede modificar este nuevo gadget. El anterior si permitía varias modificaciones : podíamos eliminar el número de seguidores, cambiar algún mensaje, etc. Este nuevo gadget no permite casi ninguna modificación de ese tipo (por éso mismo había decidido no usarlo, porque me parecía una imposición de Blogger).

miércoles, 8 de abril de 2009

Buscador

Para una búsqueda exitosa utiliza los siguientes criterios de búsqueda:
  • No utilices frases completas, utiliza solamente palabras clave.
  • Evita la faltas ortográficas.
  • Utiliza términos simples.


Loading

Descanso por Pascua

Dado que se acerca la Semana Santa y la Pascua he decidido tomarme unos días de descanso. Pueden seguir dejando sus comentarios y los responderé a mi vuelta.

El lunes estaré nuevamente publicando post, contestando comentarios, resolviendo dudas, etc.

Saludos y nos vemos el lunes!

martes, 7 de abril de 2009

Títulos de la sidebar personalizados II: imágenes e íconos

Hace un tiempo vimos cómo personalizar los títulos de la sidebar con colores, bordes, diferentes tipos de fuente, etc. Ahora, personalizaremos los títulos con imágenes. Empezamos?

IMAGEN DE FONDO

Una forma de personalizar el título de la sidebar con imágenes sería añadiendo una de fondo ,para ello trabajaremos con el código base que les di en la entrada anterior (ver detalles) que era este.

.sidebar h2{
background:#FFF;
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;
}


Para añadir la imagen de fondo deberemos de cambiar #FFF; por url(url-de-la-imagen); de manera que el código quede así:

.sidebar h2{
background:url(url-de-la-imagen);
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;
}


Y el resultado será el siguiente:



ÍCONO AL COSTADO DEL TÍTULO

Otra forma de personalizar un título de sidebar con imágenes sería añadir algún ícono al costado del título, algo parecido a agregar un ícono a los títulos del post.

Para ello, en nuestro código base, deberemos de cambiar background: #FFF; por background: url(url-de-la-imagen) no-repeat;

El resultado será el siguiente, que pueden apreciar en mi blog de pruebas:



En fin, hay muchas formas de usar las imágenes para obtener un título bonito, personalizado y original. Ahora toca que personalicen sus títulos, ya sea con colores y borde, con imágenes e íconos o con una combinación.Hay que dejar volar la imaginación

domingo, 5 de abril de 2009

Íconos RSS de Pascua

Ya que se acerca pronto la Pascua, IconDock ha sacado una hermosa colección de íconos RSS tema Pascua. Aquí una pequeña muestra:

viernes, 3 de abril de 2009

Movie Wallpaper

Una muy buena página donde podremos encontrar wallpapers de películas. Aquí una pequeña muestra:



MovieWallpaper.net

miércoles, 1 de abril de 2009

Trailer de "Rápidos y furiosos 4"

Mañana se estrena en Perú la esperada cinta Rápidos y furisos 4. Esta película con mucha acción, cuenta con las actuaciones de:

♠ Vin Diesel
♠ Paul Walker
♠ Michelle Rodríguez
♠ Jordana Brewster, entre otros

Como siempre puedes visitar el sitio oficial para descargar wallapers o saber un poco más sobre la película:

fastandfuriousmovie.net (sitio oficial en inglés.

TRAILER

Si ves algún video caducado, déjame un mensaje
para cambiar el video por otro. Gracias.


OTROS ESTRENOS

Mañana también se estrenan dos películas más (en Perú):

» Rudo y Cursi
» Monstruos vs. Aliens