Ciudad Blogger

Inhabilitar el botón derecho con mensaje en pantalla completa

noreply@blogger.com (El Potro) — Mon, 5 Jan 2015 10:12:00 -0800

Aunque ya hemos visto un par de métodos para bloquear el botón derecho del mouse también hemos dicho infinidad de veces que ningún método es 100% efectivo, todos tienen alguna vulnerabilidad.
El que veremos a continuación no es la excepción, pero me ha parecido bastante simpático para compartirlo. Se trata de un script que se activa al usar el botón derecho del mouse y que muestra un mensaje en toda la ventana del navegador.

Puedes ver el ejemplo aquí mismo, si das click derecho verás aparecer un mensaje en toda la ventana del navegador, y se ocultará al dar click nuevamente.

Su instalación es tan sencilla que sólo requiere un paso, sólo ingresa en Plantilla | Edición de HTML y antes de </body> pega lo siguiente. Usa la teclas CTRL + C para copiar el código.

<script>
// Inhabilitar el botón derecho
var DADrccolor = "#F1F1F1";
var DADrcimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYpEmOZHu67ZSpA2nwtPjuxNzwkM6Pmkl_doM53Dmb8mOL-0cOSCKeIaBbcxUFgTs2JndMUvij3Ay3a9ikmuAZAcKMk2i_OUhyphenhyphenOxq_qi5gW-eVW5fdwf_d2yETdPSopuUi-2U78r5kf8w/s300/superheroe.png";
</script>
<script type="text/javascript" src="http://yourjavascript.com/2122535051/antirightclick.js"></script>

Lo que está en color rojo es el color de fondo, puedes cambiarlo a tu gusto. Y lo de color azul es la imagen que aparecerá en el centro. Sencillo ¿no?

Ya lo dije al inicio pero no está de más recordar que ningún método es infalible, así que tomemos esta curiosidad como un adorno para el blog mas que como un sistema de seguridad.

¿Se puede personalizar más? La verdad es que no. Algo que me hubiera encantado es que el autor no hubiese encriptado el código, así podríamos hacer otras adaptaciones. Se me ocurre por ejemplo haber podido poner iconos de las redes sociales son sus respectivos enlaces, o cualquier cosa que se nos ocurra y así sacarle más provecho a este script, pero de momento no será posible.

Vía | DickeyMaru

https://drive.google.com/file/d/0B1sh31bxfVkGV2dPRWR2MnZlS1E/view?usp=sharing

Sonidos de Navidad al entrar al blog

noreply@blogger.com (El Potro) — Sun, 14 Dec 2014 13:48:00 -0800

A medida que los días pasan el espíritu de la Navidad se siente cada vez más, es por eso que en estas fechas procuramos tener algunas decoraciones de Navidad para el blog y así puedas poner tu blog al tono de la temporada decembrina.

Tal es el caso de lo que veremos en esta entrada, un pequeño código para que cuando entremos al blog se reproduzca un sonido navideño.
Son 7 sonidos de corta duración entre los cuales se incluye la famosa risa de Santa Claus (Papá Noel), y algunas melodías representativas. El demo puedes verlo en este blog de pruebas, al entrar escucharás un sonido, y al recargar la página se reproducirá otro sonido al azar.

Para poner estos sonidos de Navidad en tu blog, entra en Plantilla | Edición de HTML y antes de </body> pega el siguiente código:

<script>
//<![CDATA[
// Sonidos de Navidad
// www.ciudadblogger.com
var mp3 = [
"https://sites.google.com/site/ciudadbloggercom/home/campanas_de_navidad.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/jingle_bells.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/noche_de_paz.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/risa_papa_noel.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/sugar_plum.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/we_wish_you.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/villancico.mp3"
];

var ran_unrounded = Math.random()*mp3.length;
var ran_number = Math.floor(ran_unrounded);

document.write('<iframe style="width:0;height:0;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml&up_MP3='+mp3[ran_number]+'&up_START=Yes" allowTransparency="true" frameborder="0" scrolling="no"></iframe>');
//]]>
</script>

Guarda los cambios y listo. Recuerda que los sonidos se reproducen aleatoriamente, así que no te preocupes si escuchas que alguno se repite varias veces.

Cursor para el blog con motivos navideños

noreply@blogger.com (El Potro) — Fri, 5 Dec 2014 07:37:00 -0800

Esta es la excusa perfecta para hacer rabiar al Grinch con este cursor que al moverlo desprende motivos navideños por su paso.
Esferas, muñecos de nieve, botas, regalos, son algunas de las pequeñas imágenes que aparecen en el blog cuando este cursor está en movimiento.

El demo puedes verlo aquí mismo, al mover el cursor aparecerán objetos de Navidad que desaparecerán sutilmente.

Los encargados de esta curiosidad son nuevamente el equipo de Giffy, y le dará a tu blog ese toque festivo que ya se siente en el ambiente.

Para poner este cursor con motivos navideños en tu blog entra en Plantilla | Edición de HTML y antes de </body> pega el siguiente código:

<div style='display:none'><script type="text/javascript" src="http://blogparts.giffy.me/0035/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/"><img style="border:0;" src="http://blogparts.giffy.me/0035/parts.png" alt="クリスマスの足跡ブログパーツ" /></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">[PR] <a href="http://typing.twi1.me/" rel="nofollow">無料で面白タイピング！</a></p></div>

Guarda los cambios y listo. Una vez que se te haya pasado el espíritu de la Navidad elimina el código y el cursor se habrá ido.
Si buscas algo más discreto entonces quizá te interesen estos cursores de navidad.

Mostrar las URL de los enlaces al imprimir una entrada

noreply@blogger.com (El Potro) — Mon, 1 Dec 2014 16:46:00 -0800

No es el caso de este blog, pero hay otros casos donde los usuarios recurrentemente imprimen las entradas del blog que visitan, por ejemplo blogs con recetas de cocina, letras de canciones, poemas, etc. Hasta ahí no hay nada fuera de lo común, pero, ¿qué pasa si la entrada tiene un link y el usuario está interesado en ese enlace? ¿cómo puede el usuario ver el link en la hoja impresa? Puede parecer un detalle insignificante, pero detalles como este pueden mejorar o no la experiencia del usuario.

Lo que veremos a continuación es un sencillo método para que cuando se imprima la entrada del blog aparezcan también las URLs de los enlaces que contenga la entrada. De esta manera el usuario podrá ver en su hoja impresa los links que vienen incluidos en la entrada.

Para conseguirlo recurriremos al pseudo elemento :after, la propiedad content, el atributo attr(href), y por supuesto al tipo de medio print que hará que estos estilos sólo se apliquen en las impresoras.

Puedes ver un ejemplo en la siguiente imagen, la primera es una impresión de una entrada "normal", la segunda muestra los enlaces que hay en el post (tres en total). Las URL se muestran entre paréntesis, junto al texto que contiene el enlace.

Pues bien, sin más preámbulos, sólo debes entrar en Plantilla | Edición de HTML y añadir antes de </head> el siguiente código:

<style media='print' type='text/css'>
a:after {
content:" (" attr(href) ") ";
font-size:0.7em;
font-weight:normal;
font-style:italic;
}
</style>

Con eso bastará para que se puedan imprimir las URLS de las entradas, por supuesto otros estilos pueden ser añadidos o modificados.

Notarás que al agregar el código también se imprimirán las URLs del título del blog y en algunos casos también el de la entrada, o el de las imágenes del post que tengan enlace, para corregir eso vamos a especificar que en esas áreas no se agregue ningún contenido. De modo que el código quedaría así:

<style media='print' type='text/css'>
a:after {
content:" (" attr(href) ") ";
font-size:0.9em;
font-weight:normal;
font-style:italic;
}
.Header h1 a:after, .post-title a:after, .separator a:after { {
content:"";
}
</style>

Así de sencillo puedes hacer que tus lectores tengan la información más completa al momento de imprimir las entradas de tu blog. También recomiendo este método para imprimir únicamente la entrada del blog y evitar que aparezca la sidebar y otros elementos.

Tabla de contenido (Sitemap) con pestañas

noreply@blogger.com (El Potro) — Mon, 24 Nov 2014 11:08:00 -0800

Las tablas de contenido, también llamadas sitemap o mapa del sitio, permiten al visitante navegar por todo el contenido del sitio de una forma práctica, en nuestro caso accediendo a las etiquetas del blog y sus respectivas entradas publicadas.
Ya hemos visto un par de ellos, pero este en particular me gusta por la forma como está organizado todo, en pestañas, tipo tabview lo cual hace que tenga un diseño más intuitivo para el usuario, además que incluye varias opciones que lo hacen más completo.

Esta tabla de contenido es una creación de Taufik Nurrohman, un genio indonesio en estos temas de Blogger. No requiere de librerías externas así que prácticamente no tendremos que preocuparnos por el tema de la compatibilidad.

El demo lo puedes ver aquí mismo, del lado izquierdo están las etiquetas del blog, al dar click sobre una de ellas se muestran del lado derecho las entradas correspondientes a dicha etiqueta.

Cargando entradas...

Estas tablas de contenido por lo general se muestran en una página estática, por ese motivo pondremos todo el código dentro de la página, incluyendo los estilos para evitar que estos se carguen en cualquier otra parte del blog donde el sitemap no se mostrará.
Para poner esta tabla de contenido -sitemap- en tu blog crea una página, y estando en la pestaña HTML de la página pega este código:

<style>
#SiteMapBlogger {
width:99%;
margin:0 auto;
background-color:#444; /* Color de la barra lateral */
overflow:hidden;
position:relative;
color:#333
}
#SiteMapBlogger .loadingPosts {
display:block;
padding:5px 10px;
font:normal bold 10px Arial, Sans-Serif;
color:#FFF
}
#SiteMapBlogger ul, #SiteMapBlogger ol, #SiteMapBlogger li {margin:0;padding:0;list-style:none;background:none;}
#SiteMapBlogger .sitemapTabs {width:20%;float:left}
#SiteMapBlogger .sitemapTabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* Color de las etiquetas */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}
#SiteMapBlogger .sitemapTabs li a:hover {
background-color:#556270; /* Color de fondo de las etiquetas al pasar el cursor */
color:#FFF
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#69D2E7; /* Color de la pestaña activa */
color:#FFF; /* Color del texto de la pestaña activa */
position:relative;
z-index:5;
margin:0 -1px 0 0
}
#SiteMapBlogger .sitemapContent, #SiteMapBlogger .divider-layer {
width:80%;
float:right;
background-color:#FFF;
border-left:5px solid #69D2E7; /* Color del borde que separa las entradas de las etiquetas */
box-sizing:border-box
}
#SiteMapBlogger .divider-layer {float:none;display:block;position:absolute;top:0;right:0;bottom:0;}
#SiteMapBlogger .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}
#SiteMapBlogger .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px; /* Tamaño del título de las entradas */
color:#333; /* Color del título de las entradas */
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}
#SiteMapBlogger .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px; /* Tamaño de la fecha */
color:#DCDCDC; /* Color de la fecha */
float:right
}
#SiteMapBlogger .panel li .sitemapSummary {
display:block;
padding:10px 12px;
font-style:italic;
overflow:hidden
}
#SiteMapBlogger .panel li .sitemapSummary img.sitemapThumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px; /* Ancho del contenedor de las miniaturas */
height:72px; /* Alto del contenedor de las miniaturas */
border:1px solid #dcdcdc; /* Borde de las miniaturas */
}
#SiteMapBlogger .panel li:nth-child(even) {
background-color:#CBDFDE; /* Color de fondo secundario de las entradas */
font-size:10px;
color:#414141 /* Color de texto secundario de las entradas */
}
#SiteMapBlogger .panel li a:hover,#SiteMapBlogger .panel li a:focus, #SiteMapBlogger .panel li a:hover time, #SiteMapBlogger .panel li.bold a {
background-color:#556270; /* Color de fondo del título de las entradas (modo sumario) y color de fondo del título de las entradas al pasar el cursor (modo normal) */
color:#FFF;
outline:none
}
#SiteMapBlogger .panel li.bold a:hover, #SiteMapBlogger .panel li.bold a:hover time {
background-color:#444
}

