Diversas y Variadas (Ayuda Blogger): 2015

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 [+/-]

<script type='text/javascript'>
//Emoticones facebook en blogger
//diversas y variadas
// <![CDATA[
function emoticonComentario() {

if(!document.getElementById) {return;} // no soportado

bodyText = document.getElementById('comments');

cualTexto = bodyText.innerHTML;

// :)
cualTexto = cualTexto.replace(/:\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3tpyEiShNpSGvUmEBUSQF1F_EuCIS0l5GSp5qE1T0THUIf2b9YtIs-lKxuWdaBwhFJFo7OyOVzzUGnNRBKjCYuxA_D6A1KA1uDDmxPibFit2Y9mFTl-g_MJBBJ_142FSYNQ88RIJEB_u/s1600/1.png" />');

// :D
cualTexto = cualTexto.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCqONPaqX5SlfydRuPrn9_HybArE8U-AevchQ3hnp4U-npbnXlFAvAJd8OeXLg8ESZLn6pP_3a0Rif0l1PPnN7JlVal6aUpWLxkvG8IkcByF2lNBtB9OxYsgZ32KexVKbX50-WfnyEZqn/s1600/2.png" />');

// ;)
cualTexto = cualTexto.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3MDykv0AdgGYONM_6Mh3z8nWNR2Gp0cpOhKUkJgXw7KxaQB4hbEBQiZ2EKz4JE6VmgnOY4KuhLiR3gIrKCpx62LwOQ8pn3K8NnunDKFEAe_I4_o4DbAu1DXN4r-xhip-DZrP0eZ3-UGO/s1600/3.png" />');

// A_A
cualTexto = cualTexto.replace(/A_A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNTFywWuhbILCqU7eY8CguQjwDZ_tmBWesaOol2jPJiCr88cGnh4FKsDvjq23XEjHC4cMviZUfS1sQ_TzRWqZ9QCWfPtV_7FPzNp-e1dM_IxOlsZdmFk0Vr6RToNQf5rM_4XRAQuiDWBlW/s1600/4.png" />');

// XD
cualTexto = cualTexto.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBQApxkqIMJAzGJUHZlccAK3j0nsbs7iVWKAc5LDuBnPx-Ya7Pd4uIn-uvU-hm-BYGK9uLcWK5_tKWsuBO19r37kEMkw2sqvFyoJCGyCDIQns_VIasQSGqKehgyeTU702YKksTA4rNjolk/s1600/5.png" />');

// :3
cualTexto = cualTexto.replace(/:3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiIvp60lCayEB0QPK3JJziyGklOERscjCb3QRkrt1sGO3ZlT91OYroflPT04zYPpZmDiFvTgCBj07Tu5LTsqtYkYiDj1UNRqT-vnkFvbgcvef7b3gjfD8QwW64WnBKQplB6uM8FHq8PA_I/s1600/6.png" />');

// X(
cualTexto = cualTexto.replace(/X\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8pFolmndHn77lKL_gFUXlA7Jlt9jx2g4fptz_4-yQQ_pbT8BHVXwxblvxJMk83Vv-2HpfGFCYiKjN2DfRmDSVj0Llt4pUhvlECWwHri1FYdswgDRFr1PmptP1Vq5WcOzGDhtncEoclTKX/s1600/7.png" />');

// :(
cualTexto = cualTexto.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKx_V5Vdr7Tux-QZv59-M3EQmRanzKxcuGpLaR2WABCyqH5SplUnQ2MkyD7FwIUCpHtBLziI9EbceOvJw_XvjaCjjCO4AuYkzwq_xusm8C6X38HYIP0FlgDu_FTQtYp4GQguhIcDGUo74o/s1600/8.png" />');

// :'(
cualTexto = cualTexto.replace(/:'\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTozBz_lnP2mpUxnofKNfKGATkthv0fjcbsJS6xUTUcUPcenR3XBpcgMSWeinVqgjUD-o52U3B-AbovC-5g01wy-x_SGRg0KwF43T3YWjHPfR0tZPUvYqZxlHOw8E7yT-9tObtpltjL0R/s1600/9.png" />');

// -_-
cualTexto = cualTexto.replace(/\-_-/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsjeF8AAPID_gUPsDDTb1_aTsyGD8Ah6fTu5Bv-g37w6YsHKVJBWOUa6dYVj1GjEZ5-Pp5cbAv7NWyOPGkSwUBrik1vK8NZ3XaZvaBH6SZ0Q8Zx-MAvqos_VCIrTQSZxj_0dz2TKABeFZ/s1600/10.png" />');

// :-
cualTexto = cualTexto.replace(/:\-/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPfG36omtjAWnXJOMC3ezpC1MNIVNam4Iw7b_Bgl3fcLoQn8JXYti2LwuG6qBXP5O36GF2FRlqE3UrXsT8__s5LzvwiAVjFnflsMkeiUUMvJFBlG_guOPKMYeDISEkizTdhGT7yly_PsM/s1600/11.png" />');

// 3:
cualTexto = cualTexto.replace(/3:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkrJ0-aGg-eT737BXocMKtYn9nFJ3PDVhCOakFykhtVt_qSyTcYMXmtRqtc8uzQzMwqiY6dsMl0FEl2RfhrzX1QHWsfl_5jU6PCv4XLzsniurcrs5JrZKO73iNcYqW50CXsURRWGfIZdJQ/s1600/12.png" />');

// O:
cualTexto = cualTexto.replace(/O:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVT5lhSI3xaGh8hQjKUxiXhG47WPUjVzSmosK0UTsE7XrwVkjI1LiiMcGVmt0m4CI9SiEK8poy4b7xpSc1J2YwjMjj6-De6-IFv5llNz0R9De4FBFwmlp87UhQZobxRaTSCBBTYTOaW2_v/s1600/13.png" />');

// :*
cualTexto = cualTexto.replace(/:\*/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglW9rg1OJrb7hpsRwfYB7A27hC0xy292Pgfsl9U7XDpbn43ZFMeU7P3bSeKnXk43F3RYqITLry3iblthJADkbcSWMWOXownX7MiHhDvcyUteTg6tifRaDtECZooxC0UD0xClxdHSTuBRlF/s1600/14.png" />');

// -3
cualTexto = cualTexto.replace(/\-3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbOTVBCRhuMkTHp8dNEz6ZwK-BsyiBIzpMCssPcs49lIk_9B0sDDMLZplKx2flYnrJJG-OQzmsnEAwb_P11tf1Sgca9ZF8pL1q9fme2jSHIsMUj4Dig16UorNzGVRvzfE-2eSfujFfxpp/s1600/15.png" />');

// :v
cualTexto = cualTexto.replace(/\:v/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikhKvvrhZjJXWFqTH01PfZF2IeVnDkicjMQWjbjehRHVWEhC6ihHM4D4MZlJ1-L9AVAHcuDabh4tV8lx7JUkEUSIS5UUp7f3NPSh-Cg3jSe4JmjZq1D4zSQ01HUJp491NdUnkfyHoayPRa/s1600/16.png" />');

// :o
cualTexto = cualTexto.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb16894biAfsUIbLG9llJYFZzPr9CXaIats5pMkNhOeHyiXlGYmonMc-uCZzZinNEpYsVlgs3PvRkNjY7zSSrvpWrP8fLw9MBNRA2UjvSEKLdKvNqHgAik4jnoSq7iPv_t3AdaltGElwEk/s1600/17.png" />');

// 8-)
cualTexto = cualTexto.replace(/8-\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinrtz1EL4Kq28kS48PEbMlirWcRUuHSpLzB1l9F-Bcakpp8tl4EK-qgXbI8afk9i88EmmDIZPdb0saVfEYPGmXliDPEEZpImE60SyhE9tYuyllzkv3is5FRYY-s9szIYzSCAQl3fL061c7/s1600/18.png" />');

// 8-|
cualTexto = cualTexto.replace(/8-\|/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoYBPOSGcOLfx6koGcF9LFAy4aShx2PrxjGTUhBz2QXMGPInS2oChPtcS2uFSsdbdfWAqaXAW4cFAIzFGcib8v9dSSW7IE6wkuDoSKUi0lLV5JXEBlxT98dktiHB1oWzZsfmU-HpasPxwf/s1600/19.png" />');

// :P
cualTexto = cualTexto.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7S0BqaMuw-pjEhlFmRrdub_PDB9vJCIITtojqyGOAunaUgLGZJaeqapzLkRN815GXC7Un5IOEXfpGU34afFQI516lLvOXeZUwNJdqXADQWTuk5J6fd2fXMnO73Vo6DIw5gceNslOz4-W/s1600/20.png" />');

// O.o
cualTexto = cualTexto.replace(/\O.o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7n3XZlupmRGP9vH2Km5zExP8mMzvJfud1Hfa_8twZrbgcTRcCoP1Ecgwq6bytXsQWJwD1T1k2o9-2NUP6LaUNChN4nSKV6UzOCR-mg0illzkyc1tGNs8BDKYRdTEhfYjiWUsqAO3nc9m/s1600/21.png" />');

bodyText.innerHTML = cualTexto;
}
// ]]>
</script>
<script type='text/javascript'>
emoticonComentario();
</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:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlXyLb1ghPp74hyphenhyphenfldpDdZluFs0bdqqn9FmCNnULCgxscAtWJMrDkIAjFNNyobSOwL5QD9sbAqIyGQJvYUuoItASzlZ39DAC__C2PdDbuDCB1q-uBfh_t4pmbAf9O3zsifAorfX5ytSCjp/s1600/diyva_jessica_motic_fondclaro.png

» Imagen para blog con fondo claro:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jMoIHQqeSA1rMzz1kI9TIMk3gF2jSMJRZTiz3yG2c3idUiSSdr3UhYVkv9UcddMme9pj2BnVq115blQEdedQJwRR_yVo0eTBMP6By7xyHD75VMbP0citUvoudbpHPvYN3hPHHO6SK2mR/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.

[+/-]

5 recomendaciones para mantener tu blog seguro

Ya estamos a mitad de semana y hoy vamos a ver algunos tips o recomendaciones para mantener nuestro blog seguro.

tips, blog, blogger, security, seguro, consejos

Muchos aman sus blogs y se esfuerzan por sacar contenido de calidad, en mantenerlo estéticamente agradable; a veces dedican varias horas para escribir algún post que saben que puede servir de ayuda a muchas personas. Y qué triste sería que por algún descuido perdamos el acceso a nuestro blog. Hoy traigo algunas recomendaciones generales que pueden ser de ayuda.

Cambia la contraseña periódicamente
Decide cada cuánto tiempo vas a cambiar la contraseña de acceso a tu cuenta y házlo. No es necesario que inventes una nueva contraseña, bastará con cambiar los números si tu contraseña tiene números o agregarle más letras o cambiar una letra por otra. Recuerda que debe ser una contraseña que puedas recordar.

Utiliza diferentes cuentas de correo
Si vas a dar tu dirección de correo para que te alguno de tus lectores te envíe información, imágenes, etc., trata de darle un e-mail que sea distinto al que utilizas para acceder a tu blog. Claro, todo esto cambia si tu lector es de alguien de confianza.

Utiliza la opción de añadir autores
Blogger nos permite añadir autores a nuestro blog. Esta opción se utiliza comunmente en blogs compartidos, donde escriben varias personas. Pero también puedes utilizarla para agregar una dirección de correo alternativa a la principal y si alguna vez olvidas tus datos de acceso, puedes entrar con tu otra cuenta.

Evita dar clic en links sospechosos
Como escritores de un blog, apreciamos mucho los comentarios de nuestros lectores y nos alegra leerlos porque sabemos que lo que escribimos ha llegado a alguien. Pero también hay comentaristas que dejan comentarios spam o a veces con enlaces que pueden contener algún tipo de virus.

Siempre cerrar sesión
Si no utilizas una computadora propia sino que escribes desde un lugar público, no olvides cerrar sesión. También, antes de ingresar los datos de acceso a tu cuenta de Blogger en una computadora ajena, fíjate que la PC tenga instalada algún antivirus actualizado.

Estas recomendaciones son básicas, pero te ayudarán a mantener tu blog seguro.

Y tú ¿tienes algún consejo adicional?

[+/-]

Canva » crea collages impresionantes online

[+/-]

Pack de marcos en formato PNG

[+/-]

Menú horizontal animado con jQuery

Espero que la semana les esté yendo muy bien a todos. Hoy les traigo un tutorial que seguro le va a resultar muy útil a más de uno. Se trata de un menú sencillo de implementar.

jQuery, menu, animated, blog, web, blogger

Este menú horizontal tienen un efecto animado al pasar el cursor sobre cada enlace y este efecto se logra gracias a la implementación de la librería jQuery.

↪DEMO
(Pasar el cursor sobre el menú)

Vamos a empezar con el tutorial:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Ahorar agregaremos la librería jQuery. Si es que ya la tenemos en nuestra plantilla, no es necesario agregarla nuevamente y podemos saltarnos al paso 3.§ del tutorial.

Si no tenemos la librería, la agregaremos del siguiente modo. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos ]]></b:skin> y justo debajo pegaremos el siguiente script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

3.§ Debajo del script anterior (de la librería jQuery), pegaremos este otro script:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#topnav li").prepend("<span></span>");
$("#topnav li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);
});
$("#topnav li").hover(function() {
$(this).find("span").stop().animate({marginTop: "-40"}, 250);
} , function() {$(this).find("span").stop().animate({marginTop: "0"}, 250);});
});
//]]>
</script>

4.§ Ahora debajo de los scripts anteriores, pegaremos los estilos CSS, donde podremos cambiar colores, tamaño de fuente, tipo de fuente, etc. :

<style type='text/css'>
ul#topnav {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#topnav li {
float: left;
height: 40px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
}
ul#topnav a, ul#topnav span {
clear: both;
height: 20px;
line-height: 20px;
padding: 10px 15px;
float: left;
background: #000; /* color fondo menú */
font-size: 16px; /* tamaño de la fuente */
color: #fff; /* color de la fuente */
border-right: 1px solid #fff; /* grosor, tipo y color de borde */
font-family: Arial; /* fuente tipográfica */
}
ul#topnav li a:hover {
background: #9999cc; /* color fondo menú al pasar el cursor */
color: #000; /* color de la fuente al pasar el cursor */
}
</style>

5.§ Guardamos la plantilla.

6.§ Ahora vamos a Diseño - Añadir un gadget - HTML/Javascript. Agrearemos las siguientes líneas HTML con los enlaces de nuestro menú.

<ul id='topnav'>
<li><a href="AQUI-URL"> Inicio </a></li>
<li><a href="AQUI-URL"> Menú-1 </a></li>
<li><a href="AQUI-URL"> Menú-2 </a></li>
<li><a href="AQUI-URL"> Menú-3 </a></li>
<li><a href="AQUI-URL"> Menú-4 </a></li>
</ul>

7.§ Damos clic en Guardar y arrastramos el gadget debajo de la cabecera de nuestro blog y damos clic en Guardar disposición.

¿Te gustó el menú?
También te pueden ser útiles estos menús

[+/-]

Sakura Icons

[+/-]

Foto de perfil con efecto hover y botones a redes sociales

¿Cómo va la semana? Espero que bien. Bueno, pues hoy vengo con un nuevo tutorial para nuestros blogs. Visitando diversos blogs, he notado que muchos colocan su foto en la sidebar (barra lateral) del blog. Así que hoy traigo un tutorial para darle un efecto muy bonito a las fotos de perfil que colocamos en la sidebar.

HTML, CSS, tutorial, blogger, efecto hover, effect, foto, perfil, redes sociales

Ahora, ¿de qué trata el efecto?. Es muy simple y útil. Al pasar el cursor sobre la foto, se hará un efecto como si alguien volteara la foto y viera el reverso. En ese reverso podemos colocar información extra ( como nuestro nombre, alguna información sobre nosotros, nuestro país, edad, etc.) y también podemos colocar enlaces a nuestras redes sociales. Yo he colocado cuatro íconos a redes, pero pueden cambiar los íconos por otros y/o agregar más redes.

Aquí pueden ver la demo:

↪DEMO
(Pasar el cursor sobre la imagen)

Ahora a empezar con el tutorial:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos ]]></b:skin> y justo debajo pegaremos los siguientes estilos CSS:

<style type='text/css'>
.ch-item {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: default;
height: 100%;
position: relative;
width: 100%;
}
.ch-info-wrap {
background: transparent url(/URL/index.html) repeat scroll 0 0 ;
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 3px rgba(115, 114, 23, 0.8) inset;
height: 180px;
left: 20px;
perspective: 800px;
position: absolute;
top: 20px;
transition: all 0.4s ease-in-out 0s;
width: 180px;
}
.ch-info {
border-radius: 50% 50% 50% 50%;
height: 180px;
position: absolute;
transform-style: preserve-3d;
transition: all 0.4s ease-in-out 0s;
width: 180px;
}
.ch-info > div {
backface-visibility: hidden;
background-position: center center;
border-radius: 50% 50% 50% 50%;
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.ch-info .ch-info-back {
background: none repeat scroll 0 0 #ffffff;
transform: rotate3d(0, 1, 0, 180deg);
}
.ch-img-1 {
background-image: url("AQUI-URL-FOTO-PERFIL");
}
.ch-info h3 {
color: #000000;
font-family: 'Open Sans',Arial,sans-serif;
font-size: 14px;
height: 22px;
letter-spacing: 2px;
margin: 0 15px;
padding: 30px 0 0;
text-shadow: 0 0 1px #ffffff, 0 1px 2px rgba(0, 0, 0, 0.3);
text-transform: uppercase;
}
.ch-info p {
border-top: 1px solid rgba(0, 0, 0, 0.5);
color: #000000;
font-size: 12px;
font-style: italic;
margin: 0 30px;
padding: 5px 3px 10px 3px;
}

.ch-item:hover .ch-info-wrap {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 3px rgba(115, 114, 23, 0.8) inset;
}
.ch-item:hover .ch-info {
transform: rotate3d(0, 1, 0, -180deg);
}
.ch-grid {
display: block;
list-style: none outside none;
margin: 20px 0 0;
padding: 0;
text-align: center;
width: 100%;
}
.ch-grid:after, .ch-item:before {
content: "";
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
display: inline-block;
height: 220px;
margin: 20px;
width: 220px;
}
</style>

» Donde dice AQUI-URL-FOTO-PERFIL colocaremos la url de nuestra foto, previamente alojada. Debemos tener en consideración que la foto debe tener como mínimo un tamaño de 220x220px.

3.§ Damos a Guardar.

4.§ Ahora vamos a Diseño - Añadir un gadget - HTML/Javascript. Pegaremos el siguiente código HTML:

<ul class='ch-grid'>
<li>
<div class='ch-item ch-img-1'>
<div class='ch-info-wrap'>
<div class='ch-info'>
<div class='ch-info-front ch-img-1'></div>
<div class='ch-info-back'>
<h3>NOMBRE-AUTOR-BLOG</h3>
<p>DESCRIPCIÓN</p><a href="AQUI-ENLACE-TWITTER" target="_blank"><img title="Sígueme en Twitter" widht="28" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4J4rT7cx6IYcjHrTnc1u7DpTrjOfbUh0ndEK8a8g-zBfM_vtk8rxNa_YHvz964xR_Qupb5o8q7q_eAh1JuYLzTneUb8-Byr-8NMA0Jw2su0z-lfg-pCeiikjN1OQUAOOtHc3Gwg96_to/s1600/Twitter-diyvapng.png" /></a><a href="AQUI-ENLACE-YOUTUBE" target="_blank"><img title="Estoy en YouTube" widht="28" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxV7shCD5AMrAoNMBeI6hNMvpPmEjbFKLTnwlQNYccFeuutf9YjxbaGRKU2fRMFoi672VjCOpcy7269cS2QLAbWdlRsKjQGir-oSZVZDMnkmObCQ2jWllKzJb4J16jex1zUZtN_yHIKc/s1600/Youtube-diyva.png" /></a><a href="AQUI-ENLACE-FACEBOOK" target="_blank"><img title="Sígueme en Facebook" widht="28" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIXKTDAG5cnDgpOX73dlEQbBOUG2yslAItNAoChVPqLtDWZWdOlvzvFTn3YvLd2M-WbDAb7bUCMc-jpwWOvf3UatwBZdAocpSTBiqQhwEJtFCfwKkSYL6-uYauB76Lc74lmcZJAKAWuW0/s1600/Facebook-diyva.png" /></a><a href="AQUI-ENLACE-PINTEREST" target="_blank"><img title="Sígueme en Pinterest" widht="28" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUt1VdZL5ptVkN_2q75hNA_ea313bw5SAyQ9q0XjtVJFXZQ6oFnjsB6yfrKJXx_d1GlE29_cAu2BSFSvKRPOBRH6ROUmBwzWlDD8Ze6TJBHLLb_X-TEZfdXW0ETUVjS56djHwJ-ZJyQLM/s1600/Pinterest-diyva.png" /></a>
</div>
</div>
</div>
</div>
</li>
</ul>

» Reemplazamos las URL por las distintas URL de nuestras redes sociales. Podemos agregar más o quitar algunas. Damos a Guardar.
Si tienes alguna duda, puedes hacerla en los comentarios.

¿Te gustó el efecto?

Visto en : Tympanus

[+/-]

Fuentes tipográficas abril 2015

[+/-]

Pinceles de acuarela, lápiz y crayones para Photoshop

[+/-]

FreeStockPhotography » banco de fotos gratuito

[+/-]

Fuentes tipográficas marzo 2015

[+/-]

The Day's Color » generador de paletas de colores

[+/-]

Vintage Patterns » motivos para Photoshop

[+/-]

Efecto corazones que salen del cursor y revientan suavemente

En distintos tutoriales hemos visto ya varios efectos para los cursores (estrellas que caen, burbujas que suben, explosión de estrellas, humo que sale del cursor y reloj de colores que sigue al cursor).

Hoy vamos a ver otro efecto,y cómo ya casi es San Valentín, pues quedará muy bien para adornar nuestro blog por estas fechas; aunque tampoco habría ningún problema en utilizarlo todo el año. El efecto que veremos hoy es de unos corazones de colores que salen del cursor al moverlo y que explotan cuando van subiendo, como burbujas.

( ↪ Ver DEMO)

1.§ Vamos a Plantilla - Editar HTML.

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

✵ Ver SCRIPT [+/-]

<script type="text/javascript">
//Efecto corazones en el cursor
//diversas y variadas
// <![CDATA[
var colours=new Array('#ff0000', '#ff0066', '#ff00ff', '#ff66ff', '#ff3399', '#ff99cc'); // colores de los corazones
var minisize=16; // tamaño corazones pequeños
var maxisize=28; // tamaño corazones grandes
var hearts=66; // número máxico de corazones en pantalla
var over_or_under="over";
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var herz=new Array();
var herzx=new Array();
var herzy=new Array();
var herzs=new Array();
var kiss=false;

if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addRVLoadEvent(mwah);

function mwah() { if (document.getElementById) {
var i, heart;
for (i=0; i<hearts; i++) {
heart=createDiv("auto", "auto");
heart.style.visibility="hidden";
heart.style.zIndex=(over_or_under=="over")?"1001":"0";
heart.style.color=colours[i%colours.length];
heart.style.pointerEvents="none";
if (navigator.appName=="Microsoft Internet Explorer") heart.style.filter="alpha(opacity=75)";
else heart.style.opacity=0.75;
heart.appendChild(document.createTextNode(String.fromCharCode(9829)));
document.body.appendChild(heart);
herz[i]=heart;
herzy[i]=false;
}
set_scroll();
set_width();
herzle();
}}

function herzle() {
var c;
if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
ox=x;
oy=y;
for (c=0; c<hearts; c++) if (herzy[c]===false) {
herz[c].firstChild.nodeValue=String.fromCharCode(9829);
herz[c].style.left=(herzx[c]=x-minisize/2)+"px";
herz[c].style.top=(herzy[c]=y-minisize)+"px";
herz[c].style.fontSize=minisize+"px";
herz[c].style.fontWeight='normal';
herz[c].style.visibility='visible';
herzs[c]=minisize;
break;
}
}
for (c=0; c<hearts; c++) if (herzy[c]!==false) blow_me_a_kiss(c);
setTimeout("herzle()", 40);
}

document.onmousedown=pucker;
document.onmouseup=function(){clearTimeout(kiss);};

function pucker() {
ox=-1;
oy=-1;
kiss=setTimeout('pucker()', 100);
}

function blow_me_a_kiss(i) {
herzy[i]-=herzs[i]/minisize+i%2;
herzx[i]+=(i%5-2)/5;
if (herzy[i]<sdown-herzs[i] || herzx[i]<sleft-herzs[i] || herzx[i]>sleft+swide-herzs[i]) {
herz[i].style.visibility="hidden";
herzy[i]=false;
}
else if (herzs[i]>minisize+2 && Math.random()<.5/hearts) break_my_heart(i);
else {
if (Math.random()<maxisize/herzy[i] && herzs[i]<maxisize) herz[i].style.fontSize=(++herzs[i])+"px";
herz[i].style.top=herzy[i]+"px";
herz[i].style.left=herzx[i]+"px";
}
}

function break_my_heart(i) {
var t;
herz[i].firstChild.nodeValue=String.fromCharCode(9676);
herz[i].style.fontWeight='bold';
herzy[i]=false;
for (t=herzs[i]; t<=maxisize; t++) setTimeout('herz['+i+'].style.fontSize="'+t+'px"', 60*(t-herzs[i]));
setTimeout('herz['+i+'].style.visibility="hidden";', 60*(t-herzs[i]));
}

document.onmousemove=mouse;
function mouse(e) {
if (e) {
y=e.pageY;
x=e.pageX;
}
else {
set_scroll();
y=event.y+sdown;
x=event.x+sleft;
}
}

window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)=='number' && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}

window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=='number') {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
div.style.backgroundColor="transparent";
return (div);
}
// ]]>
</script>

Si buscas otros colores para los corazones, te puede servir este post.

3.§ Damos clic a Guardar plantilla y ya podemos ver los corazones por todo nuestro blog.

Si incluyes los corazones, házmelo saber con un comentario y así visitar tu blog. Y si tienes alguna duda no dudes en preguntar para ayudarte. No olvides visitarme en mis redes sociales porque quiero saber de ti.

[+/-]