Gadget de post populares con imagen circular

Hola, ¿cómo se encuentran? Espero que bien. Ya casi estamos a puertas de un nuevo fin de semana (¡qué rápido pasan los días!) y antes que termine esta semana, les traigo un pequeño tutorial, muy sencillo de implementar y que me han pedido en varios comentarios.

Para el tutorial emplearemos CSS para darle algo de estilo a la miniatura del widget de entradas populares que ya debemos tener Entonces, empecemos con el mini-tutorial.

Post recomendado:
Gadget de últimas entradas con imagen en miniatura

1.§ Entramos a nuestro panel de Blogger y vamos a Tema - Editar HTML.

2.§ Damos un clic dentro del código de la plantilla y presionamos las teclas CTRL+F. Dentro de la caja de búsqueda escribiremos ]]></b:skin>

3.§ Encima de ]]></b:skin>, pegaremos los siguientes estilos CSS:

.PopularPosts ul li img{
padding: 0;
width: 80px;
height: 80px;
border-radius: 50%;
}

4.§ Damos en Guardar tema y listo.

¿Tienes alguna duda sobre el tutorial? ¿Te gustaría algún tutorial en especial sobre el gadget de entradas populares? Déjame tu respuesta en los comentarios

Títulos con subrayado animado deslizante con CSS

Espero que su semana esté transcurriendo de lo mejor. Hoy les traigo un tutorial que seguro les va a gustar porque se trata de agregar un vistoso subrayado al título de nuestras entradas. El tutorial no es nada complicado y el resultado es muy bueno.

El efecto consiste en un subrayado animado deslizante que funciona al pasar el cursor sobre el título del post, como pueden ver en este ejemplo y también en mi blog de pruebas.

( ↪ Ver DEMO)

Ahora sí, vamos con el tutorial

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código de la plantilla y presionamos la combinación de teclas CTRL+F. Dentro de la casilla de búsqueda escribemos la etiqueta ]]></b:skin> y damos Enter para la búsqueda.

3.§ Encima de ]]></b:skin> pegaremos el siguiente código CSS:

/* Subrayado título */
h3.post-title {
display: inline-block;
}
h3.post-title:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
h3.post-title:hover:after {
width: 100%;
background: #1198cc;
}

Para cambiar el ancho del subrayado, cambiamos el valor de height: 3px por el ancho que queramos; para cambiar el color del subrayado, cambiamos el código hexadecimal de background: #1198cc por otro color. Aquí les dejo una cartilla de colores para que puedan elegir un color.

4.§ Finalmente, damos clic en Guardar plantilla y eso sería todo. Como ven, agregar este efecto es muy sencillo, pero si tienen alguna duda o si desean que haga un video de este tutorial, escríban en los comentarios. Que pasen una bonita semana.

Personaliza el Gadget de Entrada destacada de Blogger

Desde hace un tiempo atrás, Blogger nos ha avisado que ya está disponible su nuevo widget o gadget de Entrada destacada. Hoy vamos a ver cómo agregarlo a nuestro blog y cómo personalizarlo un poco.

AGREGAR EL GADGET

Para agregar este gadget a nuestro blog, sólo seguimos estos pasos:

1.§ Vamos a Diseño - Añadir un gadget y elegimos el gadget Entrada destacada.

2.§ Tendremos un panel con distintas opciones: podemos ponerle un título al gadget o no; mostrar el título de la entrada destacada, mostrar un fragmento del mismo y mostrar la imagen.
Luego, seleccionamos la entrada que queremos destacar y al lado derecho veremos una vista previa del gadget, tal como se verá en el blog.

3.§ Finalmente, cuando hayamos terminado, damos clic en Guardar.

PERSONALIZAR EL GADGET

Los siguientes pasos son opcionales, con los pasos anteriores, el gadget ya estará funcionando en nuestro blog; pero si queremos cambiar un poco el estilo de nuestro gadget, podemos seguir estos pasos adicionales:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código de la plantilla, luego presionamos la combinación de teclas CTRL+F y en la casilla search buscaremos la etiqueta de cierre ]]></b:skin>

3.§ Sobre la etiqueta, pegaremos los siguientes estilos CSS:

.post-summary img{ /* estilos imagen */
background: #ffffff;
padding: 4px;
border: 1px solid #BEBEBE;
}
.post-summary h3{ /* estilo título entrada destacada */
font-size: 22px;
font-family: 'Sue Ellen Francisco' ;
}
.post-summary p{ /* estilo fragmento de entrada */
font-style: italic;
}

Cada parte del gadget podemos personalizarla a nuestro gusto. Yo agregué un borde a la imagen; cambié la fuente del título de la entrada destacada y puse en cursiva el fragmento de la entrada, pero cada uno puede cambiar los estilos como prefiera, agregando otros estilos de bordes u otros colores.

4.§ Cuando terminemos, damos clic en Guardar plantilla. Como ven, fue muy sencillo darle un poco de estilo al gadget.

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

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

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.

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

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.

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