@media (max-width:700px) {
#SiteMapBlogger {
background-color:#fff;
border:0 solid #888
}
#SiteMapBlogger .sitemapTabs, #SiteMapBlogger .sitemapContent {
overflow:hidden;
width:auto;
float:none;
display:block
}
#SiteMapBlogger .sitemapTabs li {
display:inline;
float:left
}
#SiteMapBlogger .sitemapTabs li a, #SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#556270;
color:#ccc;
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#CBDFDE;
color:#fff
}
#SiteMapBlogger .sitemapContent {
border:none
}
#SiteMapBlogger .divider-layer, #SiteMapBlogger .panel li time {
display:none
}
}
</style>
<div id="SiteMapBlogger">
<span class="loadingPosts">Cargando entradas...</span></div>
<br />
<script>
var tabbedTOC = {
blogUrl: "http://nombre-de-mi-blog.blogspot.com/",
containerId: "SiteMapBlogger",
activeTab: 1,
showDates: true,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tzqLIUCQDt87ntTDS9KQYvokS6rInYJLMUdg3t5QndWsLryssJdFZSv4wNBotT4P2xv8r0_YHrPzhmNfwFex0a6MjWHh7427NMVRlW8-ZzHtuYk7ROIuwmtU7DV-FHRK8Ck81xoRMe4/s128/imagen.png",
monthNames: ["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 7,
newText: " - <i style='color:red;'>¡Nuevo!</i>"
};
</script>

<script>
/*
* Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
* Free for change but keep the original attribution.
* URL: https://plus.google.com/108949996304093815163 */

function clickTab(e){var t=document.getElementById(tabbedTOC_defaults.containerId),n=t.getElementsByTagName("ol"),r=t.getElementsByTagName("ul")[0],i=r.getElementsByTagName("a");for(var s=0;s<n.length;s++){n[s].style.display="none";n[parseInt(e,10)].style.display="block"}for(var o=0;o<i.length;o++){i[o].className="";i[parseInt(e,10)].className="active-tab"}}function showTabs(e){var t=parseInt(e.feed.openSearch$totalResults.$t,10),n=tabbedTOC_defaults,r=e.feed.entry,i=e.feed.category,s="",o=[];for(var u=0;u<(n.showNew===true?5:n.showNew);u++){if(u==r.length)break;r[u].title.$t=r[u].title.$t+(n.showNew!==false?n.newText:"")}r=n.sortAlphabetically?r.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):r;i=n.sortAlphabetically?i.sort(function(e,t){return e.term.localeCompare(t.term)}):i;s='<span class="divider-layer"></span><ul class="sitemapTabs">';for(var a=0,f=i.length;a<f;a++){s+='<li class="sitemapItem-'+a+'"><a href="javascript:clickTab('+a+');">'+i[a].term+"</a></li>"}s+="</ul>";s+='<div class="sitemapContent">';for(var l=0,c=i.length;l<c;l++){s+='<ol class="panel" data-category="'+i[l].term+'"';s+=l!=n.activeTab-1?' style="display:none;"':"";s+=">";for(var h=0;h<t;h++){if(h==r.length)break;var p,d=r[h],v=d.published.$t,m=n.monthNames,g=d.title.$t,y="summary"in d&&n.showSummaries===true?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,n.numChars)+"…":"",b="media$thumbnail"in d&&n.showThumbnails===true?'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>':'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+n.noThumb.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>',w=d.category?d.category:[],E=n.showDates?'<time datetime="'+v+'" title="'+v+'">'+v.substring(8,10)+" "+m[parseInt(v.substring(5,7),10)-1]+" "+v.substring(0,4)+"</time>":"";for(var S=0;S<d.link.length;S++){if(d.link[S].rel=="alternate"){p=d.link[S].href;break}}for(var x=0,T=w.length;x<T;x++){var N=n.newTabLink?' target="_blank"':"";if(w[x].term==i[l].term){s+='<li title="'+w[x].term+'"';s+=n.showSummaries?' class="bold"':"";s+='><a href="'+p+'"'+N+">"+g+E+"</a>";s+=n.showSummaries?'<span class="sitemapSummary">'+b+y+'<span style="display:block;clear:both;"></span></span>':"";s+="</li>"}}}s+="</ol>"}s+="</div>";s+='<div style="clear:both;"></div>';document.getElementById(n.containerId).innerHTML=s;clickTab(n.activeTab-1)}var tabbedTOC_defaults={blogUrl:"http://www.ciudadblogger",containerId:"SiteMapBlogger",activeTab:1,showDates:false,showSummaries:false,numChars:200,showThumbnails:false,thumbSize:40,noThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tzqLIUCQDt87ntTDS9KQYvokS6rInYJLMUdg3t5QndWsLryssJdFZSv4wNBotT4P2xv8r0_YHrPzhmNfwFex0a6MjWHh7427NMVRlW8-ZzHtuYk7ROIuwmtU7DV-FHRK8Ck81xoRMe4/s128/imagen.png",monthNames:["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>¡Nuevo!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="undefined"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})()
</script>

En donde está en color rojo va el nombre de tu blog. En el área de los estilos verás en color verde dónde puedes personalizar el aspecto.

Ahora vamos con las opciones de este gadget, estas opciones se encuentran en el código que añadiste:

activeTab es la pestaña predeterminada
showDates cambiar a false para ocultar la fecha
showSummaries cambiar a true para mostrar resúmenes (sumarios)
numChars número de caracteres en el resumen
showThumbnails cambiar a true para mostrar miniaturas de las entradas
thumbSize tamaño de la miniatura
noThumb miniatura predeterminada para las entradas que no tienen imagen.
monthNames es el nombre de los meses cuando se muestra la fecha
newTabLink cambiar a true para abrir las entradas en una pestaña nueva
sortAlphabetically cambiar a false para ordenar las entradas por fecha
showNew cambiar a false para ocultar el texto "¡Nuevo!" que aparece en las entradas recientes, o define cuántas entradas recientes tendrán ese texto
newText es el texto "¡Nuevo!" de las entradas recientes

Aunque este gadget ofrece la posibilidad de mostrar resúmenes (sumarios) de las entradas con su respectiva miniatura, se recomienda no activar ninguna de las dos opciones para evitar lentitud en la carga. También es importante que una vez que pongas el código no cambies a la pestaña Redactar.

Este sitemap es responsive, o sea que se adapta al tamaño del contenedor y cambia su forma cuando se mira desde un móvil por ejemplo. Por tal motivo debajo de @media (max-width:700px) verás otros estilos, esos son los estilos para el modo "pequeño" del sitemap.

Esta tabla de contenido o sitemap me parece que es de las más completas que hemos visto hasta ahora ya que ofrece diversas opciones que podemos configurar para darle el aspecto que queramos. Y lo mejor de todo es que no dependeremos de librerías o scripts externos, todo está en un solo código listo para copiar y pegar.

Múltiples fondos (background) con CSS

noreply@blogger.com (El Potro) — Sun, 12 Oct 2014 13:34:00 -0700

Quizá en algún momento quieras usar dos imágenes de fondo en un elemento HTML, o en la plantilla de tu blog, como por ejemplo, para poner una imagen hasta arriba y otra imagen distinta abajo, en el footer.
Lo más recurrente es crear dos o más contenedores y a cada uno ponerle un fondo. Pero no es necesario porque podemos utilizar dos o más imágenes distintas en un mismo contenedor empleando la misma propiedad background que usamos de toda la vida.

En realidad no es nada de otro mundo, se trata de utilizar la propiedad background-image y ahí agregar las URLs de las imágenes, separadas por una coma. Por ejemplo, si quisiéramos añadir dos imágenes al fondo del blog sería algo así:

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
}

Y para cambiar su posición usamos background-position, de igual manera estableceremos la propiedad para la primera imagen, luego ponemos una coma, y después ponemos la otra posición.

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
}

Ahí hemos dicho que la primera imagen se acomodará en el lado superior izquierdo, y la segunda en el lado inferior derecho.
También podemos especificar si se repetirán las imágenes o no.

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

Si también queremos añadir un color de fondo podemos hacerlo usando background-color.

body {
background-color: #ccc;
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

Puedes ver un ejemplo con el DIV que está a continuación, parece una sola imagen pero la realidad es que usamos un color de fondo, luego una imagen arriba, y otra imagen abajo.

Múltiples Fondos con CSS

Este es el código completo que he usado para el ejemplo anterior.

CSS

#doblefondo {
background-color: #f2f2f2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCl7nre0v3Oy2rcRg84_adJqKxpxF9SX_ztfUkaUdTgjaHZZUXN_dMtgePAOkr1skuQ03xLpNVVGfEgmKRh-hSrGxsDyVJdBRHi-8rITwXHvn-3ZQu_Lc-dfVA9fRuPIp3wWp3qlYlW9u5/s450/fondo1.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLP5IHot1HszZ8Fpddd7mLkShfF280AcPZX9SWRQLU1Day8R721RSRlEQKiZ6M7hhKbAbmXgk_evmPsTZII0j6_KsnIXXmwi52nHyQaYyH2geE77PAfXivzmIfxeQ29Nt7LUP-p_ad6i1u/s450/fondo2.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
width: 450px;
height: 390px;
position: relative;
margin: 0 auto;
}
#doblefondo h2 {
position: absolute;
top:40%;
left: 20%;
color: #fc5669;
}

HTML

<div id="doblefondo">
<h2>Múltiples Fondos con CSS</h2>
</div>

Pero el número de imágenes no es una limitante ya que podemos usar tres o más y darle a cada una de ellas una propiedad distinta. Como en el siguiente DIV de ejemplo, añadimos tres imágenes de fondo, cada una tiene una posición diferente, y la tercera se repetirá horizontalmente.

Este es el código completo.

CSS

