Cómo personalizar el título de tu blog

En una ocasión anterior vimos como eliminar el título de nuestro blog, ahora veremos como personalizarlo.



En realidad lo que haremos es sustituir el título por una imagen, de esta manera lucirá  más atractivo, porque podrás utilizar cualquier tipo de fuente, efectos, o agregarle imágenes.



Esto lo haremos en tres pasos:



Paso 1. Creación de la imagen que contenga el título de tu blog.

Paso 2. Colocación de la imagen en tu blog.

Paso 3. Definir la posición de tu imagen.





Paso 1.- Lo primero que tenemos que hacer es encontrar un programa que te ayude a hacerlo, puedes utilizar algo tan sencillo como el Paint, pero si tienes Photoshop u otro similar, mucho mejor.



Hay un programa en la red que me encanta, y servirá muy bien para nuestro propósito, te estoy hablando de  picnik, el cual cuenta con un gran repertorio de fuentes, efectos, etc, para editar y crear imágenes, así que puedes empezar a crear con ellos la imagen de tu título. El programa está disponible en varios idiomas, incluyendo el español por supuesto.



Nota: Recuerda que la imagen deberá tener el mismo color de fondo de donde lo colocarás o utilizar un fondo transparente.



Paso 2. Bien, una vez que has creado la imagen con el título, hay que colocarlo en el blog, para eso tienes que ir a Diseño ►Editar en la sección de la cabecera:

Luego sube la imagen, elige la opción dependiendo de la ubicación de esta, luego, vas a marcar la casilla que dice: En lugar del título y la descripción, Después guardas los cambios.

Paso 3. Mover la imagen.

En tus opciones del panel, vas a Plantilla > Personalizar > Avanzado > Añadir CSS  y agregas esto:

#header-inner{margin: 20px 50px 0 0;}

Lo anterior quiere decir que hay un margen de 20px arriba, un margen de 50px a la derecha, cero abajo y cero a la izquierda.



Nota: los valores son solo ejemplos, tu tienes que ponerlos según la ubicación que necesites.



También puedes dar en efecto hover  al poner el puntero sobre la imagen de tu título, esto sería interesante por que puedes sumarle algún efecto como agregar alguna imagen a un lado como en mi caso, etc.



Para eso necesitarás una segunda imagen y este es el CSS que necesitas para agregarla y lo haces también en añadir CSS del diseñador de plantillas como te decía en el paso anterior.

#header-inner a:hover{background:url(URL_DE LA IMAGEN) no-repeat top center; }

Luego guardas los cambios en Aplicar al blog.

Imágenes extra grandes en Blogger

Leyendo el título cualquiera diría que Blogger está dando pasos agigantados, y es cierto.Pero un día da dos pasos adelante y al otro retrocede tres.

Cuando añadió el formulario incrustado nos sorprendió gratamente a todos, se veía la intención de mejorar las carencias tan necesarias. Paciencia, nos decíamos, ya se dieron cuenta que estamos aquí.

Lo último ha sido algo nuevo, algo inútil y algo que no funciona.

Podemos ver lo nuevo accediendo desde Blogger in draft en el editor de entradas hay una nueva opción cuando subimos una imagen, antes el tamaño mayor era de 400. Ahora, podemos añadir imágenes "Extra grandes" de 640 ojito con ese tamaño que no quiere decir que todos podamos mostrar ese tamaño de imágenes.

¿Por qué? porque si nuestro espacio para las entradas (main-wrapper) es menor de 640px las imágenes tomarán el espacio que les falta y desplazarán aquello que tengan más cercano, la sidebar o el propio contenido de las entradas.

Lo inutil es este aviso que podemos ver accediendo también por Blogger in draft si, ya sé que por ese medio tenemos acceso a las cosas que están en fase experimental ¿sólo lo vemos los usuarios? porque lleva allí más de una semana y nadie hace nada al respecto.

Consultado con J.Miur me aclara que está relacionado con la la Ubicación.

Plantilla de diseño/Entradas del blog/Editar/Ubicación

Pero no se cansen que aunque no esté marcado y eliminen la parte correspondiente a la plantilla seguirá saliendo.

Mucha euforia, bombo y platillo, no dábamos crédito al avatar de comentarios, y en cierto modo no es extraño porque no hay que dar crédito a algo que ha sido un visto y no visto.

El "estamos solucionado el problema" dura ya dos semanas ¿o quizás más?

Ese icono rojo con la ramita blanca soy yo

Iconos sociales y Halloween

Three Styles

the Iconfactory

artdesigner

Otras formas de añadir estilos a las listas

Visitando Cosas Sencillas he visto un enlace a Marcofolio donde habla de "8 formas diferentes de añadir bonitos estilos a nuestras listas". Con Explorer el efecto del siguiente ejemplo se pierde, pero aún así no he podido resistirme a probarlo.

Home Blog About Contact

Estilos CSS antes de ]]></b:skin>

/* LIST #8 */
#list8 {  }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
  text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
  -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
  transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

En HTML:

<div id="list8">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

Íconos de redes sociales de Halloween

Quedan muy pocos días para Halloween y qué mejor que adornar nuestro blog con algunos de estos íconos diseñados por TNerd.com.

CARACTERÍSTICAS

Pack de seis íconos de las principales redes sociales.
Formatos: PNG, PSD.
Tamaños: 32x32 , 64x64.

Descargar

La colección también incluye 2 wallpapers de Halloween que pueden ser descargados en el mismo enlace de descarga de arriba.

Bave Circus

REFERENCIA:Punto geek

Cartilla de colores hexadecimales

A menudo necesitamos de los colores para personalizar nuestro blog o dar estilo a algún script...Pero muchas veces no sabemos qué código tiene determinado color.

Yo recomiendo esta página o si desean pueden usar la siguiente cartilla de 216 colores que les proporciono.

#FFFFFF	#FFFFCC	#FFFF99	#FFFF66	#FFFF33	#FFFF00
#FFCCFF	#FFCCCC	#FFCC99	#FFCC66	#FFCC33	#FFCC00
#FF99FF	#FF99CC	#FF9999	#FF9966	#FF9933	#FF9900
#FF66FF	#FF66CC	#FF6699	#FF6666	#FF6633	#FF6600
#FF33FF	#FF33CC	#FF3399	#FF3366	#FF3333	#FF3300
#FF00FF	#FF00CC	#FF0099	#FF0066	#FF0033	#FF0000

#CCFFFF	#CCFFCC	#CCFF99	#CCFF66	#CCFF33	#CCFF00
#CCCCFF	#CCCCCC	#CCCC99	#CCCC66	#CCCC33	#CCCC00
#CC99FF	#CC99CC	#CC9999	#CC9966	#CC9933	#CC9900
#CC66FF	#CC66CC	#CC6699	#CC6666	#CC6633	#CC6600
#CC33FF	#CC33CC	#CC3399	#CC3366	#CC3333	#CC3300
#CC00FF	#CC00CC	#CC0099	#CC0066	#CC0033	#CC0000

 

#99FFFF	#99FFCC	#99FF99	#99FF66	#99FF33	#99FF00
#99CCFF	#99CCCC	#99CC99	#99CC66	#99CC33	#99CC00
#9999FF	#9999CC	#999999	#999966	#999933	#999900
#9966FF	#9966CC	#996699	#996666	#999933	#999900
#9933FF	#9933CC	#993399	#993366	#993333	#993300
#9900FF	#9900CC	#990099	#990066	#990033	#990000

#66FFFF	#66FFCC	#66FF99	#66FF66	#66FF33	#66FF00
#66CCFF	#66CCCC	#66CC99	#66CC66	#66CC33	#66CC00
#6699FF	#6699CC	#669999	#669966	#669933	#669900
#6666FF	#6666CC	#666699	#666666	#666633	#666600
#6633FF	#6633CC	#663399	#663366	#663333	#663300
#6600FF	#6600CC	#660099	#660066	#660033	#660000