Marcadores sociales con efecto opacidad y giro

En post anteriores habíamos visto cómo agregar íconos de redes sociales con los siguientes efectos: el efecto pushbutton, el efecto de opacidad y el efecto zoom.

Hoy combinaremos dos efectos: el efecto opacidad (que vimos anteriormente) y el efecto de rotación o giro.

↪DEMO
(Pasar el cursor sobre los íconos)

Para agregar este efecto seguimos los siguientes pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Con ayuda de CRTL+F buscamos <b:skin>.Si está cerrado, damos clic en la flechita negra del lado izquierdo para desplegar el código. Debajo de <b:skin><![CDATA[/* pegaremos los siguientes estilos:

/* Opacidad inicial de los íconos */
.rotatebutton img{
opacity: 0.6;
}

/* Tiempo de transición y grado de rotación */
.rotatebutton img:hover{
opacity: 1;
transition: 0.9s ;
transform: rotate(360deg);
}

3.§ Damos clic en Guardar plantilla.

4.§ Ahora elegimos el lugar donde los colocaremos. Si es en el footer de las entradas, lo colocamos en la plantilla, encima de <p class='post-footer-line post-footer-line-3'/>

Si los colocamos en la sidebar, vamos a Diseño - Añadir un gadget - HTML/Javascript .

5.§ Pegaremos el siguiente código HTML. Podemos sustituir los íconos por nuestros íconos favoritos y/o agregar más redes sociales.

<span class="rotatebutton">
<a href="Aqui URL feed" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ7KGGtGSu1kD78YrzzGbLO_Cs9zhkhTurTTe6DywHuOIzHTJNc9qhRXB0Y5kOWLVugnBnNehbxzTeTNOq4H1OH43Sh3y_iVAfUwnOKZGbRvTdsw2K6l41eK2q1vBUvweTsYAgObUZpzE/s1600/Rss-diyva.png" /></a>
<a href="Aqui URL Twitter" target="_blank"><img 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 URL YouTube" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxV7shCD5AMrAoNMBeI6hNMvpPmEjbFKLTnwlQNYccFeuutf9YjxbaGRKU2fRMFoi672VjCOpcy7269cS2QLAbWdlRsKjQGir-oSZVZDMnkmObCQ2jWllKzJb4J16jex1zUZtN_yHIKc/s1600/Youtube-diyva.png" /></a>
<a href="Aqui URL Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIXKTDAG5cnDgpOX73dlEQbBOUG2yslAItNAoChVPqLtDWZWdOlvzvFTn3YvLd2M-WbDAb7bUCMc-jpwWOvf3UatwBZdAocpSTBiqQhwEJtFCfwKkSYL6-uYauB76Lc74lmcZJAKAWuW0/s1600/Facebook-diyva.png" /></a>
<a href="Aqui URL Pinterest" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUt1VdZL5ptVkN_2q75hNA_ea313bw5SAyQ9q0XjtVJFXZQ6oFnjsB6yfrKJXx_d1GlE29_cAu2BSFSvKRPOBRH6ROUmBwzWlDD8Ze6TJBHLLb_X-TEZfdXW0ETUVjS56djHwJ-ZJyQLM/s1600/Pinterest-diyva.png" /></a>
</span>

6.§ Damos clic a Guardar y listo.

Si te gustó el post, compártelo con tus amigos. Sígueme en mis redes sociales para más novedades. Y si tienes alguna duda sobre el post, déjame tu comentario en esta entrada.

Marcadores sociales con efecto zoom

En post anteriores habíamos visto cómo agregar íconos de redes sociales con dos efectos muy vistosos: el efecto pushbutton y el efecto de opacidad.

Hoy veremos otro efecto que podemos agregarle a nuestros marcadores para darles un toque especial: el efecto zoom.

↪DEMO
(Pasar el cursor sobre los íconos)

Para agregar este efecto seguimos los siguientes pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Con ayuda de CRTL+F buscamos <b:skin>.Si está cerrado, damos clic en la flechita negra del lado izquierdo para desplegar el código. Debajo de <b:skin><![CDATA[/* pegaremos los siguientes estilos:

/* Tamaño de los íconos sin pasar el mouse y tiempo de transición */
.zoombutton img{
margin: 5px 3px 3px 2px;
text-align: center;
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
}

/* Tamaño de los íconos al pasar el mouse */
.zoombutton img:hover{
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
}

3.§ Damos clic en Guardar plantilla.

4.§ Ahora elegimos el lugar donde los colocaremos. Si es en el footer de las entradas, lo colocamos en la plantilla, encima de <p class='post-footer-line post-footer-line-3'/>

Si los colocamos en la sidebar, vamos a Diseño - Añadir un gadget - HTML/Javascript .

5.§ Pegaremos el siguiente código HTML. Podemos sustituir los íconos por nuestros íconos favoritos y/o agregar más redes sociales.

<span class="zoombutton">
<a href="Aqui URL feed" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ7KGGtGSu1kD78YrzzGbLO_Cs9zhkhTurTTe6DywHuOIzHTJNc9qhRXB0Y5kOWLVugnBnNehbxzTeTNOq4H1OH43Sh3y_iVAfUwnOKZGbRvTdsw2K6l41eK2q1vBUvweTsYAgObUZpzE/s1600/Rss-diyva.png" /></a>
<a href="Aqui URL twitter" target="_blank"><img 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 URL YouTube" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxV7shCD5AMrAoNMBeI6hNMvpPmEjbFKLTnwlQNYccFeuutf9YjxbaGRKU2fRMFoi672VjCOpcy7269cS2QLAbWdlRsKjQGir-oSZVZDMnkmObCQ2jWllKzJb4J16jex1zUZtN_yHIKc/s1600/Youtube-diyva.png" /></a>
<a href="Aqui URL Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIXKTDAG5cnDgpOX73dlEQbBOUG2yslAItNAoChVPqLtDWZWdOlvzvFTn3YvLd2M-WbDAb7bUCMc-jpwWOvf3UatwBZdAocpSTBiqQhwEJtFCfwKkSYL6-uYauB76Lc74lmcZJAKAWuW0/s1600/Facebook-diyva.png" /></a>
<a href="Aqui URL Pinterest" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUt1VdZL5ptVkN_2q75hNA_ea313bw5SAyQ9q0XjtVJFXZQ6oFnjsB6yfrKJXx_d1GlE29_cAu2BSFSvKRPOBRH6ROUmBwzWlDD8Ze6TJBHLLb_X-TEZfdXW0ETUVjS56djHwJ-ZJyQLM/s1600/Pinterest-diyva.png" /></a>
</span>

6.§ Damos clic a Guardar y listo.

Si te gustó el post, compártelo con tus amigos. No olvides seguirme en mis redes sociales. Y si tienes alguna duda sobre el post, déjame tu comentario en esta entrada.

Blockquote estilo burbuja de diálogo

Anteriormente habíamos visto que era un blockquote y cómo personalizar el que viene por defecto en nuestro blog.

Hoy les traigo otra forma de personalizar el blockquote, esta vez en forma de burbuja de diálogo que puede ser útil para blogs de literatura, donde se haga reseñas y se destaque alguna cita de un libro, pero en general puede usarse en cualquier blog.

( ↪DEMO)Personalízalo a tu gusto

Si te gustó, sólo sigue estos pasos:

1.§ Ingresamos a Plantilla y luego a Editar HTML.

2.§ Damos un clic dentro de la plantilla y con CTRL+F buscamos blockquote o .post blockquote
Si tenemos la etiqueta en la plantilla, lo borramos junto con su contenido y lo reemplazaremos por el siguiente código.
Si no lo tenemos en la plantilla, no hay problema, agregaremos todo el código encima de ]]></b:skin>

3.§ Agregamos el código teniendo en cuenta lo indicado en el paso 2.§:

blockquote {
width: 400px;
background: #EE646F;
color: #FFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
font-style: italic;
font-weight: bold;
line-height: 18px;
padding: 20px 11px 10px 11px;
text-align: center;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

blockquote:after {
border: solid 10px transparent;
border-top-color: #EE646F;
border-bottom: 0;
bottom: -20px;
content: "";
display: block;
height: 0;
left: auto;
right: -350px;
overflow: hidden;
position: relative;
width: 0;
}

Para cambiar el color de la burbuja, cambiamos los colores seleccionados en negrita.

Si queremos aumentar o disminuir el nivel de redondeado de las esquinas, cambiamos los tres valores que están en cursiva.

4.§ Damos clic en Guardar Plantilla.

5.§ Para usarlo, cada vez que estemos creando un nuevo post, seleccionamos el texto que irá en el blockquote y damos clic al botón en forma de comillas en el editor de post que está en la parte superior.
O si trabajamos con el modo HTML también podemos hacerlo agregando <blockquote>Aqui texto</blockquote>

Botón para agrandar o achicar el tamaño de letra del blog con jQuery

En un post anterior habíamos visto cómo agregar los botones para agrandar o achicar los textos usando un script muy sencillo. Hoy haremos algo similar, pero usando la librería jQuery, que le dará un efecto deslizante al momento de pasar de un tamaño de fuente a otro.

( ↪ Ver DEMO)

1.§ Vamos a Plantilla - Editar HTML.

2.§ Ahora lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente y de ser así podemos pasar al paso número 5.§ .

3.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta </head>.

4.§ Encima de </head> pegaremos lo siguiente:

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

5.§ Ahora agregaremos el siguiente script debajo de la librería jQuery que agregamos en el paso anterior.

<script type='text/javascript'>
$(function(){
$('input').click(function(){
var ourText = $('body');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'agrandar') {
finalNum *= 1.1;
}
else if (this.id == 'achicar'){
finalNum /=1.1;
}
else if (this.id == 'normal'){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

6.§ Damos click a guardar.

7.§ Ahora, vamos a Diseño - Añadir un gadget y escogemos HTML/Javascript. En el nuevo elemento pegaremos el siguiente código:

<input id="agrandar" title="Agrandar texto" type="button" value="T+" />
<input id="normal" title="Texto normal" type="button" value="T" />
<input id="achicar" title="Achicar texto" type="button" value="T-" />

8.§ Damos clic a guardar.

PASO OPCIONAL

Este es un paso alternativo, para agregar estilo a los botones, como borde, cambiar el color del botón y de la fuente, etc.

1.§ Nuevamente vamos a Plantilla - Editar HTML. Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta ]]></b:skin> y antes de éste, pegamos los siguientes estilos CSS:

#agrandar, #normal, #achicar{
width: 35px;
height: 35px;
color: #fff;
font-weight: bold;
background: #e2e2e2;
border: 2px solid #fc98bb;
-webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
cursor: pointer;
}

Podemos modificar los estilos a nuestro gusto o incluso separar un estilo distinto para cada botón.

Eliminar subrayado de los enlaces en las nuevas plantillas

Hoy veremos cómo eliminar el subrayado de los enlaces o links en la plantillas de diseño. Si usas las plantillas antiguas o clásicas, puedes ver este tutorial.

Para esto, haremos lo siguiente:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos lo siguiente:

<Variable name="link.hover.decoration" description="Link Hover Decoration" type="string" default="underline" value="underline"/>

3.§ Cambiamos los dos underline por none

4.§ Ahora para quitar el subrayado del título de los post que aparece cuando acercamos el cursor sobre el mismo, haremos lo siguiente. Nuevamente,damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos esto:

h3.post-title a:hover {
color: $(link.hover.color);
text-decoration: underline;
}

Es probable que en tu plantilla el contenido aparezca diferente, puedes guiarte por la primera línea de código.

5.§ Ahora sustituímos text-decoration: underline; por text-decoration: none;

6.§ Damos clic a Guardar y listo.

Ocultar botón Send Feedback/Enviar comentarios en las Vistas Dinámicas

Me preguntaban varias personas si había alguna manera de eliminar u ocultar el botón "Send Feedback" o "Enviar comentarios" que aparece en la parte inferior derecha de las plantillas de Vistas Dinámicas.

Sí es posible ocultar este botón. Sólo debemos seguir estos pasos:

1.§ Vamos a Plantilla - Personalizar - Avanzado - Añadir CSS.

2.§ Pegaremos las siguientes líneas de código:

.feedback {
display: none !important;
}

3.§ Damos clic a Aplicar al blog y listo, el botón habrá desaparecido.

Formulario de contacto para tu blog con 123ContactForm

En un post anterior habíamos visto cómo crear un formulario de contacto con HTML. Hoy veremos otra forma de agregar un formulario de contacto a nuestro blog, usando el generador de formularios 123ContactForm.

1.§ Lo primero que haremos será registrarnos. Le damos clic al botón grande color verde que dice Sign up for free. Veremos que la página nos ofrece tres tipos de planes: Basic, Platinum y Gold. Elegimos el primero (Basic) que es gratuito. Le damos en Sign up y llenamos el formulario de registro

2.§ Una vez que nos hayamos registrado, la página nos mostrará un panel para seleccionar el tipo de formulario (Contact Form, Survey, Event Registration Form, etc.). Elegimos el primero, Contact Form.

3.§ En Form Name, colocamos el nombre que le daremos a nuestro formulario. Damos en OK.

4.§ En la siguiente ventana nos aparecerá el formulario, con sus diversos campos: "Name", "Email", "Message" y más abajo, el botón "Send Email". Para cambiar el nombre de estos campos, lo que haremos será dar clic sobre cada campo, por ejemplo, sobre "Name". Se coloreará de color amarillo y en la parte izquierda aparecerá un panel. En la parte que dice Label, podemos borrar el nombre del campo (Name) y cambiarlo por otro (por ejemplo, "Nombre" o "Nombre y Apellidos")

5.§ También podemos modificar los estilos del texto (Label Style), el tamaño de fuente (Field Size) y si el campo será obligatorio (Options).

6.§ Si queremos ver cómo va quedando nuestro formulario, le damos en Preview. Una vez modificado todo, le damos en Continue.

7.§ Ahora nso aparecerán las opciones de notificación, es decir, a qué correo electrónico nos llegarán los mensajes.

8.§ Si queremos que los mensajes nos lleguen al correo con el que nos registramos en la página, le damos clic a la casilla donde figura nuestro correo. Si queremos que los mensajes nos lleguen a un correo distinto al que nos registramos, damos clic al botón "Add Notification Email".

9.§ En el panel izquierdo, veremos opciones adicionales, podemso cambiarlas o dejarlas tal como están. Luego, damos clic a Continue.

10.§ Nos aparecerá una ventana con el códiso de nuestro formulario, para colocarlo en nuestra página. Para esto, veremos unas pestañas en la parte izquierda, seleccionamos la que dice Blogger. Copiamos todo el código.

11.§ Finalmente, vamos a nuestro blog, creamos una nueva página y pegamos el código de nuestro formulario. También podemos pegar el código en un gadget, si queremos que el formulario está siempre visible en la sidebar. Eso sería todo, como venn es muy sencillo.

123ContactForm

Gadget de posts (entradas) recientes con imagen en miniatura

En un post anterior habíamos visto cómo añadir un gadget de entradas recientes de forma sencilla, pero sin una imagen en miniatura del post.
Hoy veremos cómo agregar un gadget que nos permita mostrar una lista con las últimas entradas de nuestro blog, con resumen, imagen en miniatura y con algunos datos (como la fecha de publicación del post y el número de comentarios).

1.§ Vamos a Diseño - Añadir un gadget - HTML/Javascript.

2.§ Dentro del gadget pegaremos el siguiente código, conformado por los estilos y los scripts:

✵ Ver SCRIPT [+/-]

<style type='text/css'>
img.recent_thumb {padding:2px;width:70px;height:70px;border:0;
float:left;margin:5px 10px 10px 0; border: 1px solid #ccc;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:75px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 14px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://www.webaholic.co.in/other/no-image.jpg';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>');
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}
var towrite='';var flag=0;
document.write('<br><strong>');
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('');
}document.write('</ul>');
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 80;</script>
<script src='http://AQUITUBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

3.§ Reemplazamos AQUITUBLOG por el nombre de nuestro blog. Ahora les explicaré algunos parámetros que podemos personalizar:
» var numposts = 5; es el múmero de posts a mostrar.
» var showpostthumbnails = true;es para mostrar las imágenes en miniatura; si no queremos que aparezcan, cambiamos a false.
» var displaymore = true; es para mostrar el enlace Más; si no queremos que aparezca, cambiamos a false
» var displayseparator = true; es para mostrar una línea de separación entre posts; si no queremos que aparezca, cambiamos a false
» var showcommentnum = true; es para mostrar el número de comentarios del post; si no queremos que aparezca, cambiamos a false.
» var showpostdate = true; es para mostrar la fecha de publicación del post; si no queremos que aparezca, cambiamos a false.
» var showpostsummary = true; es para mostrar un pequeño resumen del post; si no queremos que aparezca, cambiamos a false.
» var numchars = 80; es el número máximo de caracteres que se mostrará en el resumen del post; podemos aumentar o disminuir el valor.

4.§ Una vez modificados los datos, damos clic a Guardar.

Visto en : Webaholic | Vía: Chica Blogger

Sencillo menú multinivel drop down horizontal con jQuery

En un post anterior vimos cómo crear un menú vertical multinivel con jQuery y estaba pendiente hacer lo mismo, pero con un menú horizontal.
El menú que les enseñaré es bastante sencillo de implementar (lo ideal es hacerlo debajo de la cabecera) y tiene un efecto bastante bonito y elegante al momento de desplegarse.

( ↪DEMO)Pasar el cursor sobre la Pestaña 2 y Nivel 2.2

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Como este menú funciona con jQuery, agregaremos dicha librería a nuestra plantilla. Si ya la tenemos, no será necesario agregarla nuevamente. Si no la tenemos, entonces haremos lo siguiente: buscamos la etiqueta </head> y antes de éste, pegamos el siguiente código:

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

3.§ Debajo del código anterior, pegaremos el script correspondiente para este menú:

<script type='text/javascript'>
$(document).ready(function(){
$('#fmtd li').hover(function (){
$(this).addClass('selected'); $(this).find('ul:first').slideDown();},
function (){$(this).removeClass('selected'); $(this).find('ul.fmtdDrpDwn').hide()});
$('.fmtdDrpDwn li').hover(function (){
$(this).find('ul:first').show('slide', {direction: 'left'}, 10000);},
function (){$(this).find('ul').hide()});
});
</script>

4.§ Ahora agregaremos los estilos encima de ]]></b:skin>.
Los estilos podemos modificarlos a gusto. El color que puse al menú es uno celeste, pero pueden cambiarlo por cualquier otro color:

#fmtd-left{
width:4px;
height:33px;
float:left;}
#fmtd-right{
width:4px;
height:33px;
float:left;}
#fmtd {
width:692px;
height:33px;
background:#91d8f0;
float:left;}
#fmtd ul {
margin:0px;
padding:0px;
list-style:none;}
#fmtd ul li {
float:left;
position: relative;
width:90px;
text-align:center;
margin:0 1px;}
#fmtd ul li ul {
display:none ;}
#fmtd ul li a {
font-family:Tahoma;
text-decoration:none;
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:bold;}
#fmtd ul li a span {
display:block;
height:33px;
line-height:33px;}
#fmtd ul li a:hover {
color:#e8fffa;
font-weight:bold;}
#fmtd ul li.selected {
color:#FFFFFF;
font-weight:bold;
-moz-box-shadow:2px 2px 5px #d6d6d6;
-webkit-box-shadow:2px 2px 5px #d6d6d6;
box-shadow:2px 2px 5px #d6d6d6; }
#fmtd ul li.selected a {
color:#fff;}
#fmtd ul li ul.fmtdDrpDwn, #fmtd ul li ul.fmtdDrpDwn ul {
position:absolute;
left:0; top:33px;
background-color:#fefefe;
border: solid 1px #c8c8c8;
width:190px;
-moz-box-shadow:2px 2px 5px #d6d6d6;
-webkit-box-shadow:2px 2px 5px #d6d6d6;
box-shadow:2px 2px 5px #d6d6d6;}
#fmtd ul li ul.fmtdDrpDwn li, #fmtd ul li ul.fmtdDrpDwn ul li{
text-align:left;
float:none;
display:block;
width:189px;}
#fmtd ul li ul.fmtdDrpDwn li a {
font:normal 11px 'Tahoma', Arial, Helvetica, sans-serif;
color:#767676;
display:block;
height:23px;
line-height:23px;
display:block;
text-indent:15px;}
#fmtd ul li ul.fmtdDrpDwn li a:hover {
font-weight:bold;
background:#ddecf3;
color:#fff;
border:dotted 1px #a8d8eb;}
#fmtd ul li ul.fmtdDrpDwn li.selected {
background:#ddecf3;
font-weight:bold;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;}
#fmtd ul li ul.fmtdDrpDwn li.selected > a{
color:#333333;
font-weight:bold;
border:dotted 1px #a8d8eb;}
#fmtd ul li ul.fmtdDrpDwn ul {
position:absolute;
left:100%;
top:0px;}