#doblefondo {
background-color: #C5E0DC;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFa-lUnDJNdQLwXhluSCR8n2ND97Dqbbhbw2wDyq-l9DLgoUXQhkBPDo6N20kmo381iBn_3iwOoGMgFn9a2EL9A9xhslb8JTRnpZUdUdKoxkmZjvyXtIbPAyLio4Jz-TET8Bd3B2mEz1mB/s116/fondo1.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZozCvrTOflFV_gZBX4KOzGCrEflxDDz6l6NA_7x3JzcgW_Jj-vH77SI3ERHIqVK6x0y3lvxOfNkcvMurDJ-cdzLaQ1Er9MZTT9hmV8XWSe1K4wDNw3bXYLgsnVj6UW-V7fwJMn9kdqiqe/s116/fondo2.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxy4WB72ImiMGej0PvkRxHsREw7sK1MtCTyyimNKSsQdcKiQA-OePhIF-ZRMS7d87M-Q0gUu_zLkxnKNHKm7V-qg1AlGhnGvBdekGa0kMQWitzoYeW-SskSAMalBDXxFls6WwyhLlRpY6/s116/fondo3.jpg);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, center center, left bottom;
width: 349px;
height: 300px;
position: relative;
margin: 0 auto;
}

HTML

<div id="doblefondo">
</div>

Como puedes ver, poner más de una imagen de fondo en la plantilla del blog o un contenedor es de lo más sencillo. Recuerda siempre separar con una coma las propiedades e imágenes, excepto la última, esa no lleva coma, sólo punto y coma.
En el caso de Internet Explorer funciona de la versión 9 en adelante así que prácticamente todos lo verán ya que por suerte pocos son los que usan versiones anteriores.

Araña interactiva para el blog, que se mueve

noreply@blogger.com (El Potro) — Fri, 10 Oct 2014 07:02:00 -0700

Esto no es como aquella araña de Halloween que vimos hace tiempo que no era mas que una imagen GIF animada. Esto es parte de la modernidad web, hecho en canvas, y se trata de una araña que se mueve por si sola dentro de su telaraña, y que podemos arrastrar con el cursor, tanto a la araña como a la telaraña y sus puntos de apoyo. El demo aquí mismo.

Este gracioso experimento es de Sub Protocol, y nos servirá como parte de las decoraciones de Halloween en el blog. Este arácnido requiere de dos scripts para su funcionamiento, ambos los he alojado para que no tengan que preocuparse por buscar un hosting, pero, he notado que el desempeño de estas canvas son más eficientes si alojamos los scripts directo en la plantilla, o al menos a mí esa percepción me ha dado.

Para colocar esta araña interactiva en tu blog ingresa en Diseño | Añadir un gadget | HTML/Javascript y ahí pega este código:

<script src='https://googledrive.com/host/0B1sh31bxfVkGYUVMRXFyeUROQ2s' type='text/javascript'></script>
<canvas id='scratch' style='width: 500px; height: 350px; margin-left: -80px; margin-top: -30px;'></canvas>
<script src='https://googledrive.com/host/0B1sh31bxfVkGbTVWTlhlangwdWM' type='text/javascript'></script>

Si quieres también puedes hacer que sea "flotante", es decir, que permanezca estática sin importar si subimos o bajamos el scroll de la página. Para conseguirlo sólo añade lo siguiente debajo del código anterior.

<style>
#scratch {
position: fixed;
top: 0px;
left: 0px;
}
</style>

Con top indicamos que se muestre arriba, si la quieres abajo cámbialo por bottom. Con left hacemos que se acomode a la izquierda, si lo quieres a la derecha cámbialo por right. Toma en cuenta que al hacerla flotante podría obstruir algún elemento de tu blog que quede por debajo de ella.

Con esta araña, esta próxima noche de brujas tú y tus lectores podrán entretenerse un rato en el blog jugando con ella, eso sí, no la saques de su red o la pobre morirá :(

Lluvia en el blog

noreply@blogger.com (El Potro) — Mon, 6 Oct 2014 08:50:00 -0700

Los que somos un tanto bohemios disfrutamos de la lluvia tanto como de una buena taza de café. Y ya que nos gustan tanto las precipitaciones pluviales vamos a ver cómo poner lluvia en el blog con Javascript para darle un poco de nostalgia al blog y que bien puede usarse para las próximas fiestas de Halloween. El ejemplo aquí mismo.

Este script de Giffy se pone y se quita en un solo paso. Adicionalmente le he añadido un sonido suave de lluvia, pero este es opcional.

Para poner esta lluvia en el blog, entra en la Edición HTML de tu plantilla, y antes de </body> pega este código:

<div style="display:none;">
<script type="text/javascript" src="http://blogparts.giffy.me/0117/parts.js"></script><p style="text-align: center;margin:0;padding:0;">
<a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0117/parts.gif" alt="降水確率100%ブログパーツ;" /></a></p>
<p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">
[PR] <a href="http://typing.twi1.me/" rel="nofollow">楽しくタイピング練習！</a></p>
</div>
<iframe allowtransparency='true' frameborder='0' marginheight='0' marginwidth='0' scrolling='no' src='http://audio-play.blogspot.com/p/lluvia.html' style='height:0; width:0;'></iframe>

Lo que está en color naranja es el iframe que contiene el sonido de la lluvia, si no quieres el sonido elimina toda esa parte.
En lo que concierne al script, no tiene opciones de configuración pero creo que tampoco hace falta ya que cumple con su cometido.

¿Qué pasará con mi blog cuando muera?

noreply@blogger.com (El Potro) — Thu, 25 Sep 2014 08:54:00 -0700

La muerte es algo en lo que regularmente preferimos no pensar, particularmente en la propia. La cultura nos educa a evadirla y entre menos hablemos de ella menos incómodos nos sentiremos, a no ser que hayamos tomado un curso de tanatología, pero por lo general no estamos preparados para recibirla como un hecho irremediable.

No sabemos cuándo moriremos, ni tampoco tenemos la certeza de que mañana seguiremos con vida, no hay garantía de ello. Es por eso que debemos estar preparados, o al menos dejar todo listo para cuando partamos de este mundo. Incluyendo nuestro blog.

Imagina que tienes un accidente y mueres de forma repentina, ¿has pensado qué pasará con gran parte del contenido que subiste a Internet a lo largo de tu vida?
Si como yo eres un entusiasta de los productos de Google seguro tendrás fotos, vídeos, correos, y varios documentos que quizá quieras "proteger" o conservar cuando ya no estés. Pero, ¿cómo?

Google está consciente de esta problemática y pone a nuestra disposición una herramienta con la que podemos elegir qué sucederá con los distintos productos de Google (o nuestra cuenta entera) después de estar inactiva por un largo tiempo. De esta manera podremos decidir si le dejamos acceso a nuestra cuenta a un familiar o amigo, o si simplemente se elimina.

Para configurar esta herramienta, ingresa al Administrador de cuentas inactivas y da click en Configurar.

Quizá estés pensando que es un poco riesgoso porque bien podrías no entrar a tu cuenta de Google por diversas razones y no necesariamente signifique que hayas fallecido. Google también ha pensado en eso, así que te avisará de 1 a 3 meses antes de cumplirse el tiempo de inactividad y de que tu cuenta se desactive.

Para que esto sea posible deberás añadir un número telefónico y adicionalmente podrás añadir otra dirección de correo, por estos medios Google te notificará antes de que tu cuenta deje de ser accesible.

También deberás establecer el periodo de inactividad, es decir, después de cuánto tiempo Google marcará tu cuenta como inactiva. Este periodo puede ser de 3 a 18 meses.

Puedes agregar hasta 10 contactos de confianza a quienes se les notificará que tu cuenta ha quedado inactiva.

Adicionalmente -y si lo deseas- podrás marcar la casilla Compartir mis datos con este contacto y luego elegir qué productos de Google quieres compartir con él/ella. Esta opción es por si quieres que tu contacto guarde la información que te importa más.

Por seguridad agrega el número telefónico de tu contacto, a través del móvil recibirá un código con el que podrá entrar a tu cuenta una vez que se cumpla el tiempo de inactividad. Tu contacto podrá descargar tus documentos por tres meses, déjale claro esto para que lo haga dentro del tiempo permitido.

En este apartado también puedes añadir una respuesta automática para todos los correos entrantes. Esta respuesta sólo se enviará una vez que tu cuenta esté inactiva.

Por supuesto también puedes elegir que tu cuenta se elimine. Toma en cuenta que si activas esta opción todos los productos de Google que usas se eliminarán, así que tu blog también se eliminará una vez que tu cuenta esté inactiva.

Yo por mi parte prefiero no eliminar mi cuenta, pero cada quién decidirá lo más conveniente para la suya.

Esto es para Google, por desgracia no todos los productos que usamos día a día ofrecen este tipo de herramientas. La buena noticia es que hay sitios como Death Switch que funcionan de manera similar, ahí podemos almacenar todas nuestras contraseñas; cuando dejemos de entrar por un tiempo el sistema nos enviará notificaciones, si después de haber transcurrido un tiempo no respondemos entonces nuestras contraseñas serán enviadas a un contacto que hayamos elegido.
Una opción por de más interesante, aunque habrá que ver qué tan segura está nuestra información en este tipo de servicios.

Decidas lo que decidas recuerda que hombre precavido...

Cambiar los iconos de los gadgets en las Vistas Dinámicas

noreply@blogger.com (El Potro) — Tue, 16 Sep 2014 10:55:00 -0700

Pese a que las plantillas de Vistas Dinámicas no son 100% personalizables hay quienes prefieren usarlas por la forma como se muestran las entradas. Y aunque no se puedan personalizar del todo hay ciertas cosas que sí podemos modificar, en este caso veremos cómo cambiar los iconos de los gadgets de la sidebar.

Los iconos originales de estas plantillas son blancos, y muy sobrios. No hay nada de malo en ello, pero quizá muchos quieran añadir unos iconos mas acorde a la temática del blog, o al gusto del autor. Así que vamos a ver cómo cambiarlos.

¿Recuerdas la entrada para poner iconos en el gadget de Páginas? Pues el método es el mismo, usaremos el selector :nth-of-type para encontrar el gadget de la sidebar y reemplazar su imagen.

Lo único que tienes que hacer es ingresar a Plantilla | Personalizar | Avanzado | Añadir CSS, ahí agrega lo siguiente:

.ss, #gadget-dock > div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(6) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(7) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(8) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(9) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(10) .gadget-icons img {
display: none !important;
}

#gadget-dock > div:nth-of-type(1) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(2) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(3) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(4) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ya sólo deberás poner la URL de las imágenes donde se indica. La primera URL corresponde a la imagen del primer gadget, la segunda al del segundo gadget y así sucesivamente.

El código está preparado para los cuatro primero gadgets de tu sidebar, si tuvieras más sólo añade un fragmento como este por cada gadget extra que tengas:

#gadget-dock > div:nth-of-type(5) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ese será para el quinto gadget, si tuvieras un sexto agrega otro fragmento igual y cambia el 5 por 6, etc.

TRUCO EXTRA

Si quieres mantener siempre visible la sidebar agrega este código:

#gadget-dock {
right: 0!important;
}

Como puedes ver no es nada difícil cambiar los iconos de las Vistas Dinámicas y lo mejor es que no tenemos que meternos con el HTML si no que lo hacemos todo únicamente con CSS.
Cambiar los iconos de los gadgets nos da la posibilidad de tener un blog más personalizado y único, ¿no crees?

Ticker automático para mostrar las últimas entradas del blog

