20 Round ribbon social media icons

20 Round ribbon social media icons

Round ribbon social media icons es una colección de íconos en forma de listones, gratuitos, de las distintas redes sociales.

Tenemos la posibilidad de descargar los íconos en un formato .png, listos para utilizar o también podemos descargarlos en formatos editables, como .psd (editable en Photoshop) o .ai (editable en Illustrator).

CARACTERÍSTICAS

Pack de 20 íconos .
Autor : S-icons
Formato: PNG, PSD, AI.
Tamaños: 24×24, 32×32, 48×48, 64×64, 128×128, 256×256, 512×512 px.

Descargar

Fuentes tipográficas septiembre 2015

¿Qué tal les ha ido la semana? Ya casi termina, pero espero que todo haya ido bien. Y antes que sea fin de semana, quiero dejarles un pack de 10 fuentes tipográficas del mes de septiembre. Son muy variadas y pueden utilizarlas para muchísimos diseños.

Una vez descargadas las fuentes, para instalarlas sólo sigue estos sencillos pasos:

» Si tienes Windows 7 u 8, simplemente da clic derecho sobre una fuente y buscas la opción Instalar del menú contextual.
» Si tienes Windows XP, copiamos la fuente tipográfica y vamos a Mi PC, Disco C, Windows, Fonts y pegamos el archivo de la fuente.

Descargar

Emoticones de Facebook en los comentarios de Blogger

Hola. ¿Cómo estuvo el día? Espero que muy bien. Sean bienvenidos a un nuevo post. Bueno, hoy les traigo un tutorial que seguro a más de uno le va a gustar. Se trata de cómo hacer para que cuando nos dejen un comentario, nuestros lectores puedan adornar sus comentarios con emoticones, pero con los que vemos en facebook. Es muy fácil de implementar. Y es válido en los comentarios anidados de Blogger.

( ↪ Ver DEMO)

Bueno, empecemos.

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos </body> y justo encima de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

3.§ Ahora vamos a colocar la imagen que le indicará a nuestros lectores cómo pueden colocar un emoticón en su comentario. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos <p><data:blogCommentMessage/></p>. En la plantilla veremos que hay cuatro líneas de código iguales. Buscaremos la segunda y debajo, pegaremos este código:

<p style=' border:0px;margin:0px 10px 0px 100px; '><img src='URL-IMAGEN'/></p>

Donde dice URL-IMAGEN, lo reemplazaremos por una de estas dos imágenes. La primera es para lo que tienen en su blog un fondo blanco o claro; la segunda es para los que tienen en su blog un fondo negro u obscuro:

» Imagen para blog con fondo claro:

http://1.bp.blogspot.com/-fhfGcBKcswE/Vd5NH8CGgMI/AAAAAAAACWc/Qni7BYbiewU/s1600/diyva_jessica_motic_fondclaro.png

» Imagen para blog con fondo claro:

http://2.bp.blogspot.com/-DKBCpbjkq70/Vd5NIMvfhAI/AAAAAAAACWg/TDEztsf8oRo/s1600/diyva_jessica_motic_fondnegro.png

Para centrarlas o ubicarlas a la posición que queremos, bastará con cambiar los valores margin: 0px 10px 0px 100px.

4.§ Nuevamente, damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos nuevamente esta línea de código:
<p><data:blogCommentMessage/></p>.
Esta vez buscaremos la cuarta y debajo pegaremos lo siguiente:

<p style=' border:0px;margin:0px 10px 0px 200px; '><img src='URL-IMAGEN'/></p>

Reemplazamos URL-IMAGEN por la misma imagen que utilizamos en el paso anterior.

5.§ Ahora, para que los emoticones no aparezcan debajo de la caja de comentarios después de dejar el primer comentario, haremos lo siguiente. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos la siguiente línea:

document.getElementById(domId).insertBefore(replybox, null);

Y la reemplazaremos por esta línea de código:

document.getElementById(domId).insertBefore(replybox.parentNode, null);

6.§ Damos clic a Guardar y eso es todo. Espero que les haya gustado el tutorial. Pueden dejar sus comentarios o alguna duda que tengan. Que pasen un buen fin de semana.

Por Jéssica YK el 27.8.15 4 opinaron Compartir en redes: