Rincón Bloguero

En contra de SOPA o cualquier variación

2012-01-17T23:03:00.000-08:00

Esta publicación solo tiene el interés de informarlos mediante el FEED. Hoy mantendré cerrado mi blog como apoyo a todos aquellos que están en contra de SOPA, aunque esa no es la única, tenemos a Sinde de España o la Ley Lleras en Colombia.

Todos unidos porque ¡El Pueblo Unido, Jamás será Vencido!

Introducción a CSS3 por #mejorandola

2012-01-15T08:16:00.000-08:00

Mejarandola se caracteriza por darnos tutoriales muy últimos en los temas de vanguardia como JavaScript, HTML5 y otras. En este caso nos dan una introducción al CSS3, un lenguaje para diseñar que desde hace mucho ya aplico a cada blog que hago.

Los tutoriales de Mejorandola son de temas muy buenos, eso es lo interesante pero son demasiado coloquiales y se pierde un poco la estructura de lo que esperamos de un tutorial. Además a Mejorandola le recomendaría estructurar sus charlas y construir un documento que facilite la interpretación de los códigos por parte de los interesados.

Por lo demás felicito a Mejorandola por compartir su conocimiento con todos los latinos.

Comentarios Anidados en Blogger

2012-01-14T12:48:00.000-08:00

Ya era hora de que Blogger nos diera comentarios anidados por defecto, a muchos nos gusta la controversia y cual es a mejor forma que respondiendo a la opinión de otro participante.

Ahora como muchos les hemos puesto manos a la plantilla no van a activarse por defecto, para activarlos abrimos la plantilla y la editamos en HTML, expandimos los artilugios y buscamos el siguiente código:

<b:include data='post' name='comments'/>

Y la cambiamos por el siguiente, si aparece varias veces las remplazamos a todas:

<b:include data='post' name='threaded_comments'/>

Guardamos la plantilla y va a parecer varias lineas nuevas de código css entre

<b:includable id='threaded_comment_css'>
  <style>
//Lineas css predeterminadas
  </style>
</b:includable>

Ya trate y no se pueden mover, siempre se quedarán en medio de la plantilla así que no pierdan tiempo llevándolas junto al resto de css.

Pueden personalizar el modo de ver los comentarios editado esas lineas o si prefieren les regalo mi configuración, a la que le agregue animaciones css3.

.comments {
  clear: both;
  margin: 10px 0 0 50px; /*Posición de la caja con respecto al margen izquierdo de bloque de contenido*/
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
  margin-bottom: 16px;
}
.comments .comment .comment-actions a {
  padding-top: 5px;
  padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comments .comments-content .comment-header {
 -moz-background-inline-policy: continuous;
 background: none repeat scroll 0 0 #EEEEEE;
 border: 1px solid #CCCCCC;
 font-size: 15px;
 font-weight: normal;
 margin-right: 20px;
 padding: 5px;
}
.comments .comments-content .comment-content {
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
margin-left: 0;
margin-right: 20px;
padding: 7px;
margin-top: -8px;
}
.comments .comment .comment-actions {
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
font-size: 11px;
line-height: 1.4em;
margin: -0.8em 20px 2em 0;
padding: 5px;
text-transform: none;
display: block;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTrWdQ5L8IWrnJiMvrbdD9yI7TVAnqIos_W7TkgJUSOcxoDxbIvvNxygjiT5ETRUdCJgfATRlmxf3w9OQGX5XkpTwF4yoWsUeTJB1EJJcwcDYAn-e_5_XDgJmmyCff8Pa-sJyq6o0aN70/s1600/avatar.png);
height: 60px;
box-shadow: 1px 1px 1px 0 #ccc;
margin-left: -25px;
width: 60px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
border: 5px solid white;
overflow: hidden;
border-image: initial;
z-index:2;
}
.comments .avatar-image-container img {
  width: 60px;
}
.comments .avatar-image-container:hover {
color: #000;
box-shadow: rgba(155, 155, 155, .9) 0 0 16px;
position: relative;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
opacity: .9;
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

Sin nada más que decir me despido y a disfrutar los nuevos comentarios anidados, no olviden personalizar las plantillas a su gusto.

Activa desde ya la nueva interfaz de Youtube

2011-11-21T18:00:00.001-08:00

Youtube esta trabajando en una nueva interfaz para la página, una que resulte más atractiva y más acoplada a lo que hemos visto en Google+ y gracias a los amigos de theverge.com la podemos disfrutar unos días antes de la versión definitiva, espero que no se demore porque me gusto mucho. El manual de ellos ha sido repetido por varias webs de habla hispana y yo también lo quiero dejar en mi Blog.

Asi se ve ahora, más interactiva, veo mis suscripciones y suscripciones recomendadas sin salir del Home y si quiero subir un vídeo lo puedo hacer clic allí mismo.

El manual para activar la nueva interfaz es agregar una pequeña cookie, cosa que solo se puede hacer en los dos mejores navegadores disponibles (Mozilla Firefox y Google Chrome) o sus derivados.

En Mozilla Firefox hacemos lo siguiente:

Usuarios de Mozilla Firefox

Ubuntu o Windows: Ctrl+Shift+K
Mac: Cmd+Shift+K

Usuarios de Google Chrome

Ubuntu o Windows: Ctrl+Shift+J
Mac: Cmd+Shift+J

Y pegamos en el área que aparece (una línea que empieza por >)

document.cookie="VISITOR_INFO1_LIVE=ST1Ti53r4fU";

Esta línea agrega una cookie para ver la página como lo ve uno de los empleados a cargo del diseño. No sé cuanto dure el truco pero estaré pendiente.

Luego recargamos la página y estaremos usando la nueva interfaz, yo recargo con F5.

Fuente: The Verge

Solución al Lightbox de blogger, personalizarlo o bloquearlo.

2011-09-16T13:18:00.000-07:00

Blogger implemento en las ultimas horas un Lightbox para las imágenes alojadas en el blog, el problema que muchos le vemos a la medida es que fue in consulta, nadie nos aviso, nadie no da una opción para retirarla.

Voy a darles dos opciones, la primera es aceptar el cambio y personalizar la pantalla modal hasta que nos guste y la segunda es tratar de bloquear el Lightbox para seguir con nuestras opciones de visualización de imágenes.

Personalización

Lo más importante de todo es que ustedes sabiendo el nombre de las áreas pueden hacer sus propios cambios.

Una de las áreas que podemos modificar es el fondo de la pantalla modal, el fondo negro con opacidad 0.9 sobre el cual se muestran las imágenes. Esa área es un div llamado CSS_LIGHTBOX_BG_MASK.

Otra área importante la imagen en si misma, la cual es un img nombrado CSS_LIGHTBOX_SCALED_IMAGE_IMG, ese es el nombre de las etiquetas img que crea el Lightbox.

El área donde están las miniaturas me parece poco modificable, por ahora carezco de creatividad, y tiene el nombre CSS_LAYOUT_COMPONENT CSS_LIGHTBOX_FILMSTRIP.

Como ven los nombres de las clases fueron diseñados para evitar confusiones u homónimos en el código de cualquiera.

Las reglas que use para mi personalización fueron las siguientes:

<style type="text/css">
.CSS_LIGHTBOX_BG_MASK {
background-color: #FFF;
background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background-image: -webkit-gradient(linear, left top, left bottom, from(0.5)), color-stop(35%, rgba(127, 127, 127, 0.5)), to(rgba(0, 0, 0, 0.7)));
background: -webkit-linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: -moz-linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: -o-linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: -ms-linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
}
img.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, .5);
box-shadow: 0px 0px 25px rgba(0, 0, 0, .5);
   outline: none;
   padding:10px;
}
</style>