noreply@blogger.com (El Potro) — Sat, 6 Sep 2014 10:39:00 -0700

Un ticker viene siendo como una barra de noticias donde pasan los titulares tipo marquesina. Su uso básicamente es para mostrarle a los lectores cuáles son las entradas más destacadas, aunque en nuestro caso lo usaremos para mostrar las últimas entradas del blog, eso sí, de forma automática para no tener que estar agregando entradas a cada rato ni tener que estar editando nada.

Nuestro ticker de noticias lo haremos con jQuery, y sé que algunos dirán ¡pero por qué, si podemos hacerlo con la etiqueta MARQUEE!.
Ciertamente podemos hacerlo con MARQUEE, pero ese elemento no es un estándar además que su desplazamiento suele ser muy tosco con lo que muchas veces el texto se vuelve difícil de leer. También podríamos hacerlo con animaciones CSS pero en los navegadores antiguos no funcionaría, así que por eso usaremos jQuery para crear el efecto de marquesina, además podremos elegir la velocidad y dirección de desplazamiento

El demo puedes verlo aquí mismo, si pasas el cursor sobre un título el ticker se detendrá:

Y ya que lo hemos hecho automático para no batallar editando también lo haremos de un solo paso, así que su instalación es únicamente copiar y pegar. Para ello copia el siguiente código, y entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pégalo.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<style>
#headlines {
overflow:hidden;
position:relative;
line-height:25px;
background:#34495e; /* Color de fondo */
height:45px;
padding:0 0 0 135px;
}
#headlines h3 {
color:#fff;
font-family:Oswald, sans-serif;
font-size:17px;
font-weight:400;
text-transform:uppercase;
margin-left:-115px;
margin-top:10px;
position:absolute;
}
#headlines .right_arrow {
padding:0 38px 0 110px;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4m-Q6Cjy6f2Jgo8e2IfFCNjPcpZXopSas5F6WoII1SrooCIXTLbcWOL5HqNAPYL0iqA7tIRZLMZcYL6knvF77v_bY1EuJiJAz5UvdXDNBR13ysrF4QstlouTxzTe3SaQxiNKayfNyZBhg/s41/arrow.png) no-repeat right center;
height:46px;
line-height:46px;
position:absolute;
left:0;
top:0;
}
#ticker_post {
position:relative;
margin:0;
margin-left:20px;
height:50px;
width:auto;
}
.marquee {
width: 980px; /* Ancho del área donde se muestran las entradas */
overflow: hidden;
line-height: 45px;
}
.js-marquee a {
font-family:Oswald, sans-serif;
font-size:15px; /* Tamaño de los textos */
color: #FFF; /* Color de los textos */
padding-bottom: 20px;
text-decoration: none;
}
.ticker_separator {
color:#FFF; color: #FFF; /* Color del separador de las entradas */
margin:0 10px;
}
</style>
<div id='headlines'>
<h3>Lo Último</h3>
<div class='right_arrow'></div>
<script>
var blog_url = "http://nombre-de-mi-blog.blogspot.com";
var numero_post = 10; // Número de entradas a mostrar
</script>
<script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div>
<div style='clear:both;'></div>
<script>
$(window).load(function() {
$('.marquee').marquee({
direction: 'left', // Dirección de la marquesina, usar left o right
duration: 25000, // Velocidad
pauseOnHover: true,
duplicated: true
});
});
</script>

En donde se indica en color rojo deberás poner el nombre de tu blog, en color verde verás dónde cambiar el color de fondo así como el número de entradas a mostrar, velocidad, y dirección de desplazamiento.
No olvides cambiar el /* Ancho del área donde se muestran las entradas */ ajústalo a la medida que necesites.
Recuerda que estamos usando jQuery así que si ya lo tuvieras elimina la primera línea del código.

Este gadget utiliza dos scripts para funcionar, ambos ya están alojados pero si lo deseas puedes descargarlos y subirlos a tu propio alojamiento para no depender de otros.

No olvides que el ticker muestra las últimas entradas del blog sin distinción de etiqueta, si quieres que muestra las últimas entradas de una etiqueta en particular tendrás que editar el archivo ticker.js y añadir lo que se muestra en color rojo:

var entries;var feed;var feed_url=blog_url.match(/\/$/)?blog_url:blog_url+"/";feed_url+="feeds/posts/default/-/Nombre-de-la-etiqueta";

¿En dónde se ve mejor? Eso depende del gusto de cada quién y del diseño de cada plantilla, usualmente los tickers de noticias se ponen arriba o de bajo de la cabecera, o arriba de las entradas, pero como dije, eso depende del gusto de cada quién.

Descargar archivos

Evitar que una entrada aparezca en los resultados de Google

noreply@blogger.com (El Potro) — Mon, 18 Aug 2014 08:24:00 -0700

Algunas veces por diversas razones podremos enfrentarnos con la situación de no querer que una entrada en particular se muestre en los resultados de búsqueda de Google, quizá porque has eliminado esa entrada y sigue apareciendo en los resultados, o por cuestiones de privacidad, estrategia de posicionamiento (SEO), etc.
Si bien la mayoría de nosotros queremos ser amados por Google, también podemos decirle "aquí no". De manera que, puedes crear una(s) excepción(es) para que Google no muestre en sus resultados las entradas que no quieras que aparezcan ahí.

Eliminé una entrada y ¡sigue apareciendo en Google!

Por ejemplo, podría darse el caso de que nos vemos obligados a eliminar alguna entrada de nuestro blog, ya sea por cuestiones personales, legales, arrepentimiento, o la razón que sea. Lo ideal sería que al eliminarla desapareciera para siempre del universo, pero la mayoría de las veces no es así, al menos no de inmediato como quisiéramos. Si la entrada estaba indexada por los motores de búsqueda entonces es posible que esa entrada se siga mostrando en los resultados de Google, aun sin importar que esa URL sea inaccesible.

No es mayor problema, pero hay quienes no quieren que haya rastro alguno de esa entrada, sobre todo porque aun cuando esa entrada ya no exista alguien podría verla desde la caché.

Lo que tenemos que hacer en estos casos es pedirle a Google que elimine dicha entrada de los resultados de búsqueda, y hacerlo es muy sencillo, para ello usaremos las Herramientas para webmasters de Google.

Primero ingresa a la herramienta Eliminar contenido obsoleto, pega ahí la URL de la entrada que ya no existe y da click en Solicitar eliminación.

En ese momento Google analizará la URL, si comprueba que en verdad ya no existe te confirmará con un "This content is gone", así que da click nuevamente en Solicitar eliminación, y a esperar a que los robots hagan su trabajo.

¿Y qué pasa si no he eliminado ninguna entrada pero no quiero que ese post aparezca en Google?

También puede darse el caso que no quieras que una entrada en particular se muestre en los resultados de búsqueda, pero no quieres eliminarla de tu blog, sólo no quieres que aparezca en Google, quizá porque esa entrada pueda afectarte el posicionamiento, o porque no es relevante para ti o tus lectores.

Como no quieres eliminarla de tu blog entonces tienes que decirle a los robots que no indexen esa entrada, y para ello usaremos la herramienta que Blogger nos ofrece desde la configuración del blog, así que nos dirigimos a Configuración | Preferencias para motores de búsqueda | Rastreadores e indexación, y en donde dice Archivo robots.txt personalizado da click en Editar para habilitarlo en caso de que no lo hayas hecho antes.

Ahí agrega lo siguiente:

User-agent: Mediapartners-Google
Allow: /

User-agent: *
Disallow: /20014/08/mi-entrada-que-ya-no-existe.html
Disallow: /search
Allow: /

Sitemap: http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?orderby=UPDATED

Ahí deberás agregar la URL de la entrada que no quieres que aparezca en los resultados de Google y que será ignorada por los robots.
Si quisieras añadir más de una entrada sólo agrega otra línea igual con su URL correspondiente, por ejemplo:

Disallow: /20014/08/mi-entrada-que-ya-no-existe-1.html
Disallow: /20014/08/mi-entrada-que-ya-no-existe-2.html

Nota que en las URLs no ponemos el nombre del blog pues no es necesario, sólo agrega desde la diagonal que aparece antes de la fecha (o de la P en caso de que se tratara de una página estática).
Al mismo tiempo hemos aprovechado para añadir nuestro sitemap en el archivo robots.txt, ahí deberás poner el nombre de tu blog donde se indica.

Para asegurarte que todo está bien puedes comprobar tu archivo robots.txt en las Herramientas para webmasters, sólo considera que los robots se toman unos días en pasar por el blog así que la comprobación no la verás de inmediato.

Menú horizontal con buscador expandible

noreply@blogger.com (El Potro) — Wed, 30 Jul 2014 08:12:00 -0700

El menú horizontal con buscador integrado parece ser uno de los favoritos por muchos blogueros. Esta es una variante, se trata de un menú horizontal con subpestañas y que incluye un buscador que se expande al pasar el cursor sobre él cubriendo casi todo el ancho del menú. Puedes verlo funcionando en este blog de pruebas.

Este menú está hecho únicamente con CSS por lo que no tendrás que preocuparte por la compatibilidad con librerías de scripts, ni con navegadores pues funciona bien con todos los navegadores en sus últimas versiones.

El efecto expandible lo conseguimos también con CSS, y es simple, sólo establecemos que el ancho del buscador sea de 0px en su estado normal, y luego aumentamos el ancho al pasar el cursor sobre él. Juego de niños, ¿no? ;)

ATENCIÓN: Si usas una plantilla original de Blogger primero necesitas seguir los pasos de esta entrada, de lo contrario el menú podría no verse o funcionar correctamente.

Para poner este menú en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos CSS:

