viernes, 5 de noviembre de 2010

Ocultar / eliminar el Suscribirse a entradas Atom

Han sido varias las personas que me han preguntado cómo eliminar u ocultar el enlace que aparece por defecto en la parte inferior de las entradas, el Suscribirse a: Entradas (Atom). Hoy vamos a ver cómo ocultar o eliminar este enlace.

PARA LAS ANTIGUAS PLANTILLAS

Si usamos una plantilla antigua, es decir, que no está hecha con el nuevo Diseñador de plantillas, entonces haremos lo siguiente:

1.§ Vamos a Diseño - Edición de HTML.

2.§ Buscamos lo siguiente y agregamos el código que está en negrita:
.feed-links {
clear: both;
line-height: 2.5em;
visibility:hidden;
display:none;

}

3.§ Damos click a Guardar.

PARA LAS NUEVAS PLANTILLAS

Si usamos una de las nuevas plantillas entonces seguimos el paso 1.§ y buscaremos el siguiente código, añadiendo lo que está en negrita:

.blog-feeds, .post-feeds {
margin: 1em 0;
text-align: center;
color: $(feed.text.color);
visibility:hidden;
display:none;

}

NOTA:
Debemos de tener en cuenta que el código puede no ser igual, puede cambiar un poco, lo más importante es añadir lo que está en negrita:
visibility:hidden;
display:none;


En un futuro post veremos, para los que deseen conservar este enlace, cómo personalizarlo: cambiando texto, agregar algún ícono, etc.

jueves, 4 de noviembre de 2010

Escuchar música en ventana Pop-Up

Un comentario muy común que suelen hacer es que es bastante incómodo escuchar música en un blog y que al entrar a otra entrada, página o cualquier otra sección del blog la música deje de escucharse y empiece de nuevo desde la primera canción.
Sí, es desagradable que la música se detenga justo cuando ya estábamos cantando pero hay que entender que si cambiamos de página entonces todos los elementos cargarán de nuevo. Todos.
Pues la página debe de cargar todo lo que haya dentro de ella y eso incluye a los reproductores.

Así que lo que podemos hacer es poner el reproductor de música dentro de una página independiente al blog para que, hagamos lo que hagamos en el blog esa pequeña página no tenga que cargar nada de nuevo y tus lectores puedan escuchar la música sin que se interrumpa. Para ello crearemos un documento HTML simple y haremos que éste se abra en una ventana pop-up (ventana emergente) con una función Javascript por lo que no tendremos que recurrir a librerías externas ni códigos largos.

El resultado será este:


Escuchar música



Primero vamos a crear la página del reproductor, para eso abrimos el Bloc de notas y dentro de él pegamos esto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Musica</title>
</head>
<body>

...Aquí pegamos el código del reproductor...

</body>
</html>

Ahora pegamos donde se indica, el código del reproductor que queremos, yo he usado el reproductor de Windows Media Player que usamos para la radio online y con una lista de reproducción, aunque tú puedes usar prácticamente cualquier otro que quieras, en la sección Música encontrarás unos cuantos.

Ya que has pegado el código del reproductor ve a Archivo | Guardar como... y ponle el nombre musica.html o con cualquier otro nombre pero al final deberá decir .html
Luego cambia el Tipo a Todos los archivos, y dale Guardar.
Con esto lo estaremos guardando en formato de página Web, así que probablemente te aparezca un mensaje de advertencia donde te dirá que estás guardando el archivo en otro formato, sólo da click en para guardar el archivo.



Habiendo hecho esto subimos el archivo a un hosting.
Ahora sólo vamos a Diseño | Añadir gadget | HTML/Javascript y ahí pegamos este código:
<a href="javascript:void(0);" onclick="window.open('URL del archivo', 'popup', 'left=390, top=200, width=310, height=30, toolbar=0, resizable=1')" style="text-decoration: none;" title="Escuchar música">
<table border="0" cellpadding="5"><tbody>
<tr><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv51r8gH_JHKi7gflm-FNH1k1PJVHQhAPu5LFgNO1N1-dojEA3AE32A7Os2fGjm2fE-6L8HZLqoEBLUcOzvkATWY6nhXG-HUdzzOs8VMRdYW07fAToG6EWjV_5rv-xJ86vpo5ygef1kW8/s1600/player_volume.png" /></td>
<td><span style="font-family: Impact; font-size: x-large;">Escuchar música</span></td></tr>
</tbody></table></a>
Cambiamos donde se indica  la URL del archivo que subimos previamente y listo.