#33FFFF	#33FFCC	#33FF99	#33FF66	#33FF33	#33FF00
#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00
#3399FF	#3399CC	#339999	#339966	#339933	#339900
#3366FF	#3366CC	#336699	#336666	#336633	#336600
#3333FF	#3333CC	#333399	#333366	#333333	#333300
#3300FF	#3300CC	#330099	#330066	#330033	#330000

#00FFFF	#00FFCC	#00FF99	#00FF66	#00FF33	#00FF00
#00CCFF	#00CCCC	#00CC99	#00CC66	#00CC33	#00CC00
#0099FF	#0099CC	#009999	#009966	#009933	#009900
#0066FF	#0066CC	#006699	#006666	#006633	#006600
#0033FF	#0033CC	#003399	#003366	#003333	#003300
#0000FF	#0000CC	#000099	#000066	#000033	#000000

Favicon en la sidebar

k_nelita me ha pedido que explique la forma de añadir un sistema de publicidad creado con esas pequeñas imágenes de 16x16 que conocemos por favicon.

Los favicones están incluidos en una tabla.

<div class="side-favicon ">

<div class="favicon">

<table fcellpadding="0" align="center">

<tbody>

<tr>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<tr>

</tr>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

</td></tr>

</tbody>

</table>

</div></div>

La vamos a incluir en un gadget de HTML y las filas de la tabla dependerán de la cantidad de líneas de favicones que deseamos añadir.

En la tabla del ejemplo añadí dos líneas para tres favicones en cada línea, pero podemos aumentar la cantidad de favicones dependiendo del ancho de la sidebar.
El código para cada favicón lo añadimos entre <td> y <td>

Cuando los favicones cubren una línea pasaremos a la línea siguiente, las etiquetas <tr> y </tr> serán las encargadas de producir el salto de línea..

El favicon es un enlace que nos llevará a la url que le indiquemos.

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

Le añadimos target="_blank" para que abra en ventana nueva, también le podemos añadir la etiqueta rel="nofollow" para que Google no tenga en cuenta esos enlaces, eso ya dependerá de cada uno.

<a href="ur-pagina" target="_blank" rel="nofollow" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

Guardamos los cambios y añadimos los estilos, nos dirigimos a plantilla Edición de HTML y justo antes de ]]></b:skin> añadimos:

.favicon {

padding:2px;

text-align:center;

}

.favicon a img {

background-color: #fff;

border:1px solid #ccc;

padding:2px 2px;width:16px

}

div.side-favicon {

background:#FFFF;

border:1px dashed #C0C0C0;

margin:0 0 20px;

padding:4px 4px;

}

Con "background" podemos cambiar el color de fondo, el tipo de borde y color en "border"

Pacman (Comecocos)

Un juego clásico!


Instrucciones:

» Utiliza las teclas de flecha para moverte (← ↑ → ↓)
» Pausa– P
» Salir del juego – Q
» Menor calidad – L
» Silenciar el sonido – M

Click para jugar [+/-]

Premio 20 Minutos Mejor Blog 2009 ¡¡para Oloman !!

Oloman sonriente (y no es para menos) recoge uno de sus premios

Tres premios, no uno, ni dos, sino TRES son los premios que nuestro amigo Oloman ha conseguido.

Mejor blog 2009: Diploma acreditativo, estatuilla, 3.000 euros y una columna del periódico 20 minutos de papel.

Mejor blog de Ciencia y Tecnología: Diploma acreditativo y estatuilla.

Los premiados de la noche

FELICIDADES Oloman, ahora ya no tienes esa ventaja que decías tener porque te voy a reconocer cualquier día por la calle FELICIDADES también al resto de los galardonados.

Fotografías de Jorge París, fotógrafo oficial del evento, obtenidas en El blog de blogs de Pablo Fernández.

Cómo crear un playlist de música para tu blog

¿Quiéres poner un poco de música de fondo para tu blog y no sabes por donde empezar?



Hay en la red muchas opciones que te permiten hacerlo, una muy atractiva es Mixpod,  además, con ellos  encontrarás un repertorio muy amplio de canciones, incluyendo en español y también tienen una gama muy amplia de carátulas con diseños muy bonitos, y sé que alguno te va a gustar.