#menuBuscador {
position: relative;
width: 95%; /* Ancho del menú */
height: 40px;
padding-left: 14px;
background: #CC2A41; /* Color de fondo */
}
.menusearch {
padding:0;
margin:0;
list-style:none;
position:relative;
z-index:5;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
}
.menusearch li:hover li a {
background:none;
}
.menusearch li.top {display:block; float:left;}
.menusearch li a.top_link {
display:block;
float:left;
height:40px;
line-height:40px;
color:#fff; /* Color de los títulos */
text-decoration:none;
font-size:14px; /* Tamaño de la fuente */
padding:0 0 0 12px;
cursor:pointer;
}
.menusearch li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link:hover, .menusearch li:hover > a.top_link {color:#fff;}
.menusearch li:hover {position:relative; z-index:2;}
.menusearch ul,
.menusearch li:hover ul ul,
.menusearch li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menusearch li:hover ul.sub {
left:0;
top:40px;
background:#351330; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menusearch li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menusearch li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#fff;
font-size:14px;
text-decoration:none;
}
.menusearch li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#351330 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGGNaAkmwOxBxDVGuTrcxl6pTHKO3VkKVEjPUC0Sn-G-Hwi4XcYtQb9kM-jZtxkCy98zjQG1JwwFtt4m8nX33gB3bTbYlW_JETJeNYRAXUgg0J2nBz_MIolewb-ff6sDKYuDQr23f6c9H/) 185px 10px no-repeat;}
.menusearch li:hover ul.sub li a:hover {
background:#CC2A41; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menusearch li:hover ul.sub li a.fly:hover, .menusearch li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#CC2A41 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGGNaAkmwOxBxDVGuTrcxl6pTHKO3VkKVEjPUC0Sn-G-Hwi4XcYtQb9kM-jZtxkCy98zjQG1JwwFtt4m8nX33gB3bTbYlW_JETJeNYRAXUgg0J2nBz_MIolewb-ff6sDKYuDQr23f6c9H/) 185px 10px no-repeat; color:#fff;}

.menusearch li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #351330; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search input[type="text"] {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW0Rcza6n4olln0t1-PfvyEZKithvhF6Btv6EgdTcK2a-uAv7wc7oVJFN0et6MFMxZbO0TXyvNhZD771h6LOdBdRwnyLgEnwwOW6iX4NBNS2i4hRA1sFBJ_ESRuSoly192F1IDY-PVcjk/s32/buscar.png) no-repeat center left;
position: absolute;
right:3px; /* Distancia del buscador desde la derecha */
outline:none;
font-size: 13px; /* Tamaño de la fuente del buscador */
color: #ccc;
width: 0;
margin: 0;
padding: 12px 0 12px 35px;
z-index: 1000;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#search input[type="text"]:hover, #search input[type="text"]:focus {width:94%} /* Ancho del buscador cuando se expande */

Luego en Diseño crea un gadget HTML/Javascript y ahí pega lo siguiente:

<div id='menuBuscador'>
<ul class='menusearch'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>
</ul>


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'/></form>

</div>

Ya sólo deberás guardar los cambios. El primer código son los estilos, ahí verás en color verde dónde cambiar los colores, fuentes, etc., o sea, el aspecto del menú. En color rojo van las URLs y los nombres de tus pestañas y subpestañas.

Antes de  puedes agregar más pestañas. Por ejemplo: si quisieras añadir otra pestaña simple, agrega una línea como esta:

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>

Si quisieras agregar una pestaña con subpestañas entonces agrega este código:

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>

Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:

<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>

Eso es todo, menos complicado de lo que parece. Sin duda es un menú que hay que considerar, no sólo por lo atractivo del buscador, sino por la posibilidad de agregar subpestañas y sin necesidad de usar ningún script. Además que podemos personalizarlo tanto como queramos.

Insertar imágenes y vídeos en los comentarios de Blogger

noreply@blogger.com (El Potro) — Mon, 14 Jul 2014 08:09:00 -0700

¿Te ha pasado que quieres decir algo pero las palabras no son suficientes? A veces eso pasa cuando queremos comentar algo en algún blog, quizá un meme pueda resumir nuestra opinión, o un video pueda complementar nuestro comentario. Por desgracia el formulario de comentarios de Blogger no incluye la opción de subir fotos o incrustar vídeos, pero que Blogger no lo habilite no significa que no se pueda.

Lo que veremos en esta entrada es justamente eso, cómo insertar imágenes y vídeos en los comentarios del blog de una manera tan sencilla que sólo requiere de un paso.
El método que usaremos es similar a lo que hacemos cuando agregamos emoticons en los comentarios, de manera que lo que escribimos en el comentario se reemplaza por otro código, en este caso por el HTML necesario para mostrar las imágenes y los vídeos.

Puedes verlo funcionando en en este blog de pruebas.
Para insertar una imagen usa este código:

[img]URL de la imagen[/img]

Para insertar un video de YouTube o Vimeo usa este código:

[video]URL del video[/video]

Asombroso, ¿no? Y tal como lo prometí, la instalación es de un solo paso. Únicamente entra en Plantilla | Edición de HTML y antes de </body> pega lo siguiente:

<script>
//<![CDATA[
// Insertar imágenes y videos en los comentarios (ciudadblogger.com)
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>
</script>
<style>

</style>

Debajo del script verás que también hemos colocado unos estilos, estos estilos son para darle un poco de personalización a las imágenes y a los vídeos que se mostrarán en los comentarios, como el borde, la sombra, y el tamaño. En color verde se especifica a qué corresponde cada una de esas áreas. Por supuesto puedes añadir más estilos si lo deseas.

Para que tus lectores sepan que pueden agregar imágenes y vídeos puedes poner un aviso de ello, esto puedes hacerlo desde Configuración | Entradas y comentarios | Mensaje del formulario de comentarios.

Cómo insertar imágenes y videos
En el caso de las imágenes, tú y los comentaristas deberán usar este código:

[img]URL de la imagen[/img]

Y en el caso de los vídeos, tanto de YouTube o Vimeo se usará este código:

[video]URL del video[/video]

En ambos casos deberás poner la URL de la imagen (o el video) donde corresponde.

Cómo obtener la URL de los videos

En YouTube puedes copiar la URL que aparece en la barra de direcciones del navegador cuando te encuentres viendo un video.
También puedes usar la URL que aparece en "Comparte este video".
O también puedes copiar la URL que aparece en el código de inserción dentro de "Insertar vínculo".
Todas estas URLs son válidas para usarse en los comentarios:

https://www.youtube.com/watch?v=GfxAEl15pDs

http://youtu.be/GfxAEl15pDs

https://www.youtube.com/embed/GfxAEl15pDs

Es decir, las que tienen el término watch, las que tienen el acortador youtu.be, y las que incluyen el término embed. Cualquiera de ellas funcionará.

Consideraciones finales.

Este método es únicamente para plantillas que tengan comentarios anidados, o sea, con opción de "Responder". Si tu blog no tiene la opción de "Responder" no funcionará.
Es necesario que los comentarios se muestren debajo de la entrada, y no en ventana emergente, página completa, etc.
Se admiten todos los formatos de imágenes convencionales (JPG, PNG, GIF).
En el caso de los vídeos se aceptan vídeos de YouTube y Vimeo.
Ten en cuenta que la inclusión de imágenes y vídeos en los comentarios pueden reducir la velocidad de carga del blog.

Este tipo de trucos puede resultar muy atractivo y útil en muchos blogs, pero siempre con moderación para no abusar con el número de imágenes y vídeos que podrían ralentizar la carga. Si se le da un buen uso, este tipo de opciones podría mejorar la experiencia del lector al momento de interactuar con el autor y con los demás comentaristas del blog.

Cambiar el enlace de la cabecera del blog

noreply@blogger.com (El Potro) — Thu, 10 Jul 2014 07:27:00 -0700

Hay quienes crean varios blogs que son parte de un blog principal y desean que al dar click a la cabecera no los dirija a la portada, sino que los lleve a otro blog. Lo que aprenderemos en esta entrada será a cambiar el enlace de la cabecera para que abra otra página, ya sea otro blog, una página estática, o cualquier otra dirección.

Por ejemplo, en este blog de pruebas, si das click en el título del blog abrirá u̶n̶ ̶m̶a̶g̶n̶í̶f̶i̶c̶o̶ ̶y̶ ̶e̶s̶t̶u̶p̶e̶n̶d̶o̶ otro blog.

Para conseguir lo antes mencionado debemos ir a Plantilla | Edición de HTML.
Si el título de tu blog es una imagen busca este código:

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

Cambia todo lo que está en color rojo por esto:

href='URL del enlace'

Ahí deberás agregar el link del blog o la página que quieras enlazar.

Si no tuvieras una imagen en la cabecera, o sea, que el título del tu blog sea sólo texto, entonces busca este código:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

De igual manera cambia lo que está en color rojo por esto:

href='URL del enlace'

En el caso de quienes en el título sólo tienen texto, sabrán que cuando se está en la portada el título no tiene enlace, únicamente cuando se entra a un post. Si quisieras que el título de tu blog tenga enlace aun estando en la portada entonces cambia el código anterior por esto:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<a href='URL del enlace'><data:title/></a>
<b:else/>
<a href='URL del enlace'><data:title/></a>
</b:if>
</b:includable>

Así de simple podrás cambiar el enlace de la cabecera y hacer que al dar click no muestre la portada del blog, sino que abra otro blog.

Añadir información cuando alguien hace copy & paste

noreply@blogger.com (El Potro) — Mon, 7 Jul 2014 12:23:00 -0700

Esta no es una forma de evitar que alguien nos copie contenido del blog, si no de agregar la URL de nuestro blog cuando alguien nos copie el texto de alguna entrada. Por ejemplo, si copias el texto del siguiente párrafo y lo pegas en el recuadro de abajo, aparecerá la URL de esta entrada así como el nombre de este blog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut augue nibh. Aliquam erat volutpat. Nullam sodales nunc eu euismod convallis. Vivamus ornare placerat ipsum, luctus scelerisque libero vehicula nec. Fusce varius quis leo at facilisis. Quisque nec dolor dui. In sed odio non augue lacinia congue. Curabitur et turpis ante. Integer eu turpis a odio accumsan dignissim. Sed id ornare metus. Sed consequat felis non mi molestie, sit amet.

En este caso verás que el enlace es sólo un texto, pero si quien lo copia lo pegara estando en la pestaña "Redactar" entonces se copiará como un enlace HTML.

Ciertamente quien copie podrá borrar esa información extra que hemos añadido, pero también existe la posibilidad de que la deje, o incluso que agregue una referencia más formal sobre el blog donde lo ha tomado y eso se transforma en más tráfico para el blog.

Tynt ofrece ese servicio desde hace mucho, y adicionalmente ofrece otras características como datos estadísticos. Es una buena alternativa, pero yo soy de los que no le gusta mucho depender de servicios externos, sobre todo si podemos ahorrarnos muchas líneas de código.

Este método usa jQuery para que pueda ser servible en todos los navegadores, y el código es mucho más corto que el que los servicios externos ofrecen.

Para ponerlo en tu blog sólo entra en Plantilla | Edición de HTML y antes de </body> agrega lo siguiente:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
//<![CDATA[
// Añadir información extra al hacer copy & paste
$("body").bind('copy', function (e) {
if (typeof window.getSelection == "undefined") return;
var miblog = document.getElementsByTagName('body')[0];
var seleccionar = window.getSelection();
if (("" + seleccionar).length < 10) return;
var nuevodiv = document.createElement('div');
nuevodiv.style.position = 'absolute';
nuevodiv.style.left = '-99999px';
miblog.appendChild(nuevodiv);
nuevodiv.appendChild(seleccionar.getRangeAt(0).cloneContents());
if (seleccionar.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {
nuevodiv.innerHTML = "<pre>" + nuevodiv.innerHTML + "</pre>";
}
nuevodiv.innerHTML += "<br/><br/>Artículo original: <a href='"
+ document.location.href + "'>"
+ document.location.href + "</a><br/>© Nombre de mi blog";
seleccionar.selectAllChildren(nuevodiv);
window.setTimeout(function () { miblog.removeChild(nuevodiv); }, 200);
});
//]]>
</script>

Si ya tuvieras jQuery en tu plantilla entonces omite la primera línea. Ahí verás dónde cambiar el nombre de tu blog, y si lo deseas también puedes cambiar el texto que dice "Artículo original:", puedes ponerle "Más información en:" o lo que gustes.

El script tiene una condición, para cuando el texto que se copie sea muy corto entonces no se ejecute, por ejemplo, habrá quien sólo quiera copiar una palabra o dos, ahí no vale la pena mostrar la información de referencia ya que no está copiando como tal el contenido de tu entrada. Esta condición está determinada por el número de caracteres que se copien, que por defecto la hemos puesto en 10 ese valor lo puedes modificar por uno más alto o uno más corto.

Vía | JitBit

Efectos de sombra en los textos con text-shadow

noreply@blogger.com (El Potro) — Tue, 1 Jul 2014 09:30:00 -0700

Una de las maravillas del CSS es que podemos hacer que los textos se vean tan espectaculares como si los hubiéramos hecho con Photoshop o algo parecido, y sin necesidad de usar imágenes en la mayoría de los casos.

text-shadow es una propiedad que aplica una sombra a un texto, pero además podemos añadir múltiples sombras de diversos colores -y transparencias- a un mismo elemento y con ello podemos conseguir textos más llamativos y que salen de lo ordinario.

Lo que veremos a continuación son 12 ejemplos con text-shadow ya sea para que decores el título de tu blog, los títulos de tus entradas, de tus gadgets, o cualquier texto que se te ocurra.

Primero vamos a ver cómo ponerlo a cualquier texto, ya sea al texto de una entrada, o al de un gadget. En cualquiera de los casos el CSS va antes de ]]></b:skin> y el HTML dentro de tu post o donde lo quieras usar.

Texto con Relieve

Lorem Ipsum

CSS

.sombra1 {
color: #f2f2f2;
text-shadow: 0px -1px 0px #424242;
font-size: 100px;
font-family: 'Unna', serif;
}

HTML

<span class='sombra1'>Lorem ipsum</span>

Texto con sombra tenue

Lorem Ipsum

CSS

.sombra2 {
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
font-size: 80px;
font-weight: bold;
font-family: 'Arial Black';
}

HTML

<span class='sombra2'>Lorem ipsum</span>

Texto con sombra marcada

Lorem Ipsum

CSS

.sombra3 {
color: #b82f14;
text-shadow: 6px 6px 0px rgba(83,155,194,0.5);
font-size: 80px;
font-family: 'Sancreek', cursive;
}

HTML

<span class='sombra3'>Lorem ipsum</span>

Texto vintage

Lorem Ipsum

CSS

.sombra4 {
color: #69D2E7;
text-shadow:
4px 4px 0px #E0E4CC,
9px 8px 0px #F38630;
font-size: 100px;
font-family: 'Lobster', cursive;
}

HTML

<span class='sombra4'>Lorem ipsum</span>

Texto en 3D

Lorem Ipsum

CSS

.sombra5 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
color: #fff;
font-size: 90px;
font-family: Impact;
}