Como resultado tengo lo siguiente.

Bloquear el Lightbox

El editor de englishjavadrinker.blogspot.com, uno de esos programadores empedernidos desarrollo su solución para bloquear el Lightbox y lo puso a disposición del mundo en su propio blog de blogger, tiene algunos errores y se aplica cuando la página esta completamente cargada, con un poco más de tiempo serán subsanados esas faltas y lograremos nuestra independencia a los lineamientos de blogger,

Él propone pegar antes del </head> el siguente código

<script type="text/javascript" >
//<![CDATA[
function killLightbox() {
 var images = document.getElementsByTagName('img');
 for (var i = 0 ; i < images.length ; ++i) {
  images[i].onmouseover=function() { 
   var html = this.parentNode.innerHTML;  
   this.parentNode.innerHTML = html;
   this.onmouseover = null;
  };
 }
}
 
if (window.addEventListener) {
 window.addEventListener('load',killLightbox,undefined);
} else {
 window.attachEvent('onload',killLightbox);
}
//]]>
</script>

En mi caso el resultado al bloquear el Lightbox es

Por mi parte voy a durar unos días más con el Lightbox impuesto por blogger, y lo iré personalizando a mi gusto poco a poco.

Video Conferencia HTML5, CSS3, Javascript y Python

2011-09-08T15:41:00.000-07:00

El día Sábado 10 de Septiembre, dentro de dos días, habrá una excelente conferencia sobre HTML5, CSS3, Javascript y Python, todos temas de vanguardia y por demás interesantes. Lo mejor de todo es que va a ser una conferencia dada en español, esto demuestra que si se puede trabajar para que los latinos hagamos parte del futuro, asegurar la permanencia de nuestra lengua y fortalecer los lazos de cooperación y colaboración entre los hispanohablantes.

Los temas a tratar serán:

"Cómo se construye el nuevo Internet" por John Freddy Vega, líder y fundador de Cristalab, una de las más grandes comunidades de diseño y desarrollo web hispano.

En "Cómo se construye el nuevo Internet" nos mostrará el futuro y presente de la web. Cuales son las nuevas herramientas, técnicas y tecnologías para crear la nueva generación de aplicaciones web. Además de una mirada hacia qué dispositivos y formas de conectarnos tendremos en pocos años.

"¡La época dorada de HTML5 es hoy!" por Christian Van Der Henst, líder y fundador de Maestros del Web, comunidad con 14 años difundiendo tecnologías web en español.

En "¡La época dorada de HTML5 es hoy!" se enfocará en el Momento HTML5 que estamos viviendo. La importancia de este conjunto de tecnologías, consejos para vender HTML5 en tu empresa, a tus compañeros de trabajo y proyectos, pero sobre todo a tus clientes. Compartirá una colección de 20 sitios sobre HTML5 que tienes que explorar.

"Aprende Python en minutos", por Arturo Jamaica, está detrás del desarrollo del popular servicio de Instantretro que funciona con Python, Django y Google Appengine.

En "Aprende Python en minutos" nos introduce a Python como lenguaje de programación para desarrollo de proyectos web, complementado con el framework Django. Nos enseñará como generar un proyecto en 20 minutos conectando APIs y publicando en vivo. Arturo hace que las cosas pasen.

"Simplificando el frontend: 3 técnicas que cambiarán tu vida" por Joan Piedra, es el frontend de Cristalab, creador de Cristalab v4, la versión HTML5 de Mejorando.la y muchos otros proyectos de la web en inglés y español.

En "Simplificando el frontend: 3 técnicas que cambiarán tu vida" nos hablará de Stylus, Node.js y Jade, tres innovaciones que hacen increiblemente fácil el diseño y desarrollo de sitios web modernos. Cambiando la forma en la que se hace CSS, el código del lado del servidor y los templates para HTML y HTML5.

Como pueden ver todo el poder del aprendizaje gratuito, los más expertos compartiendo su conocimiento con todos los que nos encontramos ávidos de obtenerlo.

Para conocer más sobre la conferencia y solicitar una invitación diríjanse al siguiente link, solo es cuestión de dar nuestro correo y nombre.

http://mejorando.la/conferencia/

Menu con botones animados estilo flash

2011-09-03T13:04:00.000-07:00

Como ven son unos botones que parecen sacados del adobe flash u otro programa para generar botones en flash y son de mi autoria, estan construidos para ser soportados en navegadores actualizados como Firefox, Chrome, Chromium, Opera por ejemplo. Como solamente contienen html y css puede ser implementados tanto en blogger como en una página web profesional.

Para usarlos solo deben agregar un gadget html/javascript o poner directamente en la plantilla el siguiente código. Son muy faciles de personalizar, cada uno con un poquito de color puede cambiar los bacground por colores personales.

<style type="text/css">
/* Menu*/
.nav {
float:left;
text-align:center;
}
.nav ul li {
	list-style: none;
}
.nav ul li a{
font-style: italic;
background:#128a16; /*Fondo del boton*/
border:4px outset #F0FFEF;
text-shadow:0px -1px 1px #222222;
box-shadow:2px 2px 5px #000000;
-moz-box-shadow:2px 2px 5px #000000;
-webkit-box-shadow:2px 2px 5px #000000;
border-radius:20px 20px 20px 20px;
-moz-border-radius:20px 20px 20px 20px;
-webkit-border-radius:20px 20px 20px 20px;
width:150px;
padding:10px 15px;
cursor:pointer;
margin:10px auto;
text-align: center;
color: white;
text-decoration: none;
display: block;
}
.nav ul li:active{
cursor:pointer;
position:relative;
top:2px;
}
.nav ul li a:hover{
background: #55bd59;
position:relative;
top:2px;
}
</style>