5.§ Finalmente, para agregar el menú, armaremos la siguiente estructura HTML. Podemos agregar o quitar niveles a gusto:

<div id="main">
<div id="fmtd-left">
</div>
<div id="fmtd">
<ul>
<li ><a href="#"><span>Pestaña 1</span></a></li>
<li class=""><a href="#"><span>Pestaña 2</span></a>
<ul class="fmtdDrpDwn"><li><a href="#">Nivel 2.1</a></li>
<li><a href="#">Nivel 2.2</a>
<ul>
<li><a href="#">Nivel 2.1.1</a></li>
<li><a href="#">Nivel 2.1.2</a></li>
<li><a href="#">Nivel 2.1.3</a></li>
</ul></li>
<li><a href="#">Nivel 2.3</a></li>
</ul></li>
<li><a href="#"><span>Pestaña 3</span></a></li>
<li><a href="#"><span>Pestaña 4</span></a></li>
<li><a href="#"><span>Pestaña 5</span></a></li>
</ul>
</div>
<div id="fmtd-left">
</div>
</div>

- Para agregar una nueva pestaña, agregaremos lo siguiente antes de la última </ul>:

<li><a href="#"><span>Pestaña 6</span></a></li>

- Si queremos agregar una pestaña con niveles interiores, agregamos lo siguiente, siempre antes de la última </ul> :

<li class=""><a href="#"><span>Pestaña 6</span></a>
<ul class="fmtdDrpDwn"><li><a href="#">Nivel 6.1</a></li>
<li><a href="#">Nivel 6.2</a>
<ul>
<li><a href="#">Nivel 6.2.1</a></li>
<li><a href="#">Nivel 6.2.2</a></li>
<li><a href="#">Nivel 6.2.3</a></li>
</ul></li>
<li><a href="#">Nivel 6.3</a></li>
</ul></li>

Damos clic a guardar y listo.

Menú vertical multinivel con jQuery

Hoy vamos a ver cómo hacer un sencillo menú multinivel usando jquery, html y css. Este menú es bastante sencillo de implementar y de personalizar.

( ↪DEMO)Pasar el cursor sobre la Pestaña 3

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente. Si no la tenemos, entonces haremos lo siguiente: buscamos la etiqueta </head> y antes de éste, pegamos el siguiente código:

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

3.§ Debajo del código anterior, pegaremos el siguiente script:

<script type='text/javascript'>
$(document).ready(function(){
$('#fmt li').hover(function (){
$(this).addClass('selected'); $(this).find('ul:first').slideDown();},
function (){$(this).removeClass('selected'); $(this).find('ul.fmtDrpDwn').hide()});
$('.fmtDrpDwn li').hover(function (){
$(this).find('ul:first').show('slide', {direction: 'left'}, 10000);},
function (){$(this).find('ul').hide()});
});
</script>

4.§ Ahora agregaremos los estilos CSS encima de ]]></b:skin>. Estos estilos podemos modificarlos a nuestro gusto, cambiando los colores, tamaño de fuente,etc. :

#main{width:190px; height:auto; margin:0;}
#fmt {width:auto; height:auto;background:#e2e2e2; padding-top:12px; margin-left:20px; border:1px solid #666666;-moz-box-shadow:2px 2px 5px #d1d1d1; -webkit-box-shadow:2px 2px 5px #d1d1d1; box-shadow:2px 2px 5px #d1d1d1;}
#fmt ul {margin:0px; padding:0px; list-style:none;}
#fmt ul li {position: relative; width:auto; text-align:left; margin:0 0px; }
#fmt ul li ul { display:none ;}
#fmt ul li a { font-family:Tahoma;text-decoration:none;color:#636363; display:block; font-size:12px;}
#fmt ul li a span {display:block; height:31px; line-height:31px;padding-left:20px;}
#fmt ul li a:hover {background:; color:#e8fffa; font-weight:bold;}
#fmt ul li a.active span, #fmt ul li a.active:hover { background:#FAC61C!important; color:#fff; font-weight:bold; height:31px; line-height:31px; }
#fmt ul li.selected { background: #FAC61C; color:#FFFFFF; font-weight:bold; }
#fmt ul li.selected a { color:#fff;}
#fmt ul li ul.fmtDrpDwn, #fmt ul li ul.fmtDrpDwn ul { position:absolute; left:168px; top:0; background:#FAC61C; width:185px; -moz-box-shadow:2px 2px 5px #d1d1d1; -webkit-box-shadow:2px 2px 5px #d1d1d1; box-shadow:2px 2px 5px #d1d1d1; padding-left:2px; border-top:solid 2px #fbc67a;}
#fmt ul li ul.fmtDrpDwn li, #fmt ul li ul.fmtDrpDwn ul li{ text-align:left; float:none; display:block; width:183px;}
#fmt ul li ul.fmtDrpDwn li a { font:normal 11px 'Tahoma', Arial, Helvetica, sans-serif; color:#fff; display:block; height:23px; line-height:23px; display:block; text-indent:15px;}
#fmt ul li ul.fmtDrpDwn li a:hover { font-weight:bold; background:#f47d12;}
#fmt ul li ul.fmtDrpDwn li.selected {background:#f47d12; font-weight:bold; -moz-box-shadow:none; -webkit-box-shadow:none;box-shadow:none;}
#fmt ul li ul.fmtDrpDwn ul { position:absolute; left:100%; top:0px; }

5.§ Finalmente, para agregar el menú, armaremos el siguiente HTML en el lugar donde queramos agregarlo (como es un menú vertical, tendría que ser dentro de un gadget, en la sidebar). Si queremos, también podemos quitar niveles :

<div id="main">
<div id="fmt">
<ul>
<li ><a href="#"class="active"><span>Pestaña 1</span></a></li>
<li class=""><a href="#"><span>Pestaña 2</span></a></li>
<li><a href="#"><span>Pestaña 3</span></a>
<ul class="fmtDrpDwn">
<li><a href="#">Nivel 3.1</a></li>
<li><a href="#">Nivel 3.2</a>
<ul>
<li><a href="#">Nivel 3.2.1</a></li>
<li><a href="#">Nivel 3.2.2</a>
</li></ul></li>
<li><a href="#">Nivel 3.3</a></li>
<li><a href="#">Nivel 3.4</a></li></ul>
<li><a href="#"><span>Pestaña 4</span></a></li>
<li><a href="#"><span>Pestaña 5</span></a></li>
<li><a href="#"><span>Pestaña 6</span></a></li>
<li><a href="#"><span>Pestaña 7</span></a></li>
</ul>
</div>
</div>

- Para agregar una nueva pestaña, agregaremos lo siguiente antes de la </ul> que está en negrita:

<li><a href="#"><span>Pestaña 8</span></a></li>

- Si queremos agregar una pestaña con niveles interiores, tendríamos que agregar lo siguiente, siempre antes de la última </ul> :

<li><a href="#"><span>Pestaña 8</span></a>
<ul class="fmtDrpDwn">
<li><a href="#">Nivel 8.1</a></li>
<li><a href="#">Nivel 8.2</a>
<ul>
<li><a href="#">Nivel 8.2.1</a></li>
<li><a href="#">Nivel 8.2.2</a>
</li></ul></li>
<li><a href="#">Nivel 8.3</a></li>
<li><a href="#">Nivel 8.4</a></li></ul>

En un próximo tutorial, veremos cómo hacer un menú multinivel, pero horizontal.

Título de los post con sombra y efecto Mouseover

Hoy vamos a ver cómo agregar un efecto bonito para darle un poco de dinamismo a los títulos de los post. Para ello, agregaremos una sombra y el efecto mouseover a los títulos.

( ↪ Ver DEMO)

1.§ Vamos a Diseño - Edición de HTML y buscamos .post h3 {

2.§ Entre llaves, debajo de .post h3 { veremos un código y una llave de cierre } antes de esa llave de cierre, dentro de .post h3 { pegaremos el siguiente código:

border-left:7px solid #666;
border-right:7px solid #666;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 4px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 4px #666;

Lo que está en negrita es el color de la sombra; podemos reemplazarlo por otro color, pero debe ser el mismo en los cinco casos en que se repite. También podemos modificar el ancho de la sombra.

3.§ Antes de .post h3 { pegaremos lo siguiente, que es el código para darle el efecto Mouseover:

.post h3:hover {
font-style:italic;
border-left:7px solid #FF133F;
border-right:7px solid #FF133F;
box-shadow:0px 0px 4px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 4px #FF133F;
}

Igual que en el caso anterior, podemos reemplazar lo que está en negrita por otro color. Ese será el color de la sombra cuando pasemos el cursor por encima del título del blog. Para ver el efecto en funcionamiento puedes pasar el cursor encima de los títulos de mi blog de pruebas.

4.§ Damos click en Guardar.

Cartel de aviso flotante

Hoy veremos cómo agregar a nuestro blog un cartel de aviso flotante, con botón de cerrar, que puede sernos de mucha utilidad cuando queremos comunicar algo o simplemente para dar la bienvenida a nuestro blog e invitar a nuestros lectores a suscribirse.

El cartel, lo pueden ver funcionando en mi blog de pruebas. Aquí les dejo una imagen:


Bien, entonces empecemos:

1.§ Vamos a Diseño - Edición de HTML y buscamos ]]></b:skin>.

2.§ Encima pegaremos los estilos:

#aviso {
background-color: #e2e2e2; /* color del fondo */
border: 3px solid #CA185F; /* color del borde */
color: #000000; /* color del texto */
font-size: 14px; /* tamaño de fuente */
font-family: Arial; /* tipo de fuente */
text-align: center;
padding: 5px;
position: fixed;
top: 20px;
right: 65%;
width: 250px;
}