¿Cómo la consigo?, te preguntarás. Lo primero que tienes que hacer es ir a su página, ingresas a sign up , para registrarte. Estando ahí, harás lo siguiente:



Paso 1. En el menú de navegación seleccionas Create playlist.



Paso 2. Luego, en la barra de Search  ingresas el nombre de tu artista o canción que estés buscando, (también puedes agregar canciones de archivos Mp3, seleccionando la opción add url).



Paso 3. Después te aparecerá una lista de las canciones del artista que ingresaste y para añadirlo a tu lista de canciones solo tienes que dar click en (+).



Paso 4. Una vez que agregaste música a tu playlist, das click en Customize, para elegir la carátula que mas te guste.



Paso 5. Hecho lo anterior, haz click en Save Playlist, agregas el título de tu lista de canciones en Playlist Title.



Paso 6. Finalmente haz click en save (get code)  es el botón verde del fondo y a continuación te saldrán todas las opciones disponibles para colocar tu Playlist, dependiendo de tu blog, eliges la de Blogger, copia el código, luego págalo en la ubicación de tu blog que quieras, solo escoges el gadget de HTML/javascript, o bien agrégalo como un artilugio desde ahí y listo, a disfrutar de la música en tu blog.

Music Playlist at MixPod.com

Proximamente la plantilla “ Scrapping Blog”

¡Hola que tal! , en estos momentos estoy trabajando en mi siguiente plantilla, el diseño esta repleto de detalles de Scrapping, si te gusta este tema, o tienes un blog de esta categoría,  este template puede ser una opción interesante para ti, los colores principales son el Terracota, verde, y beige, en cuanto la termine la publico para que puedas usarla en tu blog.

¡Hasta luego y que tengas un excelente Día!

Últimas entradas con miniatura y animación

Abu Farhan a añadido al widget inicial de entradas con miniatura un afecto animado creado por las API de Google y jQuery eso hace que el efecto sea rápido y a la vez resulta muy atractivo y llamativo pero quiere decir también que si tenemos en nuestro blog otra librería pueden crearse conflictos entre ellas.

En Plantilla de diseño editamos un nuevo gadget de HTML.

En su interior añadimos el código que podemos copiar desde aquí, una vez añadido buscamos donde dice:

home_page = "http://www.raudhatulmuhibbin.org/";

ahí sustituimos la url marcada en negrita por la de nuestro blog.
Guardamos los cambios y lo podemos ver funcionado en segundos.

La personalización no varía de cualquier widget exceptuando que podemos personalizar los colores, fuente y fondo del widget
.

boxwidth = 255; Ancho del widget.	cellspacing = 6; Velocidad del efecto.	borderColor = "#232c35"; Color del borde.
bgTD = "#0000"; Color de fondo del widget.	imgwidth = 50; Ancho de la miniatura de imagen.	thumbheight = 70; Alto de la miniatura.
fntsize = 12; Tamaño de fuente de los título.	acolor = "#666"; Color del título de entrada.	aBold = true; El título, con false eliminamos el texto negrita.
text = "comments"; El texto de comentarios.	showPostDate = true; Fecha de los post. Si ponemos False no se muestra la fecha.	summaryPost = 40 ; Número de carácteres del resumen.
summaryFontsize = 10; Tamaño de texto del resumen.	summaryColor = "#666"; Color de texto del resumen.	numposts = 10; Es el número de post que veremos.

Imagen fija para Twitter

Casi todos tenemos el enlace a Twitter en nuestra sidebar, pero hay otra forma de añadirlo para que siempre esté visible, la idea es la misma de la imagen fija al final del blog. En esa imagen añadimos el efecto deslizante porque se trataba de un efecto pero al tratarse de un simple enlace la podemos añadir sin efecto fijándola en un punto en concreto.

En un gadget de HTML añadimos:

<div id="twitterfijo">

<a style="display:scroll;position:fixed;bottom:345px;right:0px;" href="url-twitter">

<img src="url-imagen"/></a>

</div>