<br />
<div class="nav">
<ul>
<li>
	   <a href="#">Principal</a>
    </li>
<li>
    	<a href="#">Quienes Somos</a>
    </li>
<li>
	   <a href="#">Productos</a>
    </li>
<li>
    	<a href="#">Galeria</a>
    </li>
<li>
    	<a href="#">Contacto</a>
    </li>
</ul>
</div>

Slide Show automático alimentado por feed

2011-08-27T21:34:00.000-07:00

Abajo pueden ver un Slide Show de noticias que se alimenta del Feed de blogger, por lo tanto no es necesario actualizar la información, ni llenar nada, solo copian el código que les voy a dar a continuación.

Es muy dificil conseguir que se alimenten solos y sean funcionales, creo que logre eso y a muchos les va a servir, con un poco de CSS cada uno puede lograr que se vea como quieran, obteniendo mayor personalización.

Si ya tienen Jquery agregado en su plantilla agregan un gadget HTML/JavaScript y pegan estas lineas

<style type="text/css">
#slideshow {
	margin: 0 auto;
	width: 640px;
	height: 263px;
	background:transparent url(http://sites.google.com/site/rinconbloguero/images/bg_slideshow.jpg) no-repeat 0 0;
	position: relative; }
 
	#slideshow #slidesContainer {
		margin: 0 auto;
		width: 560px;
		height: 263px;
		overflow: auto; /* allow scrollbar */
		position: relative; }
 
		#slideshow #slidesContainer .slide {
			margin: 0 auto;
			width: 540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
			height: 263px; }
 
/** 
 * Slideshow controls style rules.
 */
.control {
	display: block;
	width: 39px;
	height: 263px;
	text-indent: -10000px;
	position: absolute;
	cursor: pointer; }
 
#leftControl {
	top: 0;
	left: 0;
	background:transparent url(http://sites.google.com/site/rinconbloguero/images/control_left.jpg) no-repeat 0 0; }
 
#rightControl {
	top: 0;
	right: 0;
	background:transparent url(http://sites.google.com/site/rinconbloguero/images/control_right.jpg) no-repeat 0 0; }
 
/** 
 * Style rules for Demo page
 */

#pageContainer {
	margin: 0 auto;}

.slide a {
	text-decoration: none;}
 
.slide h2, .slide p { margin: 15px; color: #ccc; font-size: 11px; line-height:1.3em;}
 
.slide h2 {
	font: italic 24px Georgia, "Times New Roman", Times, serif;
	color: #ccc;
	letter-spacing: -1px; }
 
.slide img {
	float: right;
	margin: 0 15px;
	padding: 0 5px; }
</style>
<script src="http://sites.google.com/site/rinconbloguero/javascript/summarySS.js" type="text/javascript"></script>
<script type="text/javascript" >
var numCharsSS = 500;<!-- Number Characters displayed-->
var numPostsSS = 5;<!-- Number posts displayed-->
</script>
<script src="http://rinconubuntero.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtocSS"></script>

Si no tienen Jquery agregan esta linea al principio de los javascript

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

Buscan y cambian numCharsSS = 500; y numPostsSS = 5; por los numeros de caracteres que quieren mostrar y los posts que se van a deslizar.

Caja con mensaje para blog blogger y páginas que acepten HTML (Actualización)

2011-08-27T14:16:00.000-07:00

Wordprees tiene un plugin muy simpático con el que podemos saludar a nuestro visitante y ofrecerle el servicio seguirnos a través del feed del sitio.

Como dije antes es un plugin de Wordpress y solo sirve para esas plataformas, por lo tanto busque su equivalente para blogger y cualquier web que interprete html. Y hoy después de varios días de trabajo arduo reuniendo iconos libres y agregando más servicios les ofrezco la misma caja que yo estoy usando, voy a traducirla completamente a español pero es con calma.

Mi proyecto esta inspirado en este otro proyecto bloggergreetbox; que es muy bueno pero esta completamente en inglés, quiero hacer mis contribuciones para los latinos e hispano parlantes, somos millones de personas las que hablamos español y no quiero que sintamos excluidos.

Mi proyecto se llama greetboxspanish, no especifica que se use para Blogger como el otro porque funciona para cualquier página que acepte código html, css y javascript.

Para agregar el gadget a su blog de blogger en diseño Añaden un Gadget del tipo HTML/JavaScript y ponemos las lineas siguientes.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://plugins.jquery.com/files/jquery.cookie.js.txt" type="text/javascript"></script>
<script src="http://greetboxspanish.googlecode.com/files/GreetBoxSpanish.js" type="text/javascript"></script>
<style type="text/css">
#mainGreetBoxSpanish {
	font: bold 12px Tahoma, Geneva, sans-serif;
	font-style: normal;
	color: #000;
	background: #f2f5f5;
	border: 1px solid #C3CBDF;
	text-shadow: 0px 0px 0px #222222;
	box-shadow: 0px 2px 4px #000000;
	-moz-box-shadow: 0px 2px 4px #000000;
	-webkit-box-shadow: 0px 2px 4px #000000;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	cursor: pointer;
	width: auto; }
#mainGreetBoxSpanish #GreetBoxDisplay table tr td { vertical-align: middle; }
#mainGreetBoxSpanish #GreetBoxDisplay .close {
	float: right;
	margin-right: 2px;
	margin-top: 2px;
	font: bold 12px Tahoma, Geneva, sans-serif;
	font-style: normal;
	color: #ffffff;
	background: #8c8c8c;
	border: 0px solid #1567db;
	text-shadow: 0px -1px 1px #222222;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	width: 8px;
	padding: 0px 3px;
	cursor: pointer;
	height: 16px; }
#mainGreetBoxSpanish #GreetBoxDisplay .close:active{cursor:pointer;position:relative;top:2px;
</style>
<div id="mainGreetBoxSpanish" style="display:block">
<div id="GreetBoxDisplay"></div>
<script type="text/javascript">
//<![CDATA[
var MyURL = "http://rinconbloguero.blogspot.com";
var feedURL = "/feeds/posts/default";
var GreetBoxHTMLText = FeedURL(feedURL);
document.getElementById("GreetBoxDisplay").innerHTML = GreetBoxHTMLText;
//]]>
</script>
</div>
<script type='text/javascript'>
//<![CDATA[
var GreetBoxCookie = $.cookie("GreetBoxCookie");
if (GreetBoxCookie){
    $("#mainGreetBoxSpanish").hide();
}
//]]>
</script>