Para cambiar la posición del cartel, debemos de cambiar los valores top y right. Si deseamos podemos agregar más estilos como sombras, bordes redondeados, etc.

3.§ Ahora buscaremos </body> y encima de éste pegaremos lo siguiente:

<div id='aviso'>
<div align='right' style='margin-bottom:-15px;'><a href='javascript:void(0);' onclick='document.getElementById(&apos;aviso&apos;).style.display=&apos;none&apos;;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxXJbQA-oVRJj6KCTusSjx9h_ptM4Z3z3_KXdMfHeePHWseRji82Qeb294-HT_hiVR3LCJ7qjO3cNOJ1hegPF1EOJ33OpdrV_BgkCgcf1VH05AB8qZsf1CBGoc2cySlwt5A2M7yrTlAtM/s1600/Close.png'/>
</a></div>
<p> Aquí pegar el contenido del aviso.</p>
</div>

Lo resaltado en negrita es la URL de la imagen del botón; podemos reemplazarla por otra. En donde dice Aquí pegar el contenido del aviso, colocaremos el contenido del cartel. En el ejemplo, puse un texto de bienvenida y dos botones, uno de Twitter y otro de Facebook.

4.§ Una vez terminado esto, damos click en Guardar y listo.

Ver demo

Ir arriba con efecto deslizante (con jQuery).

En una entrada anterior habíamos visto como añadir este efecto, pero con las librerías Prototype y Scriptaculous.
Hoy haremos este mismo efecto, pero usando jQuery ( pueden ver el script funcionando en mi blog de pruebas)

Los pasos son muy sencillos:

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos </head> y antes de éste pegaremos el siguiente código:

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

<script src='http://sites.google.com/site/jessicaykca/home-1/top_jessica.js' type='text/javascript'/>

» Si ya tenemos la librería jQuery en nuestra plantilla, no será necesario agregar la primera parte del código.
» Como pueden ver, el segundo arhivo ya está alojado; sin embargo, si quieren alojarlo en su propio servidor pueden ↪ Descargar el archivo.

3.§ Ahora buscaremos </body> y antes de éste pegaremos:

<a href='#' onclick='MGJS.subir();return false;' title='Ir arriba'><img src='http://img40.imageshack.us/img40/9397/arribar.png' style='position: fixed; bottom: 0px; right: 0px;'/></a>

Podemos reemplazar la imagen por otra; para ello, sólo cambiaremos lo que está en negrita. O simplemente podemos reemplazarlo por un texto (Top, arriba, volver,...).
Si queremos que la flechita esté en la izquierda, reemplazamos right por left

4.§ Damos click a Guardar y eso sería todo.

Ver video en YouTube.

PollCode » para crear encuestas

PollCode es una herramienta que nos ayudará a crear encuestas de forma muy fácil, proporcionándonos después el código para insertar la encuesta en nuestro blog.

Para crear las encuestas, no es necesario crear una cuenta, aunque es lo recomendable. Seguimos los pasos que nos indican, escribiendo la pregunta y las alternativas.

Además, podemos personalizarlo a nuestro gusto. Aquí una muestra:

Qué navegador usas?
	Internet Explorer
	Opera
	Mozilla Firefox
	Google Chrome
	Safari

PollCode