Chica Blogger

Seguro que has visto en algunas entradas de blogs de noticias u otros tipos, que en la esquina del blog está el botón de Facebook que dice “Compartir“. ¿Lo quieres poner en tu blog? Pues este es el lugar correcto para aprender. Veamos este blog de prueba. ¿Puedes ver el enlace compartir? Veamos como se hace.

Hay 3 estilos para este botón.

Primer estilo

El primero es “button”, este botón sólo presenta la imagen compartir sin contar cuantas veces se ha compartido la entrada. Para colocarlo vamos al editor HTML de blogger a expandir artilugios y buscamos:

[Podemos buscar mas fácil poniendo presionando Ctrl + F]

<div class='post-body entry-content'>

Y Justo debajo de eso ponemos:

<b>
<div style='float:right;padding:5px'>
<a name="fb_share" href="http://www.facebook.com/sharer.php">Compartir</a>
</div>
</b>

Y Guardamos.

Segundo estilo

Ahora para poner el estilo numero 2 este es el mismo botón compartir pero presenta cuántas veces ha sido compartido. Buscamos:

<div class=’post-body entry-content’>

Y Justo debajo ponemos:

<b>
<div style='float:right;padding:5px'>
<a href='http://www.facebook.com/sharer.php' name='fb_share'>Compartir</a>
</div>
</b>

Tercer estilo

O, para el tercer estilo en vez de poner el código de arriba ponemos éste:

<b>
<div style='float:right;padding:5px'>
<a href='http://www.facebook.com/sharer.php' name='fb_share'>Compartir</a>
</div>
</b>

Este presentará la caja de las veces que se ha compartido más grande.

Espero que esto les haya servido, deje un comentario para saber como le ha ido.

Si lo que buscas es crear tu propio tema WordPress, pero tienes cero conocimiento de HTML, CSS y PHP, Lubith es una buena alternativa. Se trata de un simple e intuitivo generador de temas WP online gratuito, bastante básico pero útil, que presenta la siguientes características:

• Trabaja en base al tema “Twenty Ten” que viene por defecto en WordPress.
• No necesitas tocar ni una sola línea de código.
• Interfaz amigable con el usuario. En general, sólo es cosa de arrastrar, soltar y mover elementos de un lado a otro.
• Para cada elemento, puedes cambiar el color de fondo y el color de texto.
• Puedes cargar imágenes de fondo desde tu computador.
• Puedes elegir añadir o remover los siguientes elementos de la plantilla: Logo, título, descripción, menú y sidebars.
• Permite hacer cambios básicos en el texto: una docena de fuentes, alineación del texto, etc.
• Guarda tu tema en el servidor hasta por siete días (necesita registro), y te permite probarlo antes de descargar.

Conclusión

Aunque resulta muy útil, las opciones de Lubith son aún limitadas. Sería genial que al menos ofreciera las opciones de añadir bordes a los disntintos elementos, algunas opciones CSS 3, más fuentes y la integración de más elementos (columnas inferiores o bottombar, por ejemplo). Sin embargo, estoy ansiosa por ver qué novedades incorporará esta aplicación en un futuro próximo.

Por ahora, el resultado de tu theme en Lubith dependerá de qué tan creativo seas,  aunque puede ser una buena base para realizar retoques posteriores.

Vía | Nierox

Una de las razones para diseñar temas WordPress gratuitos, o bien comprar enlaces en temas que luego serán distribuidos gratuitamente es obtener enlaces entrantes. Para proteger los créditos, encriptar los enlaces del footer parece ser un mal necesario.

Encriptación PHP Base64

Tomando como referencia algunos códigos encriptados, me di cuenta de que tenían una codificación base64.

Cómo realizar la encriptación:

1. Usa un encriptador base64 online como el de Motobit.

2. Reemplaza el output en el siguiente código:

1
2
3
4

<?php
$str = 'OUTPUT';
echo base64_decode($str);
?>

Es todo. Puedes ingresar parte de tu footer.php (enlaces o zonas que quieras proteger), o tu footer.php completo, con cuidado y previo respaldo.

Conclusiones:

• No sé si sea el mejor método, pero es sencillo y gratuito (en internet ofrecen software interesante, pero hay que pagar).
• El método sirve tanto para encriptar como para desencriptar códigos base64.

Encriptar enlaces nunca da seguridad de que el usuario del tema no se las ingenie de alguna manera para

• removerlos, aunque suene obvio.

De vuelta al ruedo, presento Twilight, una adaptación para Blogger de un tema WordPress diseñado por Far from Fearless. Como se puede apreciar, se trata de una plantilla basada en la Saga Crepúsculo de Stephenie Meyer; por lo tanto, es ideal para los fanáticos de los libros y/o de la película, o también para blogs de literatura.

Características:

• 2 columnas de ancho fijo
• Menú superior que muestra automáticamente tus páginas
• Probada en las últimas versiones de IE, Chrome y Firefox
• Imagen superior customizable

La imagen superior se cambia buscando el siguiente código en Diseño/Edición de HTML:

<div class='twilight' id='brand'/>

En dicho código se puede cambiar la palabra “twilight” por “newmoon” o “eclipse“.

Jebú me comentaba sobre Pure CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko Jovanovic.

Aunque el sitio está en inglés, es intuitivo y simple de usar, especialmente para quienes tienen pocos conocimientos de CSS y HTML. Puedes elegir una plantilla, cambiar los bordes, colores, estilo de fuente, configurar enlaces con pocos clicks y descargar luego el paquete zip hacia tu computador.

Cómo instalar un menú (en Blogger)

El fichero “purecssmenu-com.zip” contiene un archivo HTML y una carpeta con imágenes. Su intalación no es complicada:

1. Abrir el archivo purecssmenu.html. Éste se abre en una nueva pestaña de tu navegador.

2. Una vez abierta la pestaña, hacer click sobre ella con el botón derecho de tu mouse, y seleccionar la opción “Ver código fuente de la página“. Esos son los correspondientes códigos a ser pegados en la plantilla.

3. El código CSS comprendido entre las etiquetas <style> y </style> (excluidas éstas), debe ser pegado en la Edición de HTML de la plantilla, justo antes de ]]></b:skin>. Guardar los cambios.

4. El código HTML comprendido entre los comentarios <!– Start PureCSSMenu.com MENU –> y <!– End PureCSSMenu.com MENU –> debe ser copiado antes o después del cierre del div ‘header-wrapper‘ (en la plantilla Mínima de Blogger), reemplazando las dobles comillas por comillas simples (‘). Una manera más simple de hacerlo, es creando un nuevo gadget de HTML/Javascript desde Diseño /Elementos de la página, en la sección llamada “crosscol-wrapper” que está justo bajo la cabecera y copypasteando el código allí. Esto último facilita su edición en cualquier momento.

5. Como últimos pasos, queda hospedar en tu hosting las imágenes contenidas en la carpeta images y reemplazar los enlaces en el CSS, justo donde se indica; y estilizar un poco el menú para integrarlo a la plantilla. Para ello, puedes modificar totalmente el CSS. En mi plantilla de pruebas, le di al contenedor #crosscol-wrapper un ancho de 100%, usando el mismo color del fondo que tenía originalmente mi menú:

#crosscol-wrapper { background:#E62E6B; width: 100%;}