Y listo, cuando el usuario cierre la caja no se mostrará más en ningún momento, a menos que el usuario borre el historial de navegación.

Cambien "rinconbloguero" por el nombre o la dirección de su web para que el mensaje no se repita al cambiar en las entradas.

Para los que no usen el feed de blogger buscan en ese codiigo las lineas "/feeds/posts/default" por la dirección completa de su feed, eso incluye http://.

El gadget ocupa poco espacio y ofrece de forma rápida y sencilla nuestro feed rss, todos los cambios que haga se publicarán en la página del proyecto en Google Codes, y estoy a su disposición para aceptar cualquier contribución.

Web del proyecto: greetboxspanish

Archivo del Blog estilo calendario

2011-08-09T11:08:00.000-07:00

Este gadget o widget lo vi trabajando en una página web y me sentí muy atraído por la forma en que se presenta, me di a la tarea de buscarlo y lo encontré en uno de los blog que sigo (Vagabundia) pero no me gustaba completamente porque se mostraba todos los archivos del mes seleccionado entonces hice un pequeño cambio del código para que solo se muestre la lista de entradas si el usuario lo desea.

El archivo estilo calendario me parece importante para ver la actividad mensual del blog, saber que días se hacen las publicaciones y resumir la información.

Para aplicarlo añadimos el Gadget Archivo del Blog y lo dejamos configurado como se muestra a continuación.

En Diseño, Edición de Html expandimos artilugios, descargamos la plantilla completa para respaldar nuestro tema y justo antes del </head> pegamos lo siguiente

<style type='text/css'>
#blogger_calendar {
margin: 0 auto; /* es el bloque donde lo mostraremos */
width: 190px; /* centrado */ /* el ancho */ }

#bcaption {
height: 20px; /* el rectángulo
    superior con los meses */
text-align: center; }

#bcaption select {
border: 1px solid #484848; /* este es el selector de los meses */
font-size: 11px;
padding: 0 0 0 10px;
width: 100%; }

table#bcalendar thead tr th {
background: /* cada
    una de las celdas con los nombres de los dias de la semana */
#484848;
border: 1px solid #567;
color: #EEE;
font-size: 11px;
font-weight:
bold;
padding: 2px;
text-align: center;
width: 20px; }

table#bcalendar
    tbody tr td {
background: #C8C8C8; /* cada celda con el número del dia */
border: 1px solid #789;
text-align: center;
padding: 2px;
-moz-border-radius:
2px; }

td.highlightCell {
background-color: /* las celdas donde hay entradas */
#EBEBEB !important; }

table#bcalendar tbody tr td a {
color: #000; /* el enlace de esas
    celdas */
font-weight: bold; }

td.firstCell { visibility: hidden; /* las celdas
    vacias del inicio */ /* podemos hacerlas visibles usando
    visible */ }

td.emptyCell {
visibility: /* las celdas vacias del final */
hidden; /* podemos hacerlas visibles usando visible */ }

td.filledCell { background: #FFF; }

/* el color de esas celdas vacias si es que están visibles
    */
table#bcNavigation {
color: /* es la barra de navegación inferior */
#fff;
background-color: #484848;
border: 1px solid #234;
margin: 5px 0
0 0;
padding: 0 ;
text-align: center;
width: 190px; }

table#bcNavigation
    a { color: #fff; }

/* el color del texto */
td#bcFootPrev {
float: left; width:
10px; }

/* el enlace hacia atrás */
td#bcFootNext {
float: right; width:
10px; }

/* el enlace hacia adelante */
td#bcFootAll { vertical-align: middle; }

/*el enlace del mes*/
.listhidden { display: none; }

.listshown { display: inline; }

#calendarDisplay { /* debajo se muestra la lista de entradas */ }

/* esta
    es la lista inferior donde se muestran las entradas del mes */
ul#calendarUl {  }

ul#calendarUl li {  }

ul#calendarUl li a {
color: #000; /* cada item de la lista
    es un enlace */
display: block;
font-size: 11px;
padding-left: 15px; }
</style>

<script type='text/javascript'>
//<![CDATA[
var bcLoadingMessage = " Cargando....";
var bcArchiveNavText = "Navegación";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sábado"];
var headInitial = ["D", "L", "M", "M", "J", "V", "S"];
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array();
var bcList = new Array();
var fill = ["", "31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];

function openStatus() {
    document.getElementById('calLoadingStatus').style.display = 'block';
    document.getElementById('calendarDisplay').innerHTML = '';
}

function closeStatus() {
    document.getElementById('calLoadingStatus').style.display = 'none';
}

function bcLoadStatus() {
    cls = document.getElementById('calLoadingStatus');
    txt = document.createTextNode(bcLoadingMessage);
    cls.appendChild(txt);
}

function callArchive(mth, yr, nav) {
    if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
        fill[2] = '29';
    } else {
        fill[2] = '28';
    }
    calMonth = mth;
    calYear = yr;
    if (mth.charAt(0) == 0) {
        calMonth = mth.substring(1);
    }
    callmth = mth;
    bcNavAll = document.getElementById('bcFootAll');
    bcNavPrev = document.getElementById('bcFootPrev');
    bcNavNext = document.getElementById('bcFootNext');
    bcSelect = document.getElementById('bcSelection');
    a = document.createElement('a');
    at = document.createTextNode(bcArchiveNavText);
    a.href = bcNav[nav];
    a.appendChild(at);
    bcNavAll.innerHTML = '';
    bcNavAll.appendChild(a);
    bcNavPrev.innerHTML = '';
    bcNavNext.innerHTML = '';
    if (nav < bcNav.length - 1) {
        a = document.createElement('a');
        a.innerHTML = bcArchiveNavPrev;
        bcp = parseInt(nav, 10) + 1;
        a.href = bcNav[bcp];
        a.title = 'Anterior';
        prevSplit = bcList[bcp].split(',');
        a.onclick = function() {
            bcSelect.options[bcp].selected = true;
            openStatus();
            callArchive(prevSplit[0], prevSplit[1], prevSplit[2]);
            return false;
        };
        bcNavPrev.appendChild(a);
    }
    if (nav > 0) {
        a = document.createElement('a');
        a.innerHTML = bcArchiveNavNext;
        bcn = parseInt(nav, 10) - 1;
        a.href = bcNav[bcn];
        a.title = 'Siguiente';
        nextSplit = bcList[bcn].split(',');
        a.onclick = function() {
            bcSelect.options[bcn].selected = true;
            openStatus();
            callArchive(nextSplit[0], nextSplit[1], nextSplit[2]);
            return false;
        };
        bcNavNext.appendChild(a);
    }
    script = document.createElement('script');
    script.src = 'http://www.blogger.com/feeds/' + bcBlogId + '/posts/summary?published-max=' + calYear + '-' + callmth + '-' + fill[calMonth] + 'T23%3A59%3A59' + timeOffset + '&published-min=' + calYear + '-' + callmth + '-01T00%3A00%3A00' + timeOffset + '&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
    document.getElementsByTagName('head')[0].appendChild(script);
}