HTML

<span class='sombra5'>Lorem ipsum</span>

Texto con efecto neón

Lorem Ipsum

CSS

.sombra6 {
color: #DF01A5;
text-shadow: 0px 0px 8px #FE2EF7;
font-size: 80px;
font-family: 'Orbitron', sans-serif;
}

HTML

<span class='sombra6'>Lorem ipsum</span>

Texto tipo retro

Lorem Ipsum

CSS

.sombra7 {
padding-left: 20px;
text-transform: uppercase;
color: #E8E3AE;
text-shadow:
-10px 10px 0px #A9CBA6,
-20px 20px 0px #7EBEA3,
-30px 30px 0px #53A08E;
font-size: 80px;
font-family: 'Luckiest Guy', cursive;
}

HTML

<span class='sombra7'>Lorem ipsum</span>

Texto tipo comic

Lorem Ipsum

CSS

.sombra8 {
color: #fff;
text-shadow:
-2px -2px 0 #000,
1px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
font-size: 100px;
font-family: 'Boogaloo', cursive;
}

HTML

<span class='sombra8'>Lorem ipsum</span>

Texto con efecto anaglifo

Lorem Ipsum

CSS

.sombra9 {
text-shadow:
9px 2px 0 rgba(0, 255, 255, 0.5),
-6px -1px 1px rgba(255, 0, 0, 0.4);
color: #2A0A12;
font-size: 80px;
font-family: 'Special Elite', cursive;
}

HTML

<span class='sombra9'>Lorem ipsum</span>

Texto con fuego

Lorem Ipsum

CSS

.sombra10 {
color: #DF0101;
margin: 10px;
padding: 40px 0 10px;
text-align: center;
text-shadow:
0 0 4px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
font-size: 90px;
font-family: 'New Rocker', cursive;
}

HTML

<span class='sombra10'>Lorem ipsum</span>

Texto borroso

Lorem Ipsum

CSS

.sombra11 {
color: transparent;
text-shadow: #81DAF5 0 0 12px;
text-transform: uppercase;
font-size: 60px;
font-family: 'Chango', cursive;
}

HTML

<span class='sombra11'>Lorem ipsum</span>

Texto estilo groovy

Lorem Ipsum

CSS

.sombra12 {
color: #fcc90f;
text-shadow:
-2px -2px 0 #29296e,
1px -2px 0 #29296e,
-2px 2px 0 #29296e,
2px 2px 0 #29296e,
1px 1px #e60602,
2px 2px #e60602,
3px 3px #29296e,
4px 4px #29296e,
5px 5px #29296e,
6px 6px #29296e,
7px 7px #29296e,
8px 8px #29296e,
9px 9px #29296e,
10px 10px #29296e,
11px 11px #29296e,
12px 12px #29296e,
13px 13px #29296e,
14px 14px #29296e,
15px 15px #29296e,
16px 16px #29296e,
17px 17px #29296e,
18px 18px #29296e,
19px 19px #29296e,
20px 20px #29296e;
font-size: 90px;
font-family: 'Henny Penny', cursive;
}

HTML

<span class='sombra12'>Lorem ipsum</span>

En todos los casos yo he puesto un tipo de fuente sólo para ejemplificar, si deseas usar esa fuente tómala de Google Fonts, o cámbiala por otra.
También puedes cambiar los colores, ya sea el del texto, o de la sombra, sólo deberás cambiar los códigos hexadecimales (los que empiezan con signo de número) o los rgba (los que están entre paréntesis), según sea el caso.

Si quisieras usar estos textos con sombras en el título de tu blog, únicamente cambia la clase del texto, por ejemplo, en lugar de .sombra1 { pondrías .header h1 {

Si quisieras usarlo en los títulos de tus entradas, cambia .sombra1 { por .post h3 {

Si quisieras usarlo en los títulos de tus gadgets, cambia .sombra1 { por .sidebar h2 {

Toma en cuenta que en algunas plantillas los nombres de las clases de estas áreas pueden variar, los que he mencionado son para las plantillas originales de Blogger.
También considera que si lo usas para los títulos de tu plantilla, ya sea para el título del blog, de entradas, o gadgets, quizá tengas que eliminar otros estilos que ya estén especificados en tu plantilla, así que en esos casos deberás localizar los estilos de esas áreas y eliminar los que creas que "afectan" la forma como se mira el resultado final.

Si no has podido ver ningún efecto de sombras en los textos que hemos puesto de ejemplo, entonces usas un navegador muy antiguo. En lo que cambias a un navegador más moderno te dejo la imagen de cómo se deben ver los textos con sombras de esta entrada.

Enlazar múltiples etiquetas de Blogger en un solo link

noreply@blogger.com (El Potro) — Tue, 24 Jun 2014 20:15:00 -0700

Esta entrada es breve pero no por eso poco útil. Vamos a ver cómo enlazar más de una etiqueta del blog en un mismo enlace, es decir, que al dar click a un enlace se muestren las entradas tanto de una etiqueta como de otra, aun cuando las entradas no tengan la misma etiqueta en común.

Por ejemplo, en el siguiente enlace se mostrarán entradas sobre AdSense, Generadores, y Aplicaciones:

Abrir link

¿Cómo lo hemos hecho? Fácil, sólo tienes que usar esta URL en tus menús o donde quieras:

http://nombre-de-mi-blog.blogspot.com/search/?q=label:Etiqueta1|label:Etiqueta2

Ahí debes cambiar el nombre de tu blog, y añadir las etiquetas que desees que se muestren en el mismo resultado.
Si quisieras añadir más etiquetas sólo agrega al final de la URL esto: |label:Etiqueta3

Así se vería si agregaras 3 etiquetas:

http://nombre-de-mi-blog.blogspot.com/search/?q=label:Etiqueta1|label:Etiqueta2|label:Etiqueta3

En la mayoría de los blogs no habrá problemas con su uso, sin embargo en algunos casos (ignoro el porqué) no funcionará si las etiquetas tienen espacios, acentos, o caracteres especiales.

Si lo que quieres es saber cómo enlazar sólo una etiqueta en tu menú entonces visita el siguiente enlace:
Cómo crear un menú de categorías para el blog

Personalizar los enlaces de los comentarios de Blogger (Responder, Eliminar, Respuestas, Añadir comentario, y Cargar más)

noreply@blogger.com (El Potro) — Mon, 16 Jun 2014 11:49:00 -0700

En esta entrada vamos a ver cómo personalizar los enlaces de los comentarios anidados, es decir, los enlaces de Responder, Eliminar, Respuestas, Añadir comentario, y Cargar más.

Muchas plantillas pasan desapercibidos esos enlaces y algunas veces pueden ser poco visibles, así que quien quiera resaltarlos o decorarlos en esta entrada verá cómo hacerlo.

He preparado 5 estilos distintos para copiar y pegar, pero por supuesto se pueden modificar y personalizar al gusto de cada quien.

Para poner cualquiera de estos 5 diseños sólo entra en Plantilla | Edición de HTML y antes de ]]></b:skin> pega el código de los estilos que prefieras.

/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #666; /* Color del enlace */
background: #f5f5f5; /* Color de fondo */
border-left: 2px solid #009ecf; /* Color del borde izquierdo */
border-radius: 10px; /* Borde redondeado */
text-decoration: none;
padding: 4px 8px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 26px;
font-weight: normal;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}

/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Color del enlace */
background: #009ecf; /* Color de fondo */
border-radius: 2px; /* Borde redondeado */
text-decoration: none;
padding: 3px 6px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: normal;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 22px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}

/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #777; /* Color del enlace */
/* Fondo gradiente */
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #d6d6d6) );
background:-moz-linear-gradient( center top, #ededed 5%, #d6d6d6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#d6d6d6');
background-color:#ededed; /* Color de fondo */
border:1px solid #d6d6d6; /* Color del borde */
border-radius: 4px; /* Borde redondeado */
box-shadow:inset 0px 0px 3px 0px #fff;
text-shadow:1px 1px 0px #fff;
text-decoration: none;
padding: 3px 7px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: normal;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}

/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Color del enlace */
background-color:#ff5bb0; /* Color de fondo */
border:1px solid #ee1eb5; /* Color del borde */
border-top-left-radius:37px; /* Borde redondeado */
border-top-right-radius:0px;
border-bottom-right-radius:37px; /* Borde redondeado */
border-bottom-left-radius:0px;
text-decoration: none;
padding: 3px 12px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-family:Times New Roman;
font-size:13px;
font-weight:bold;
font-style:italic;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-family:Times New Roman;
font-size:24px;
font-weight:bold;
font-style:italic;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}

/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Color del enlace */
/* Color del enlace */
background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
background-color:#fe1a00; /* Color de fondo */
border:1px solid #d83526; /* Color del borde */
border-radius:4px; /* Borde redondeado */
box-shadow: 0px 10px 14px -7px #f29c93;
text-decoration: none;
text-shadow:0px 1px 0px #b23e35;
padding: 5px 9px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-family:Times New Roman;
font-size:13px;
font-weight:bold;
font-style:italic;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}