En donde dice width=310 height=30 podemos cambiar el ancho (width) y alto (height) que tendrá la ventana pop-up, esto dependiendo del tamaño del reproductor que hayamos puesto.
Y la URL que está en color verde es la que corresponde al icono de la imagen, también puedes cambiarlo si lo deseas.

De esta forma tus lectores podrán escuchar la música sin interrupciones sin importar si entran a otro post o si simplemente cierran la pestaña de tu blog, la música continuará.

Pack de Wallpapers oficiales de Windows 7

Este pack contiene todos los wallpapers incluidos en la RTM oficial de Windows 7, están comprimidos en un archivos .rar, y están organizados en las categorías correspondientes.... el archivo no contiene contraseña.


Wallpapers oficiales windows 7 7600.rar

martes, 2 de noviembre de 2010

Título del blog con efecto gradient

En la entrada anterior añadíamos con CSS efecto gradient a un texto, karla preguntaba si era posible añadir ese mismo efecto al título del blog y la respuesta es si.
Para conseguirlo nos situamos en plantilla edición de HTML y marcamos para expandir la plantilla, buscamos lo siguiente:

<b:includable id='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>
</b:includable>

La etiqueta <data:title/> es la que genera el título del blog, las sustituimos por la siguientes líneas:

<div class='pattern'>
<h1><span/><data:title/></h1>
</div>

Quedaría así:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='pattern'>
<h1><span/><data:title/></h1>
</div>

<b:else/>
<a expr:href='data:blog.homepageUrl'>
<div class='pattern'>
<h1><span/><data:title/></h1>
</div></a>
</b:if>
</b:includable>

Guardamos los cambios y justo antes de ]]></b:skin> añadimos los estilos para el nuevo título:

.pattern {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.pattern h1 {
color:#FFFFFF;
font:bold 600%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-6px;
margin:0;
position:relative;
text-transform:uppercase;
}
.pattern h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0uoAGBWqdAKe7G2Yk18PakC9-AJWiaX6oYp-RsqOs2JRrA3PBW8pbSjh1boja9GTlEwEMTjJbc7Li4-C7w6fMqXceW3avfvZ5TmTiNaeXl33Agh4PSB9VMEFQoJA6o_DYogpAE4qeYw/s0/pattern-zebra.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
position:absolute;
width:100%;
}

Si en vista previa comprobamos que la imagen del gradient se visualiza fuera del bloque modificaremos la anchura en width de forma que el ancho sea menor que el que tenemos en header-wrapper.

.pattern h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0uoAGBWqdAKe7G2Yk18PakC9-AJWiaX6oYp-RsqOs2JRrA3PBW8pbSjh1boja9GTlEwEMTjJbc7Li4-C7w6fMqXceW3avfvZ5TmTiNaeXl33Agh4PSB9VMEFQoJA6o_DYogpAE4qeYw/s0/pattern-zebra.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
position:absolute;
width:750px;
}

Cualquier modelo de gradient puede adaptarse al título del blog, bastará con añadir los estilos correspondientes y envolver la etiqueta <data:title/> con la misma clase.Ver ejemplo.

lunes, 1 de noviembre de 2010

Texto con efecto Gradient

En WebDesignerWall nos muestran una técnica para añadir efecto gradient en texto con CSS y una imagen PNG.
Cada ejemplo contiene el código HTML que lo añadiremos en un gadget también de HTML y los estilos CSS que los incluiremos en plantilla edición de HTML justo antes de ]]></b:skin>
En los estilos he añadido la imagen de los ejemplos, quiere eso decir que si vamos a utilizar alguno de forma definitica es recomendable descargar la imagen, subirla a nuestro servidor y sustituirla por la que hay ahora con el fin de no perder la imagen.

Hello, I'm Shinely

Ver código->

Vertical Stripe

Ver código->

Horizontal Stripe

Ver código->

Wow, Zebra

Ver código->

Gem@ BLOG

Al bloque "pattern" le añadimos un color de fondo en este caso es negro.
Los estilos del texto los tenemos en "pattern h1" y es ahí donde añadimos el color que se mostrará para el texto.
Con "pattern h1 span" añadimos la imagen que debe ser de fondo transparente, en formato PNG. la idea es que al tratarse de una imagen transparente permitirá visualizar el color del texto dando la sensación que es un texto con imagen.
Lo principal que debemos tener en cuenta es que el color predominante de la imagen será el mismo color que añadiremos al fondo del bloque "pattern" para que no se visualice la imagen que no cubre la totalidad del texto.
Para entenderlo un poco mejor el siguiente ejemplo sería el mismo que el anterior pero en lugar de añadir color negro de fondo que es el color que contiene la imagen añadimos color gris.

Gem@ BLOG