function cReadArchive(root) {
    if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
        fill[2] = '29';
    } else {
        fill[2] = '28';
    }
    closeStatus();
    document.getElementById('lastRow').style.display = 'none';
    calDis = document.getElementById('calendarDisplay');
    var feed = root.feed;
    var total = feed.openSearch$totalResults.$t;
    var entries = feed.entry || [];
    var fillDate = new Array();
    var fillTitles = new Array();
    fillTitles.length = 32;
    var ul = document.createElement('ul');
    ul.id = 'calendarUl';
    for (var i = 0; i < feed.entry.length; ++i) {
        var entry = feed.entry[i];
        for (var j = 0; j < entry.link.length; ++j) {
            if (entry.link[j].rel == "alternate") {
                var link = entry.link[j].href;
            }
        }
        var title = entry.title.$t;
        var author = entry.author[0].name.$t;
        var date = entry.published.$t;
        var summary = entry.summary.$t;
        isPublished = date.split('T')[0].split('-')[2];
        if (isPublished.charAt(0) == '0') {
            isPublished = isPublished.substring(1);
        }
        fillDate.push(isPublished);
        if (fillTitles[isPublished]) {
            fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
        } else {
            fillTitles[isPublished] = title;
        }
        li = document.createElement('li');
        li.style.listType = 'none';
        li.innerHTML = '<a href="' + link + '">' + title + '</a>';
        ul.appendChild(li);

    }
    calDis.appendChild(ul);
    var val1 = parseInt(calDay, 10)
    var valxx = parseInt(calMonth, 10);
    var val2 = valxx - 1;
    var val3 = parseInt(calYear, 10);
    var firstCalDay = new Date(val3, val2, 1);
    var val0 = firstCalDay.getDay();
    startIndex = val0 + 1;
    var dayCount = 1;
    for (x = 1; x < 38; x++) {
        var cell = document.getElementById('cell' + x);
        if (x < startIndex) {
            cell.innerHTML = ' ';
            cell.className = 'firstCell';
        }
        if (x >= startIndex) {
            cell.innerHTML = dayCount;
            cell.className = 'filledCell';
            for (p = 0; p < fillDate.length; p++) {
                if (dayCount == fillDate[p]) {
                    if (fillDate[p].length == 1) {
                        fillURL = '0' + fillDate[p];
                    } else {
                        fillURL = fillDate[p];
                    }
                    cell.className = 'highlightCell';
                    cell.innerHTML = '<a href="/search?updated-max=' + calYear + '-' + callmth + '-' + fillURL + 'T23%3A59%3A59' + timeOffset + '&updated-min=' + calYear + '-' + callmth + '-' + fillURL + 'T00%3A00%3A00' + timeOffset + '" title="' + fillTitles[fillDate[p]].replace(/"/g, '\'') + '">' + dayCount + '</a>';
                }
            }
            if (dayCount > fill[valxx]) {
                cell.innerHTML = ' ';
                cell.className = 'emptyCell';
            }
            dayCount++;
        }
    }
    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) - 1;
    if (visTotal > 35) {
        document.getElementById('lastRow').style.display = '';
    }
}

function initCal() {
    document.getElementById('blogger_calendar').style.display = 'block';
    var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
    var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
    document.getElementById('bloggerCalendarList').style.display = 'none';
    calHead = document.getElementById('bcHead');
    tr = document.createElement('tr');
    for (t = 0; t < 7; t++) {
        th = document.createElement('th');
        th.abbr = headDays[t];
        scope = 'col';
        th.title = headDays[t];
        th.innerHTML = headInitial[t];
        tr.appendChild(th);
    }
    calHead.appendChild(tr);
    for (x = 0; x < bcInit.length; x++) {
        var stripYear = bcInit[x].href.split('_')[0].split('/')[3];
        var stripMonth = bcInit[x].href.split('_')[1];
        bcList.push(stripMonth + ',' + stripYear + ',' + x);
        bcNav.push(bcInit[x].href);
    }
    var sel = document.createElement('select');
    sel.id = 'bcSelection';
    sel.onchange = function() {
        var cSend = this.options[this.selectedIndex].value.split(',');
        openStatus();
        callArchive(cSend[0], cSend[1], cSend[2]);
    };
    q = 0;
    for (r = 0; r < bcList.length; r++) {
        var selText = bcInit[r].innerHTML;
        var selCount = bcCount[r].innerHTML.split('> (')[1];
        var selValue = bcList[r];
        sel.options[q] = new Option(selText + ' (' + selCount, selValue);
        q++
    }
    document.getElementById('bcaption').appendChild(sel);
    var m = bcList[0].split(',')[0];
    var y = bcList[0].split(',')[1];
    callArchive(m, y, '0');
}

function timezoneSet(root) {
    var feed = root.feed;
    var updated = feed.updated.$t;
    var id = feed.id.$t;
    bcBlogId = id.split('blog-')[1];
    upLength = updated.length;
    if (updated.charAt(upLength - 1) == "Z") {
        timeOffset = "+00:00";
    } else {
        timeOffset = updated.substring(upLength - 6, upLength);
    }
    timeOffset = encodeURIComponent(timeOffset);
}

function togglecomments(postid) {
    var whichpost = document.getElementById(postid);
    if (whichpost.className == "listshown") {
        whichpost.className = "listhidden";
    } else {
        whichpost.className = "listshown";
    }
}
//]]>
</script>
<script chartset='utf-8' src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'
/>

Luego buscamos en la plantilla el gadget de Archivo del blog

<b:widget id='BlogArchive1' locked='false' title='XXXXXXX' type='BlogArchive'>
.......
</b:widget>