Dentro de los códigos verás en color verde dónde puedes modificar los estilos principales.

En todos los casos los botones tendrán un efecto "push" al pasar el cursor sobre ellos, si quieres añadir más estilos al pasar el cursor puedes hacerlo agregando los estilos debajo de:

.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {

Ahí puedes cambiar lo que quieras, ya sea el color de fondo, de texto, etc.

Si quisieras personalizar cada enlace de forma individual también puedes hacerlo. Por ejemplo, si quisieras sólo el enlace de "Responder" y "Eliminar" (recuerda que el enlace "Eliminar" sólo es visible para los administradores del blog) entonces puedes hacerlo de esta forma:

.comments .comment .comment-actions a {
... Aquí los estilos ...
}

Para el enlace de "Respuestas" sería así:

.comments .thread-toggle a {
... Aquí los estilos ...
}

Para el enlace de "Añadir comentario" sería así:

.comments .continue a {
... Aquí los estilos ...
}

Y para el enlace "Cargar más" así:

.comments .comments-content .loadmore a {
... Aquí los estilos ...
}

De esta forma tan simple podemos personalizar esos pequeños detalles de la plantilla a los que muchas veces no le ponemos toda la atención pero que son parte importante para los que buscan atraer comentaristas a su blog.

Botones de Redes Sociales con sprites y transiciones CSS3

noreply@blogger.com (El Potro) — Mon, 2 Jun 2014 08:24:00 -0700

Esto me lo han pedido muchos lectores de este blog, y son los botones para las redes sociales que actualmente uso, y como lo prometido es deuda, y ya no me quiero endeudar más, pues aquí va.

Estos botones son para enlazar tus redes sociales: Facebook, Twitter, Google+, RSS Feed, y suscripción por correo.
Lo que a muchos les resulta atractivo es el efecto que tienen cuando se pasa el cursor sobre ellos, ya que el ícono se mueve hacia arriba mientras el fondo cambia de color.

Este gadget lo veremos en dos versiones, uno con 5 botones pequeños alineados de forma horizontal, y otro de 4 botones un poco más grandecitos y alineados en dos columnas. Están hechos con sprites y transiciones CSS3.

Cualquiera de las dos versiones las vamos a colocar de un solo paso, es decir, pegando tanto los estilos como la estructura HTML dentro de un gadget, ¿por qué? por pereza nada más, pero quien quiera poner los estilos en su lugar correspondiente de la plantilla podrá hacerlo sin ningún problema.
Entonces, para ponerlos en tu blog, entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código de los botones que más te gusten.

Este es la primera versión de 5 botones.

Y este es el código que has de pegar en tu gadget:

<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:57px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:57px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8Kbt-uhIorlVidc2YJ9HNSHhOHizEH64tru9lPKzmoeA1goGDzfflP64SXOV8_wcOtJQiSWvlEUIcPuOE4Te3zkflsjHaXP_skhSGPOt2MDsoYumv5VzNc_UgZB-Y_-Fu-yqc58EG_pn/s114/icon-rss.png) top left no-repeat;}
.social_bookmarks .iconrssmail{background: #BDBDBD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZxzZ9WBDmn-wY5zVTJXn4oM_xiB5QQtBb-bYbUujnEeCBpNPsqLAdWU5INBe5naJU3CLsa87UR9MLM5tDuIKH0RzYgg_dg2T4Yh-Qr4Gl8wJI9XjFuz6YZ7D58aUBz_yydSAVeaTwyYpj/s114/icon-rssmail.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_lGB3qFKnLoqdr5TVAP0qG1umN5dEJnzHw2FIq7zOX4F-lePTvRN0ulGC4VB_ujN8uQpRPPDzC2aV7owD0oMsF2IhKBF3JTL26CMc4x0aLnwTK88mfLSJh7vevshzcR8eNh6Lwf4GJO0/s114/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKuFaylNawHkw2x-8SBNyFdqtTop2BLGGvNNHvB6mt6hmVfSo27u9-z_EKRzxx1sEtPr0I5LSaef-a6S8TztDTMcR2noTULqL2-jh0X1tAgk2pyoJUS-2zl3Mjflpl68EDlgCL5K3cxU0/s114/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnb6hyphenhyphen8423G0Y4atMdWIK_R0OWkwvMn-FPTKsI9HZTTV-YnpmOEYcfwg8f2UckeWWP7XW7rpaF-jvdJYfyV3TlwjQyknNaTQhsECTH8shArnzYvVaVOfEJoR-cqJ5ewt8YRu4TvAwzvn_i/s114/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -57px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -57px; background-color: #ff6600;}
.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color: #FFDE00;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXl3v0GbEqIl9AYJLAlJb-bnAW4NBZaJtkJjZpuGZmWoe4qpGm2vj_5MKrqtDitgLlujjGO6HW_O-0PR_FG__iVHnBbDfqyj44j7NQgJ_hDpEWqF7eYEYVje1t0P0Jw5CtSziDWYevQMnh/s57/icon-social-reflect.png) no-repeat;
}
</style>
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='iconrssmail'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'>
RSS Mail
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
Twitter
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
Facebook
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>

Esta es la otra versión, la de 4 botones.

Y este es el código que pegarías en tu gadget HTML/Javascript.

<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:176px;
height:176px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:right;
margin:0;
padding:0;
}
.social_bookmarks li{
margin:0 0 1px 1px;
height:77px;
width:77px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:77px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:77px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8Kbt-uhIorlVidc2YJ9HNSHhOHizEH64tru9lPKzmoeA1goGDzfflP64SXOV8_wcOtJQiSWvlEUIcPuOE4Te3zkflsjHaXP_skhSGPOt2MDsoYumv5VzNc_UgZB-Y_-Fu-yqc58EG_pn/s0/icon-rss.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_lGB3qFKnLoqdr5TVAP0qG1umN5dEJnzHw2FIq7zOX4F-lePTvRN0ulGC4VB_ujN8uQpRPPDzC2aV7owD0oMsF2IhKBF3JTL26CMc4x0aLnwTK88mfLSJh7vevshzcR8eNh6Lwf4GJO0/s0/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKuFaylNawHkw2x-8SBNyFdqtTop2BLGGvNNHvB6mt6hmVfSo27u9-z_EKRzxx1sEtPr0I5LSaef-a6S8TztDTMcR2noTULqL2-jh0X1tAgk2pyoJUS-2zl3Mjflpl68EDlgCL5K3cxU0/s0/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnb6hyphenhyphen8423G0Y4atMdWIK_R0OWkwvMn-FPTKsI9HZTTV-YnpmOEYcfwg8f2UckeWWP7XW7rpaF-jvdJYfyV3TlwjQyknNaTQhsECTH8shArnzYvVaVOfEJoR-cqJ5ewt8YRu4TvAwzvn_i/s0/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -77px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -77px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -77px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -77px; background-color: #ff6600;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXl3v0GbEqIl9AYJLAlJb-bnAW4NBZaJtkJjZpuGZmWoe4qpGm2vj_5MKrqtDitgLlujjGO6HW_O-0PR_FG__iVHnBbDfqyj44j7NQgJ_hDpEWqF7eYEYVje1t0P0Jw5CtSziDWYevQMnh/s0/icon-social-reflect.png) no-repeat;
}
</style>

<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
Twitter
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
Facebook
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>

Fácil y rápido, ¿no? Lo único que resta hacer es poner tus nombres de usuario de cada red social donde se indica en color rojo.
En el caso de la primera versión deberás poner el nombre de tu feed de Feedburner donde se indica, y por supuesto tener activada la suscripción por correo electrónico en Feedburner.

Y si no te gustan los colores, también puedes cambiarlos. Los códigos hexadecimales que están en negrita son los colores en su estado normal, y los que están en color naranja son los colores al pasar el cursor.

Y ahora sí, es todo.

Image Maps: para mapear imágenes online

noreply@blogger.com (El Potro) — Mon, 26 May 2014 10:59:00 -0700

Mapear una imagen básicamente significa poner varios enlaces en diferentes partes de una sola imagen. Para ello se usa la etiqueta <MAP> y la etiqueta <AREA> que define las áreas de la imagen donde se agregan los enlaces. Estas áreas contienen las coordenadas de la parte seleccionada de dicha imagen, coordenadas que para la mayoría de los mortales nos parecen que están en chino; se trata de establecer la distancia en pixeles en la que se encuentra alguna área de la imagen, y en esas coordenadas se agrega el enlace que sólo será accesible en dicha área.

Por ejemplo, en la siguiente imagen hay 8 enlaces, y a cada uno de ellos sólo se le puede dar click en su respectiva área.

Establecer las coordenadas de cada área puede resultar de lo más estresante, cansado, agotador, y de locos; por suerte hay servicios online que permiten hacer todo esto sin necesidad de contar pixeles, medir, ni nada.
Hay varios, pero hoy hablaremos de Image-Maps. Esta herramienta online nos permite mapear nuestras imágenes de forma sencilla y con las opciones necesarias.

Primero habremos subido nuestra imagen a un alojamiento y pegamos la URL de la imagen en el área correspondiente. También nos da la opción de buscar la imagen del ordenador pero siempre es mejor subirla nosotros mismos para tener la seguridad de que nuestra imagen estará disponible todo el tiempo, ya que las imágenes que subas desde ahí serán eliminadas después de 24 horas.

Después que hemos dado click en Continuar comenzaremos al mapeado de la imagen, para ello da click derecho y se activará un menú.

Create Rect es para formar un rectángulo, Create Poly para formar un polígono, y Create Circle para formar un círculo. Elige la que necesites y traza la forma para seleccionar el área de la imagen a la que le pondrás el enlace.
Inmediatamente aparecerá una ventana para que agregues la URL que tendrá esa área, además de un title, alt, e ID si lo deseas. En la pestaña Events podrás establecer si el enlace se abre en una nueva pestaña o no.

Una vez que has terminado de establecer las áreas de tu imagen da click derecho y en el menú selecciona Get Code.

En la pestaña HTML Code hasta abajo, verás tu código. Cópialo y pégalo en una entrada o gadget de tu blog y listo.

Como puedes ver es una herramienta fácil de usar, y con las opciones necesarias para mapear tus imágenes online y crear banners, carteles promocionales, o cabeceras con múltiples enlaces. En el caso de esto último, si deseas hacer una cabecera que tenga múltiples links, sigue los primeros pasos de esta entrada, sólo que, en lugar de añadir el script que ahí se menciona, pondrías el código de tu imagen mapeada.

Otras opciones para mapear imágenes online son:
Online Image Map Editor
Mappa Tool
Polygonal Image Map Generator
HTML Map Creator

Cómo poner iconos en las pestañas del menú de Páginas

noreply@blogger.com (El Potro) — Mon, 19 May 2014 09:51:00 -0700