Si en lugar de añadirlo en un gadget preferimos añadirlo a la plantilla, podemos hacerlo justo antes de:
<div id='main-wrapper'>

La altura la escogemos en bottom:345px y la anchura right:0px
Hay que intentar que la imagen quede pegada al blog y no sobre el blog, de lo contrario es posible que se "esconda" detrás de algún bloque que tengamos añadido.
Puede verse funcionando en este ejemplo.
Se puede añadir cualquier otra imagen  y enlazar cualquier otro sitio que no sea Twitter.

En Todo Twitter podéis encontrar gran surtido de iconos y lo último en herramientas y utilidades para Twitter.

Blogumus » Nube de etiquetas en movimiento

Hoy vamos a ver cómo crear una nube de etiquetas con un efecto muy especial, pues las etiquetas están en movimiento, tal como pueden apreciar si pasan el mouse sobre la imagen.

Ahora vamos a ver como pueden hacer para conseguirla siguiendo los siguientes pasos:

1.§ Vamos a Diseño - Edición de HTML y buscamos el siguiente código:

<b:section class='sidebar' id='sidebar' preferred='yes'>

2.§ Debajo del código que buscamos en el punto 1.§ , pegaremos el siguiente código:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

  <b:if cond='data:title'>


    <h2><data:title/></h2>

  </b:if>

  <div class='widget-content'>



    &lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;

        &lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;


        &lt;param name="bgcolor" value="#ffffff" /&gt;

        &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

      <b:loop values='data:labels' var='label'>


<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>

</b:loop>

&lt;/tags&gt;" /&gt;

        &lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;


    &lt;/object&gt;


  </div>



  <b:include name='quickedit'/>

</b:includable>

</b:widget>

Antes de guardar vemos si ha quedado bien en Vista previa, y luego damos click a Guardar!

3.§ Este paso es opcional, la nube funcionará correctamente con los pasos anteriores, este paso sólo es para personalizar un poco la nube.
La nube que instalamos, tiene los siguientes valores o características que podremos modificar, tal como se indica teniendo, en cuenta que sólo deberemos de modificar lo que está en cursiva:

• El ancho es 250px, para cambiarlo buscaremos en el código width="250"


• La altura es 200px, para cambiarlo buscaremos height="200"


• El color de fondo es blanco, para cambiarlo buscaremos value="#ffffff"


• El color de texto es negro, para cambiarlo buscaremos value="tcolor=0x000000&


• El tamaño de letra es 12, para cambiarlo buscaremos style='12'

Y éso sería todo, si hay alguna duda o problema estaré gustosa de ayudarlos.

Referencia : Blogger Buster

Introduciendo la plantilla para blogger La playa de mi vida

Hola, por fin esta lista la plantilla "la playa de mi vida" la puedes usar para cualquier tipo de blog si te gusta este tema y de alguna forma se adapta,  pero la recomiendo para blogs de cuentos. He usado gráficos de mi amiga Mar. No dudes en comentar, sugerir o criticar.



 [Demo]               [Bajarla]





Características:

• Plantilla de tres columnas.


• resúmen automático en tus post, mismos que puedes personalizar según tus gustos.


• Menú de Nanegación para inicio, RSS y contacto.


• 3 columnas adicionales en el fondo.


• Gratis y para uso personal.
  
  
  
  Instrucciones para personalizar el menú de navegación:
  
  

Solo tienes que ir a Diseño► Edición de HTML  e identificar el siguiente código:

<div id='menunav'>

<ul>

<li><a expr:href='data:blog.homepageUrl' title='Inicio'/></li>

<li><aexpr:href='data:blog.homepageUrl+ &quot;feeds/posts/default&quot;' title='Entradas Rss'/></li>

<li><a href='tu link1 aqui' title='tu link'/></li></ul>

</div>

...y vas a sustituir los siguiente:



tu link aqui ► por la url  o link de la información de correo electrónico, puedes usar una forma de contacto como la que te ofrece emailmeform por ejemplo.

tu link ► por el texto o mensaje que quires que aparezca al poner el puntero sobre  contacto.