Introduciendo la plantilla Noches de Luna


Plantilla Noches de luna



Aunque a algunas personas el otoño les produce cierta depresión, (no se si es tu caso) es una de mis estaciones favoritas, además de la primavera, ya que para mi, simboliza el cambio, la oportunidad para emprender nuevos proyectos, hacer una revisión de mi vida y corregir los fallos, y por supuesto, una nueva oportunidad para volver a empezar.



Pensando en el otoño y en usar una de las preciosas muñequitas de gorjuss, les tengo una nueva plantilla, que podrán usar en su blog de manera gratuita, siempre y cuando sigan algunas condiciones que tenemos que respetar, ya que hay material que es protegido (la muñequita de gorjuss) y la artista que la creó lo pide así.



Ideal para blogs personales o de literatura.



Características


  • Plantilla de 3 columnas



  • Espacio (Widget) creado con el fin de agregar un SlideShow



  • Link de comentarios en la sección del título



  • Fecha en forma de Calendario




Configuración de la Fecha 



Para que la fecha se muestre correctamente tienes que ir a Configuración►Formato y en la opción que dice Formato de cabecera de fecha seleccionar 01 noviembre 2010, que es la penúltima (una antes de la ultima) opción.





Configuración del Slideshow



He utilizado un maravilloso script (funciona perfectamente en todos los navegadores) para el SlideShow y que además es muy chiquito, por lo que no supone una gran carga para tu blog, mismo que encontré en Vagabundia y que fue creado por leigeber quien es un excelente desarrollador web, y que se caracteriza por crear tiny (pequeñitos) scripts que en términos de rendimiento para el blog es buenísimo.



Deberás pegar el siguiente código en el widget que aparece a tu derecha abajo,  (el título dice Memorias )  y es el penúltimo:




<div id="demowrapper">

  <div>

    <div class="sliderbutton"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCs0zMThh15HdM4dIdA2EwIhGfkbElOOYEyaJuBmkdox11RIUjG75xPRV8Kezt6qmSBU6olDFfo0KjksV9mLQNwOfxW6ozFwCV4e1fdC34CQdXN8R55mr7XhUkb_M2-NH0bfpe7clY_-g/s1600/IZQ.gif" onclick="slideshow.move(-1)" /></div>

    <div id="slideshow">

      <ul id="slides">

        <li><img src="URL_DE_TU_IMAGEN" /></li>

        <li><img src="URL_DE_TU_IMAGEN" /></li>

<li><img src="URL_DE_TU_IMAGEN" /></li>

        <!-- agregar todas las imágenes que quieras -->

      </ul>

    </div>

    <div class="sliderbutton"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiE0-gYsPVUkQNqEBQJ6RDhEDQdSEmD0ix__a-wOlyA2zBs-353kIoMPxa70DECxQnscpYE7d7Kp5CZ4847wdb3hJqit2vHKDqz3kKou0DjekXmFh6hJICB0NVGo_EjtwByESE8F_hKF8/s1600/DCHA.gif" onclick="slideshow.move(1)" /></div>

  </div>

    <!-- la paginación inferior -->

    <ul id="pagination" class="pagination">

    <li onclick="slideshow.pos(0)">1</li>

    <li onclick="slideshow.pos(1)">2</li>

<li onclick="slideshow.pos(2)">3</li>

    <!--  agregar con cada imagen con un numero correlativo -->

  </ul></div>

<script type="text/javascript">

  var slideshow=new TINY.fader.fade('slideshow',{ id:'slides', auto:4, resume:false, navid:'pagination', activeclass:'current', visible:true, position:0 });

</script>






Solamente deberás poner los enlaces de las imágenes que quieres mostrar, y repetir el código de la paginación cada vez que agregues una imagen, tal y como se indica en el código. Utiliza imágenes de 320 pixeles de ancho por 260 pixeles de alto.



Lo hice de ese modo para que tu decidas si ponerlo o no, si decides no hacerlo, y en lugar de ello quieres poner otro contenido en el espacio del widget, solo tienes que eliminar la imagen de fondo que esta en dicho espacio, y eso lo harás  así:



Paso 1. Ve a Diseño►edición de HTML de tu plantilla, luego pulsa CTRL F y escribe en el buscador .gatget





Paso 2. Una vez localizado, dentro de los estilos de esa clase, verás el siguiente código, elimínalo:



background: url(http://2.bp.blogspot.com/_yCA1gGtzYzo/TMriaOKXkqI

AAAAAAAAD8k/rmrLOrPYmuI/s800/ks.gif) no-repeat top center;



Paso 3. Pon vista previa para verificar que no aparezca y si todo luce bien guarda los cambios.






Recomendaciones

 

Trata de tener balanceado el contenido de la izquierda (contenido principal), con el contenido de la derecha (columnas laterales), no colocando demasiados posts  y poco contenido en las columnas o viceversa, esto debido al diseño, pues si haces lo contrario se verá un espacio en blanco al ir bajando para ver todo el contenido (espero explicarme), recuerda que puedes configurar cuantas entradas mostrar, yendo a Configuración►Formato y seleccionar el número de entradas a mostrar en la página principal.






Términos de Uso

Esta plantilla es edición especial, por lo que no puede ser redistribuida en otros blogs, pero si se puede referir para que sea bajada desde aquí.



No se puede alterar la esencia del diseño, específicamente la imagen del header-wrapper donde esta la muñequita de gorjuss, excepto, el interior del contenido este,  por ejemplo, cambiar los estilos de las imágenes de las entradas, colocar imágenes en el titulo de la columna lateral etc.



No puedes eliminar el crédito de la artista ©Suzanne Woolcott o agregar otros enlaces como referencia para que sea bajada desde tu blog o página, reitero.



Gracias por tu ayuda.



¿Te gusto? no dudes en comentar, ¿no te gusto? no dudes en criticar.




Atention Distributors: you may not redistribute this template, if you want to share it,  you may link back to this post, but do not link directly to the downloadable file. Thank you.



DEMOSTRACION                  DESCARGAR





Crédito por la muñequita del Header: ©Suzanne Woolcott.

Crear una pestaña de bienvenida para las Páginas de Facebook

Ahora que les presenté la página oficial de Ciudad Blogger en Facebook muchos me han preguntado cómo hacer para crear esas pestañas de bienvenida que hacen que las páginas de Facebook se vean más personalizadas.

El procedimiento no es nada complicado pero sí se requiere de un poco de tiempo, dependiendo qué tanto quieran ponerle a ella.
Primero, debemos tener una Página Oficial en Facebook o hacernos de una. Si aún no tienes una entonces entra en la sección de Crear páginas y elige la categoría a la que corresponde, pero no escojas las de Causa o Comunidad. Selecciona las opciones que corresponden, dale un nombre a tu página y click en Comenzar.

Página Facebook

Ahora vamos al sitio de la aplicación Static XFBML, le damos click en Permitir y luego en Agregar Static XFBML: Multiple Tab Builder.
Habiendo agregado esta aplicación vamos a nuestra página y damos click en Editar la página.

En el menú del lado izquierdo damos click en Aplicaciones.

Página Facebook

Ahora buscamos la aplicación Static XFBML: Multiple Tab Builder que acabamos de añadir, y damos click en Editar configuración.



Ahí puedes cambiarle le nombre a tu pestaña, por defecto se llama Welcome pero puedes nombrarla de otra forma.
Ahora ve a la página principal de tu página y nuevamente en el menú izquierdo busca el nombre de la pestaña nueva y da click en ella.


Es en esta parte donde diseñaremos la bienvenida; ahí le ponemos un título a lo que será la pestaña de inicio y agregamos el código HTML y/o FBML que queramos.
En esta sección cada quién podrá ponerle lo que desee, ya sea una imagen que tenga un mensaje de bienvenida, un texto, enlaces, widgets de Facebook, etc. Ya queda al gusto de cada quien.

Página Facebook


Aquí hay que tomar en cuenta que, aunque se aceptan los estilos básicos de CSS es muy probable que Internet Explorer no los interprete, pero un truquillo es agregar los estilos directo en el elemento que queremos editar. Es decir, en lugar de usar los estilos de esta forma:
<style>
.ejemplo {
color: #000000;
margin: 5px;
text-align: center;
}
</style>
Lo hacemos de esta otra:
<div style='color: #000000; margin: 5px; text-align: center;'>Aquí va a lo que le quieres dar formato</div>

Para los usuarios más avanzados pueden hacer uso de lenguaje FBML que es un lenguaje informático diseñado por y para Facebook.

También puedes agregar contenido para que lo vean solo los que no son fan, eso se agrega en el recuadro de abajo.

Bueno, ya habiendo creado la presentación guarda los cambios y ya tendrás la pestaña de bienvenida. Ahora vamos a hacer que esta sea la pestaña predeterminada para los que aún no son fans de la página.
Para ello vamos a Editar la página, en Gestionar permisos busca donde dice Pestaña de inicio predeterminada, y selecciona el nombre de la pestaña de bienvenida que recién creaste.



Habiendo hecho esto habremos terminado de crear una pestaña de bienvenida para la página de Facebook.

Página de Ciudad Blogger en Facebook