Borramos todo lo que este entre el Abre y Cierra widget, lo que sería los puntos suspensivos y pegamos este código

<b:includable id='toggle' var='interval'>
  <!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='interval' var='intervalData'>
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>
<!-- Table Header -->
<thead id='bcHead'/>
<!-- Table Footer -->

<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'/>
<td id='bcFootAll'/>
<td id='bcFootNext'/>
</tr></table>   

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<a href='javascript:togglecomments("calendarDisplay")' title='Click para mostrar'>+/- Ver artículos de este mes</a>
<div class='listhidden' id='calendarDisplay'/>

</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='menu' var='data'>
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>

Se guardan los cambios y probamos el resultado, el calendario se cambia de colores aplicando los estilos que queramos.

Mystique: Efecto elegante para las imagenes

2011-07-30T09:26:00.000-07:00

Publicar imágenes de gran calidad es un problema cuando usamos blogger, ya que la imagen se puede salir de los margenes dejándonos un blog con mala presentación.

La solución a ese problema es agregar efecto a las imágenes para que cuando se de clic sobre ellas se muestre la imagen de tamaño original lo que da muchas ventajas a la hora de cargar la página porque solo estaremos cargando las miniaturas y las imágenes tamaño completo cuando un usuario quiera verlas.

Para lograr el efecto debemos agregar las siguientes lineas antes del </body> de la plantilla.

<script src='http://sites.google.com/site/rincondelrecursoweb/home/jquery.mystique.min.js' type='text/javascript'/>
<script type='text/javascript'>
    var isIE6 = false;
    var isIE = false;
</script>

Las ponemos en ese lugar para que sea lo último en cargar y no dificulte la lectura de la página.

Adicionamos los estilos antes de ]]></b:skin>

#fancy_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FFF;
background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
display: none;
background: -moz-linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
display: none; }

#fancy_wrap { text-align: left; }

#fancy_loading {
position: absolute;
height: 100px;
width: 100px;
cursor: pointer;
display: none;
overflow: hidden;
background: transparent;
z-index: 100; }

#fancy_loading {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background:transparent url(http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjooED7j8M6RzAHE_opLfKYzI9ZFptm3eB-_mYtNv0khyphenhyphenzc6i56RBJAKD6vB7kmrdXpVkiwdxXZ8sCG95iftZrgUtBuPAorMzH2DvtjLrTDnPJEU255t2sJDl0NTNxcWeQ0OHyWEcxKbdha/s1600/loader.gif) no-repeat; }

#fancy_loading_overlay {
position: absolute;
background-color: #FFF;
z-index: 30; }

#fancy_outer {
position: absolute;
top: 0;
left: 0;
z-index: 90;
padding: 18px 18px 33px;
margin: 0;
overflow: hidden;
background: transparent;
display: none; }

#fancy_inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 12px;
box-shadow: 0px 0px 25px rgba(0, 0, 0, .5); }

#fancy_content {
margin: 0;
z-index: 100;
position: absolute; }

#fancy_ {
background: #000;
color: #FFF;
height: 100%;
width: 100%;
z-index: 100; }

img#fancy_img {
position: absolute;
top: 0;
left: 0;
border: 0;
padding: 0;
margin: 0;
z-index: 100;
width: 100%;
height: 100%; }

#fancy_frame {
position: relative;
width: 100%;
height: 100%;
display: none; }

#fancy_ajax {
width: 100%;
height: 100%;
overflow: auto; }

a#fancy_left,a#fancy_right {
position: absolute;
bottom: 0;
height: 100%;
width: 35%;
cursor: pointer;
z-index: 111;
display: none;
outline: none; }

a#fancy_left { left: 0; }

a#fancy_right { right: 0; }

span.fancy_ico {
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 42px;
z-index: 112;
cursor: pointer;
display: block;
opacity: 0.5; }

span#fancy_left_ico { left: -9999px; }

span#fancy_right_ico { right: -9999px; }

a#fancy_left:hover { visibility: visible; }

a#fancy_right:hover { visibility: visible; }

a#fancy_left:hover span { left: 20px; }

a#fancy_right:hover span { right: 20px; }

.fancy_bigIframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent; }

#fancy_title {
width: 100%;
z-index: 100;
display: none;
background: #4e4e4e;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 150%;
padding: .2em 0; }

No hay necesidad de especificar clases a las imagenes con este script se detectan todas las etiquetas <a> que contenga un enlace a una imagen .jpg, .png o .gif

Mejorar el SEO del blog con la etiqueta title en los títulos de las entradas.

2011-07-25T09:48:00.000-07:00

Las dos imágenes anteriores tienen una pequeña diferencia, en la segunda imagen podemos ver un elemento emergente que aparece cuando posicionamos el ratón sobre el enlace y dicho elemento lo proporciona la etiqueta title que repite el contenido del titulo de la entrada.

Si queremos que nuestras entradas sean las primeras en los buscadores, principalmente el buscador de Google por su uso masivo, debemos usar la etiqueta title ya que ayuda a los robot a indexar más datos sobre la información que se enlaza en el titulo o en la que se guarda en una imagen. Lo ideal sería que cada enlace que dirija a una entrada del blog o web tenga su propia etiqueta title con información clave sobre el contenido pero sabemos que es muy tedioso y que en las plataformas para blogs estamos imposibilitados para lograr cambios personalizados por entrada.

Todos debemos conformarnos con saber que un buen titulo de la entrada proporciona muchas de las palabras importantes y que el mismo titulo estaría bien para usarlo dentro de la etiqueta title.

Para implementar el cambio al blog damos clic en Diseño/Edición HTML y se habilita "Expandir plantillas de artilugios" y buscamos el fragmento siguiente

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>

y lo reemplazamos por este otro

<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='"Título: " + data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' expr:title='"Título: " + data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>

Pueden variar el texto en Título: por la frase o palabra que quieran que aparezca.

Indice del blog por Autores

2011-07-21T08:28:00.000-07:00

Hace una semana publique el indice o sitemap de nuestro blog con el que ordenábamos el contenido con orden alfabético de las etiquetas y donde se agregaba una etiqueta Nuevo a las entradas más nuevas.

Hoy les entrego un nuevo indice, en este caso se ordenan los contenidos según el autor, se puede usar como gadget, en una página nueva o en la entrada que queramos.

La idea me la dio uno de los blog a los que sigo para buscar contenido nuevo pero no me gusto la forma en la que se presenta la información porque carece de clases y de etiquetas y por lo tanto se complica el agregar estilo a la forma en la que se muestran las entradas de cada autor.

