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.

Posts relacionados

• Instala Fbshare para compartir posts en Facebook
• Comparte tus posts en Facebook promocionándolos con RSS Grafitti
• Promocionar tu blog en Facebook

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

Posts relacionados

• Sencilla opción para proteger los enlaces del diseñador en Temas WordPress
• Aprende a crear tus propios temas WordPress
• 10 lindos temas estilo tumblog para tu blog de WordPress

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.

Posts relacionados

• Aprende a crear tus propios temas WordPress
• Lubith: Generador de Temas WordPress
• 10 lindos temas estilo tumblog para tu blog de WordPress

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“.

Posts relacionados

• Latte: Plantilla premium para Blogger
• Cupcake: Plantilla Blogger para blogs de comida
• Blogger Buddy para Vista: Postea desde tu escritorio

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%;}

Posts relacionados

• Menús CSS desplegables sin javascript
• 9 sitios para descargar menús CSS
• CSS-sprit.es: Un generador de CSS sprites

La herramienta – muy al estilo del generador de pattercooler – ofrece más de 600 mil patterns tileables y 1 millón de paletas de color para diseñar tu fondo a tu pinta, en tres simples pasos: (1) ingresar con tu cuenta Twitter, (2) elegir el patrón y los colores de tu preferencia y (3) guardar los cambios. Perfectamente, también se podría utilizar para decorar tu web o blog.

Vía | TensaiWeb

Posts relacionados

• Free Twitter Designer: aplicación flash para crear fondos para Twitter
• Crear un avatar navideño para Twitter con Twixenate
• 13 herramientas para personalizar tu fondo en Twitter

Soy de esas personas que no se pierden las recopilaciones de íconos sociales, aunque no los use en el mismo momento, o aunque no los use nunca. Las grandes recopilaciones nos dan la posibilidad de mirar y ahorrar mucho tiempo cuando buscamos íconos.

Free Social Icons compila una gran cantidad de íconos de Twitter y social media: en total, más de 100 packs de íconos de calidad para diseñadores y bloggers, entre los cuales se incluyen paquetes exclusivos. Y se va actualizando conforme van apareciendo nuevos trabajos…

Vía| 2.0 Webmania

Posts relacionados

• IconPot: Más de 2500 íconos gratuitos
• Iconos web 2.0 estilo origami
• Iconos Navideños creativos

Hace un par de días, al recibir un mail masivo del staff, volví a entrar al site: me sorprendí  los detalles de las estadísticas, y con los cambios que habían hecho para mejorar la integración con redes sociales.

¿Qué tiene de bueno Koego?

En dos palabras: estadísticas exhaustivas. Entega:

• Detalles “desmenuzados” de los visitantes: tiempo de permanencia, retorno, páginas vistas, país de procedencia, idioma, fuentes de tráfico, sistema operativo, navegador, resolución de pantalla, horas “peak”, días de la semanas en que más tráfico recibes y keywords que más visitas atraen.
• Un puntaje “ego” (de ahí el nombre “koego”) cuya fórmula, del 1 al 100, estima el crecimiento de tu blog en base al número de visitas, número de comentarios por día y posts populares.

Además, se integra con Twitter y FriendFeed. En el caso de Twitter, puedes ver un reporte de toda tu actividad (número de tweets por día, seguidores, personas a las que sigues, usuarios más mencionados y hashtags más usados), y averiguar qué tantos retweets, replies y menciones recibes; y, en el caso de FriendFeed muestra las actualizaciones más comentadas y votadas.

Koego está en fase beta abierta. La única posible desventaja, es que está sólo en inglés. Sin embargo, ello quizás no sea un gran problema, porque el sitio es realmente amigable (colorido y bien organizado) y fácil de usar. No me atrevo a reemplazar totalmente Analytics por Koego (al menos por ahora), pero no cabe duda de que puede llegar a ser un buen sustituto.

Posts relacionados

• Going Up!: Un completo sistema de estadísticas para tu sitio web
• Analycator: Haz públicas tus estadísticas de Analytics

El resultado es simple, estético, muy cercano a los botones que puedes crear en Photoshop. Algunos ejemplos:

Sorprendente que puedas hacer eso con un generador, ¿no?

Vía | Appuseful

Posts relacionados

• Iconfu: Crea tus propios mini-iconos online
• TwitterButtons: botones gratuitos de Twitter
• Crear un menú de botones con una sola imagen

No son una técnica nueva ni poco usada -especialmente en los sitios con alto tráfico-, pero su implementación requiere un manejo más bien avanzado de CSS. CSS-sprit.es, sin embargo, lo hace más fácil: subimos el grupo de imágenes, y automáticamente entrega como output (en formato PNG o GIF con transparencia o JPG sin transparencia) una gran imagen que contiene todas las anteriores, junto a los correspondientes códigos CSS y HTML con la posición de cada imagen “pequeña”.

Es compatible con la mayoría de los navegadores, y también es útil para crear imágenes con efecto roll-over en sepia o escala de grises.

Visto en Makeuseof

Posts relacionados

• Pure CSS Menu: Generador de menús desplegables sin javascript
• Online Logo Maker: otro generador de logos
• Menús CSS desplegables sin javascript