Muchas veces sentimos la necesidad de añadir iconos a los enlaces para identificar de una mejor manera el tipo de contenido al que dirige dicho enlace. En la mayoría de los menús esto no es problema pues basta con añadir el código de la imagen antes del nombre de la pestaña, pero con el gadget de Páginas se dificulta un poco ya que el código del gadget no es el tradicional de un menú HTML sino que contiene una serie de códigos propios de Blogger, así que añadir imágenes -diferentes- directamente en el HTML es imposible.

Pero eso no significa que no podamos buscar formas alternas de hacerlo, y es justo lo que haremos en esta entrada, vamos a ver cómo poner un ícono diferente en cada pestaña del menú de Páginas, y para ello usaremos CSS, específicamente los selectores :nth-child() y ::before
De esta manera conseguiremos que cada una de las pestañas de nuestro gadget de Páginas tenga un ícono diferente antes del nombre de la pestaña.

Conseguir lo anterior es mucho más fácil de lo que se piensa. Sólo tienes que entrar a Plantilla | Edición de HTML y añadir antes de ]]></b:skin> lo siguiente:

#PageList1 li:nth-child(1):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(2):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(3):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(4):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}

En estos estilos CSS verás unos números, cada número representa cada pestaña de tu menú, siendo que el 1 es la primera pestaña, el 2 la segunda, etc. Toma en cuenta que la primera pestaña habitualmente es la Página Principal, así que la segunda pestaña pertenece a la primera página de tu menú.

En el código deberás cambiar la URL de la imagen donde se indica en color rojo.

La distancia entre el ícono y el texto se modifica en padding-right.

Con top podrás controlar la distancia desde arriba, esto es para que puedas alinear la imagen verticalmente. Yo he puesto que el ícono se desplace 3px desde arriba, pero puede variar según el tamaño del ícono que pongas, ahí deberás jugar con el valor de top incluso pudiendo usar un valor negativo para subir la imagen, por ejemplo -3px

El código es para las primeras cuatro pestañas de tu menú, si tuvieras más pestañas entonces sólo añade un trozo de código como este por cada pestaña a la que le quieras agregar un icono.

#PageList1 li:nth-child(5):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}

Por cada código que agregues deberás cambiar el número 5 por el correspondiente: 6, 7, 8, etc.

Así de fácil y sencillo podrás personalizar más el gadget de Páginas usando iconos que ayuden al reconocimiento visual de las pestañas.

Cómo saber mi ID de Facebook, Twitter, y Google+

noreply@blogger.com (El Potro) — Tue, 13 May 2014 09:26:00 -0700

Algunas veces por diversos motivos necesitarás saber el ID de usuario de alguna red social en la que participas, ya sea para crear un widget, para crear tus metatags, o para cualquier otra cosa que necesites.
En esta entrada vamos a ver cómo conseguir tu ID de Facebook, ID de Twitter, y el ID de Google+, tanto de tus perfiles como de tus páginas.

ID de Facebook

Si tu perfil o tu página de Facebook no tienen una URL personalizada entonces sólo tienes que entrar a tu página o perfil, y copiar la URL que aparece en la barra de direcciones. Esa serie de números es tu ID.

Si ya tienes una URL personalizada entonces usa esta herramienta, ingresa tu nombre de usuario o el nombre de tu página, da click en Probar y obtendrás tu ID de Facebook así como algunos datos extra.

https://graph.facebook.com/

ID de Google+

En el caso de la red social de Google, si no tienes una URL personalizada, sólo entra en tu perfil y copia la URL de la barra de direcciones, los números que aparecen en ella es tu ID.

Pero si ya tienes una URL personalizada entonces puedes hacer uso de la API de Google+ para conocer tu ID. Para ello debes ingresar a la página de APIs Explorer.
En userId agrega el nombre de usuario de tu página o perfil anteponiendo el signo +
En fields escribe id

Da click en Execute y obtendrás tu ID.

ID de Twitter

En el caso de Twitter la nueva API nos complica un poco más las cosas, pero por suerte hay algunas herramientas online que nos permiten saber nuestro ID de Twitter en un solo paso.
My Twitter ID es una de ellas, únicamente debes poner tu nombre de usuario de Twitter y de inmediato tendrás tu ID.

Otra buena opción es Get Twitter ID el cual además de darnos nuestro ID nos da unos datos extra como el número de seguidores que tenemos.

Con estos sencillos métodos podrás saber el ID de tu perfil o de tus páginas de estas redes sociales que son las más populares.

4 maneras de poner un spoiler en el blog

noreply@blogger.com (El Potro) — Thu, 8 May 2014 18:31:00 -0700

Los spoilers sirven para ocultar cierto contenido de una entrada del blog, ya sea por estrategia o por estética, estos spoilers ocultan contenido y lo muestran sólo cuando el usuario lo solicita.
En esta entrada veremos 4 métodos para poner un spoiler y así puedas elegir el método que más se adapte a tus necesidades.

Spoiler sólo con CSS

Con este método usaremos las bondades del CSS sin tener que recurrir a scripts, sólo CSS y nada más. Pero, tiene dos desventajas, la primera es que se necesitan dos botones, uno para mostrar el contenido y otro para ocultarlo. El otro inconveniente es que al mostrar el contenido la página hace un pequeño scroll hasta posicionar la página donde esté el contenido.

Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam.

El código que usarías en tus entradas para este tipo de spoiler con CSS sería el siguiente:

<input onclick="window.location='#mostrar1';" type="button" value="Mostrar"/>
<input onclick="window.location='#';" type="button" value="Ocultar" />
<div id="spoiler1">
<div id="mostrar1">

...Aquí el contenido que quieres ocultar...

</div>
</div>
<style>
#spoiler1 > div {display: none;}
#spoiler1 > div:target {display: block;}
</style>

En color rojo debes poner el contenido que estará oculto. Lo que está en color azul lo debes cambiar cada vez que agregues un spoiler, por ejemplo, si agregas uno más cambia spoiler1 por spoiler2 y mostrar1 por mostrar2

Spoiler usando Javascript

Este tipo de spoiler es similar al spoiler que vimos hace algunos años, sólo que ligeramente modificado. Su uso requiere Javascript, muy poco en realidad. Básicamente hace lo mismo que el spoiler con CSS pero llamando los estilos con Javascript.

<input type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''; this.value = 'Ocultar'; }else{document.getElementById('spoiler1') .style.display='none';this.value = 'Mostrar'; }" value="Mostrar"/><div id="spoiler1" style="display:none">

...Aquí el contenido que quieres ocultar...

</div>

De igual forma deberás cambiar el ID spoiler1 (todas las veces que aparece) cada vez que quieras añadir uno nuevo.

Spoiler usando Scriptaculous

Este método ya lo vimos alguna vez en el post "expandir y contraer partes de una entrada". Éste a diferencia de los anteriores muestra el contenido oculto con un efecto deslizante, dándole un toque más atractivo.

Para usarlo necesitamos tener Scriptaculous, si aún no lo tienes agrégalo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>

Y cuando quieras poner el spoiler en una entrada usa este código:

<input onclick='Effect.toggle("spoiler1","slide"); return false' type='button' value='Mostrar'/><div id='spoiler1' style='display: none;'>

...Aquí el contenido que quieres ocultar...

</div>

En este caso también deberás cambiar las partes en azul siempre que quieras añadir más.

Spoiler usando jQuery

Por último vamos a ver cómo ocultar contenido con jQuery, con el cual también podremos conseguir un efecto deslizante al mostrar u ocultar el contenido del spoiler.

Si no tienes jQuery ponlo después de <head>

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

Y en tu entrada usa este código cada vez que quieras poner tu spoiler:

<input type="button" id="spoiler1" value="Mostrar"/>
<div class="mostrar1" style="display: none;">

...Aquí el contenido que quieres ocultar...

</div>
<script>jQuery.noConflict();jQuery(document).ready(function(){jQuery('#spoiler1').click(function(){jQuery('.mostrar1').slideToggle("slow");});});</script>

Aquí otra vez hay que cambiar lo que está en azul cada vez que quieras añadir uno nuevo, por ejemplo spoiler1 por spoiler2 y mostrar1 por mostrar2

Y así de sencillo puedes ocultar contenido en las entradas de tu blog, incluso en un gadget HTML/Javascript y como puedes ver son códigos super cortos y sencillos de aplicar. El contenido que puedes poner para ocultar puede ser el que sea, una imagen, texto, un reproductor, videos, etc., etc.

Expandir y contraer gadgets con jQuery

noreply@blogger.com (El Potro) — Sun, 4 May 2014 16:52:00 -0700

Hace ya algún tiempo vimos cómo expandir y contraer gadgets usando Scriptaculous y Prototype, es un método que funciona bien, pero hay quienes usan jQuery y no quieren cargar más librerías en su blog, así que en esta entrada veremos cómo conseguir el mismo resultado pero usando jQuery.

Expandir y contraer gadgets puede servir a quienes tienen muchos gadgets y quieren que la sidebar se vea más despejada mostrando sólo los títulos de los gadgets, y mostrando el contenido sólo cuando el usuario quiera verlo. Puedes ver un ejemplo en este blog de pruebas, al dar click sobre el título del gadget éste se expandirá.

Para poner estos gadgets expandibles sólo necesitas jQuery, si aún no lo tienes entra en Plantilla | Edición de HTML, y después de <head> agrega esta línea:

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

Y ahora, para aplicar el efecto expandible -y deslizante- a algún gadget, localiza en la Edición de HTML el gadget al que se lo quieres aplicar. Por ejemplo, un gadget del tipo HTML/Javascript sería así:

<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'>
<span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
▼▲
<data:title/>
</span>
</h2>
</b:if>
<div class='widget-content'>
<div class='expandir1' style='display: none;'>

<data:content/>

</div>
<script>$(document).ready(function(){$('#expandirGadget1').click(function(){$('.expandir1').slideToggle("slow")})});</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Agrega lo que está en color rojo, y listo.

Para guiarte dónde poner los códigos:

El primer código en rojo va alrededor de la etiqueta <data:title/>
La otra parte en rojo va después de <div class='widget-content'>
Y la última va antes de

</div>

<b:include name='quickedit'/>

Nota que en color azul verás un ID y una clase, ambos aparecen dos veces. Si pusieras otro gadget expandible deberás cambiar tanto los IDs como las clases, por ejemplo expandirGadget2 y expandir2

En el primer fragmento que añadimos verás que aparecen estos caracteres: ▼▲
Esas son las flechas de arriba y abajo ▼▲ puedes cambiarlo por otro caracter, otro texto, o incluso por una imagen:

<img src='URL de la imagen' border='0' width='14px'/>

El código de ejemplo es para los gadgets HTML/Javascript, pero se puede aplicar a cualquier otro, sólo basta con identificar la etiqueta <data:title/> del gadget (que es donde va el primer código), y el contenido del gadget (que es donde va el segundo código).

Quizá deba aclarar que esto no hace que el blog cargue más rápido ya que el contenido se sigue cargando aun cuando esté oculto para el usuario. Es únicamente para mostrar menos espacio en la sidebar ya que algunas veces tenemos gadgets que ocupan demasiado espacio y esta es una buena manera de mostrar el blog más prolijo.