Por lo anterior me decidí a modificar el código de mi indice y lograr los mismos resultados pero con las opción de agregar css.

El indice tiene dos estados para cada autor, uno es abierto donde se muestran las contribuciones y el otro es cerrado para aprovechar el espacio vertical y ocultar lo que no queremos ver.

Estado cerrado

Estado abierto

Por defecto el contenido de los autores estará cerrado por lo que el código es excelente como gadget de cualquier blog con múltiples autores.

Para usarlo agregamos un gadget de contenido HTML/JavaScript o creamos una página o una nueva página y activamos "Edición HTML" y pegamos el siguiente código si lo queremos usar sin los css pre configurados.

<style type='text/css'>
.Visible {display: block;}
.Oculto {display:none;}
</style>
<script type="text/javascript" src="http://sites.google.com/site/rincondelrecursoweb/home/author1.0.js" ></script>
<script src="http://rinconubuntero.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Por lo que se vera como así.

Para usar el css configurado pegamos el siguiente código

<link rel="stylesheet" href="indice.css" type="text/css" media="screen" />
<style type='text/css'>
.Visible {display: block;}
.Oculto {display:none;}
</style>
<script type="text/javascript" src="http://sites.google.com/site/rincondelrecursoweb/home/author1.0.js" ></script>
<script src="http://rinconubuntero.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Y el resultado será el siguiente

En cualquiera de los casos cambiamos el texto en rojo (http://rinconubuntero.blogspot.com) por la dirección de nuestro blog, se guardan o se publica la entrada y el trabajo esta hecho.

Agregar el botón Ir Arriba con efecto

2011-07-18T16:27:00.000-07:00

He visto muchos botones Ir Arriba pero la transición es un poco violenta, navegando encontré un bonito botón en un lado y en otra parte una buena transición que usa JQuery por lo que resulta bastante bonita y con una velocidad que cambia según lo lejos que estemos de la parte superior del blog o de la web.

Solo deben pegar las siguientes lineas justo después del <body> o si lo quieren justo antes del </body>

Para los que ya tienen Jquery en su plantilla o en su web

<script type="text/javascript">

//<![CDATA[
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function()
{$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#toTop").scrollToTop();
});
//]]>
</script>
<style>
#toTop {
text-align:center;
padding:0px;
position:fixed;
bottom:0px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
filter:alpha(opacity=40);
opacity:.50;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /*--IE 8 Transparency--*/
}
</style>
<span" id="toTop" title="Ir Arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOT4BRe8rsYakIMoCGeNelipFNZkQPzkOTofkZlomfx_6dnV5LPA8HUpRnCMSJfoM3YvX3AgDcUUsmtwF4D0DJrj_ZUpsgq1HPKi-GCxI_gKwWHGiTSLuB8lbNiImH3zbL3gCJTB-K620/s200/arrow8a.png"/>
</span>

Y los que no tienen Jquery usen este

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

<script type="text/javascript">
//<![CDATA[
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function()
{$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#toTop").scrollToTop();
});
//]]>
</script>
<style>
#toTop {
text-align:center;
padding:0px;
position:fixed;
bottom:0px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
filter:alpha(opacity=40);
opacity:.50;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /*--IE 8 Transparency--*/
}
</style>
<span" id="toTop" title="Ir Arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOT4BRe8rsYakIMoCGeNelipFNZkQPzkOTofkZlomfx_6dnV5LPA8HUpRnCMSJfoM3YvX3AgDcUUsmtwF4D0DJrj_ZUpsgq1HPKi-GCxI_gKwWHGiTSLuB8lbNiImH3zbL3gCJTB-K620/s200/arrow8a.png"/>
</span>

El código es igual de valido para Blogger o para su propia web, solo se deben agregar las lineas y el trabajo estará hecho.

Al código le hice un pequeño ajuste para que su comportamiento fuera diferente al original

Fuente: Ciudad Blogger y Adicción Blogger

Nuevas herramientas para desarrollo Web

2011-07-14T17:10:00.000-07:00

En estás ultimas horas agregue al blog dos herramientas muy importantes para el diseño web adecuado, el generador de metatags enfocado a la mejoramiento del nuestro posicionamiento y el generador Limsum para hacer las pruebas de nuestras web como probar como se ve el contenido, alineación o reconocimiento de caracteres especiales. Prueben cada uno y hagan sus valoraciones, estaré atento a las correcciones y mejoras que sean propuestas.

Indice o Mapa del Sitio automático

2011-07-12T06:46:00.000-07:00

Muchos blogs están implementando los mapas del sitio o los indices para mostrar todas las publicaciones, esto tiene ventajas porque muestra de forma amable los títulos de las entradas manteniendo toda la información ordenada y explicita.

Ahora les voy a dar los pasos para que puedan usar el mismo indice que yo utilizó y darle unas pautas para lograr la personalización para que lo puedan adaptar a sus necesidades.

Se dirigen a Creación de entradas, seleccionan Editar páginas y crean una nueva página.
Hacen clic en Edición de HTML y agregan lo siguiente

<link href="http://sites.google.com/site/rincondelrecursoweb/home/indice.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="http://sites.google.com/site/rincondelrecursoweb/home/indice.js"> </script> 
<script src="http://ELNOMBREDESUBLOG.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script>

Deben cambiar el texto ELNOMBREDESUBLOG por la dirección de su blog
Publican la nueva pagina y el indice se cargara automaticamente llenándose con las etiquetas y títulos de todas las entradas.

Para hacer cualquier cambio o ajuste de presentación para sus propios blog agregan esto después de

<link href="http://sites.google.com/site/rincondelrecursoweb/home/indice.css" media="screen" rel="stylesheet" type="text/css"></link>

<style type="text/css">
.gfg-root { /*Box containing index*/
/*Para cambiar la forma en la que se ve la caja*/
}
.gfg-title { /*Title of the box*/
}
.gfg-title a {
}
.gfg-subtitle { /*The Labels of blog*/
/*Esta es la forma en las que se ven las etiquetas*/
}
.gfg-subtitle a {
/*Color de la etiqueta*/
}
.gfg-entry { /*Inner box*/
/*Diseño de la caja en la que van los titulos*/
}
.gfg-list a{
/*Color y estilo del título de las entradas*/
}
.gfg-listentry {
/*Alineación de los títulos*/
}
.gfg-listentry-odd {
/*Color de fondo del primer titulo*/
}
.gfg-listentry-even {
/*Color de fondo del título siguiente*/
}
</style>

Es necesario saber un poquito sobre css pero en la web existen lugares que nos pueden dar solución a nuestras preguntas sobre ese tema.

Traductor para blogger usando JQuery que no cambia el estilo de nuestro blog

2011-07-11T13:58:00.000-07:00

Todos queremos que nuestro blog sea más internacional y que si tenemos la oportunidad de obtener visitantes de otras lenguas poderlos convencer de quedarse un rato más y volver.
A continuación voy a mostrarles como agregar una bonita caja de banderas para que pueden traducir el blog sin cambiar el estilo de este.

En nuestra sidebar agregamos un nuevo gadget de tipo codigo HTML/Javascript
Le damos un titulo como "En su Idioma" u otro que indique que es un bloque traductor.
Agregamos el siguiente contenido.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-translate.googlecode.com/files/jquery.translate-1.4.7-debug-all.js"></script>
<script type='text/javascript'>
//<![CDATA[
function doTranslate(lang_pair) {

if(lang_pair.value)lang_pair=lang_pair.value;var
lang=lang_pair.split('|')[1];if(lang=='pt')lang='pt-PT';
jQuery.cookie('glang', lang);
jQuery(function($){$('body').translate('es', lang, {toggle:true});})
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function DoTo(Idioma) {

if(Idioma==1) doTranslate('es|es');
if(Idioma==2) doTranslate('es|en');
if(Idioma==3) doTranslate('es|pt');
if(Idioma==4) doTranslate('es|fr');
if(Idioma==5) doTranslate('es|it');
if(Idioma==6) doTranslate('es|de');

}
//]]>
</script>
<script type="text/javascript" src="http://jq-ingrid.googlecode.com/svn-history/r6/trunk/js/jquery.cookie.js"></script>

<div class="languages">
<table border="0">
<tr>
<td><a href="javascript:DoTo(1)" title="Español"><img alt="Español" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZd-KfGhZdyhaCC6hHc9U2PMBgd_Vqi5LmuGzUjMveMaTwhYFlRiFKLs0bItIimeQIE_yh6HFgP867T7MEQzztSlY9fy722WsJXJIoPy9LEQ4b2iUGdgTHUXSezNX9kF2SU7gq1BfUcNd/s1600/es.png" width="30"/></a></td>
<td><a href="javascript:DoTo(2)" title="English"><img alt="Inglés" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPlyafMz2EUeAtF3V_MFS-o2B1Gbm9klp8CChiNOyAEf2VqsZ9bryjCwAjY2qvtt8IeucT-J0T6gfqpkwGuk2g2II-rT5s3ty6y0IQM8uhZtXQLByAWUGGsDsyg_aV1niaO1_TEKifGysY/s1600/uk.png" width="30"/></a> </td>
<td><a href="javascript:DoTo(3)" title="Português"><img alt="Portugués" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5VFkbgBpUBi6Koygk-kkaohF4-lwYtzL3lqCWvJUpUNZRc5O34K8wuZHTQJSnMWGYmW2293tnnSt6VR6QwK6O_xg-TVbMbxbglicxO7A2LtXPHv8pvJL8T8mXQeGW93FsdPBQRDHPTYY/s1600/pt.png" width="30"/></a> </td>
<td><a href="javascript:DoTo(4)" title="Française"><img alt="Francés" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwFjnSLtNbXFvmKStxxyIgLlGWIoA2oESTmkKEmBcZln_46vyVtNabewFXrY4mgwwnGVBlQOCOrfrwMZupZXjvt7bDbpTnv2VzntX7Ge4F4ub2qzFXdrpUgpPK94zUvnemYXQ3jPrmNYQ8/s1600/fr.png" width="30"/></a> </td>
<td><a href="javascript:DoTo(5)" title="Italiano"><img alt="Italiano" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn1k5fbZhULImIrLqsXpY_FrK-ZnewOOwMrYsbSIU3gy6c9_P-KretDKLm1WFWckZsGRL4q9l_g3eY39JhFsDq6u-xHruCqCoMtEesqxyfgMDOJXhqqRVQdQTb_UlmPYwcr2e3Bv8WOU_a/s1600/it.png" width="30"/></a> </td>
<td><a href="javascript:DoTo(6)" title="Deutsch"><img alt="Alemán" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuFcMh0vEXjp5f-ZmAIQyv1tkVakWhT6_J9mLyRb6uHDDCz9FfEB1W-JF_8FZGCquOv9fUb_ZYt0H59bnnoc26lq8iOGFPondZguHbj-4oK9CdYfSRBDXVDvFIlQqbM1KyxqEPYmvsZLQL/s1600/de.png" width="30"/></a> </td>
</tr>
</table>
</div>

Esta es mi propia opción y como esta acá no lo van a encontrar en otra parte y como es codigo HTML pueden usarla en cualquier web ubicando el código el en área que desea la herramienta, espero la disfruten y compartan sin olvidad recomendar la fuente.

Botones Sociales con contadores

2011-07-11T12:01:00.000-07:00

En esta entrada les presento una buena opción para implementar los botones para compartir el contenido de nuestro blog.

Para añadirlo a nuestra plantilla blogger seguimos los pasos siguientes.

Nos dirigimos a Diseño/Edición de Html o en Plantilla/Editar Plantilla en la nueva interfaz de Blogger.
Expandimos los artilugios.
Buscamos la sección con el contenido

<div class='post-header'>

<table class='SocialButtons'>
    <tr>
        <td>
            <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=61&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;'
            frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:75px; height:61px'/>
        </td>
        <td>
            <a class='twitter-share-button' data-count='vertical' data-lang='es' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
            <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
        </td>
        <td>
            <g:plusone expr:href='data:post.url' size='tall'/>
        </td>
        <td>
            <a class='google-buzz-button' data-button-style='normal-count' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
            <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
        </td>
    </tr>
</table>

Le aplicamos un poquito de estilo a la tabla de botones buscando la linea

]]></b:skin>

.post-share-buttons { }   
.post-header table.SocialButtons{ width: auto; float:right; /*Para alinear los botones a la derecha debajo del titulo*/}    
.post-header table.SocialButtons td{ vertical-align:bottom; /*Alineación vertical de los botones*/ }

Guardamos los cambios en la plantilla y probamos el resultado.

Primera entrada

2011-07-08T08:15:00.001-07:00

Hoy nace un nuevo blog en el cual se irán agregando trucos que he utilizado para crear otros blogs y páginas webs.

Espero que les guste y compartan y si lo desean entren en contacto para hacerlos editores del blog.