Mostrando entradas con la etiqueta Gadget. Mostrar todas las entradas
Mostrando entradas con la etiqueta Gadget. Mostrar todas las entradas

viernes, 4 de enero de 2013

Agregar el Gadget de Seguidores de Google+ sin actualizar tu perfil

Recientemente Blogger añadió el gadget de Seguidores de Google+ para que puedas agregar a tu blog fácilmente. Como todos los gadgets disponibles en Blogger, para agregarlo a tu blog, solo necesitas seleccionarlo de la lista de gadgtes que aparece al añadir un gadget desde Diseño, aunque éste aparecerá solo si has actualizado tu perfil de Blogger al de Google+, mostrando los seguidores de tu perfil o página en Google+, según lo tengas configurado.




Gadget de seguidores de Google+



Si no has actualizado tu perfil de Blogger al de Google+, y agregas el gadget de seguidores de Google+, éste no aparecerá, ya que este elemento obtiene los datos que tengas configurados a través de la pestaña "Google+". Recuerda que desde ahí asocias tu blog con tu cuenta de Google+.



Pues bien, podemos mostrar el gadget de seguidores de Google+ aún si no hemos actualizado el perfil de Blogger por el de Google+, usando su código y añadiéndolo a un gadget con la opción de HTML/Javascript. Simplemente editamos un poco el código del gadget para que podamos poner los datos que se necesitan desde ahí.




Cómo agregar el gadget de seguidores de Google+ habiendo o no actualizado el perfil de Blogger al de Google+







  1. Copia el siguiente código y edita lo que está resaltado de rojo, considerando que en:




    • data-height="300definirás la altura. Edita el valor de 300 por el valor que desees.

    • data-width="320definirás el ancho. Edita el valor de 320 por el valor que desees.

    • En: https://plus.google.com/109627432877953314897 cambia el número del ID resaltado de rojo por el ID de tu página en Google+ o  el del perfil en cuestión*.

    • En donde dice "Seguidores en Google" pones el texto del título que tendrá en gadget.




    Código


    <h2>Segidores en Google</h2>



    <div class="g-plus" data-action="followers" data-height="300" data-source="blogger:blog:followers" data-href="https://plus.google.com/109627432877953314897" data-width="320">


    </div>


    <script type="text/javascript">                    window.___gcfg = {lang: 'es'};


          (function() {


            var po = document.createElement('script');


            po.type = 'text/javascript';


            po.async = true;


            po.src = 'https://apis.google.com/js/plusone.js';


            var s = document.getElementsByTagName('script')[0];


            s.parentNode.insertBefore(po, s);


          })();


        </script>





    *Nota: Para obtener el ID de la página de Google o del perfil, necesitas ir a la página de éste en Google+, y copiar la numeración que aparece en la barra de direcciones:




    El id de la pagina de Google+




  2. Desde el panel de Blogger, haz click en la pestaña "Diseño", y añade un gadget con la opción HTML/Javascript, poniendo el código anterior ya editado.

  3. Guarda los cambios en Guardar disposición.       




Y listo, ya habrás agregado el gadget de seguidores de Google+.



Notas importantes


  • El script de este gadget es el mismo que usa el botón +1 y la insignia de Google+ (cuando se usa la opción de código asíncrono y sintaxis HTML5 válida), si  ya usas en tu blog alguno de ellos, entonces pon el script (resaltado de azul) después del último de los elementos que coloques de arriba hacia abajo de tu blog. Si por ejemplo ya tuvieras colocado el botón de +1 y pusiste el script de éste antes del cierre de la etiqueta body: </body>, deja el script ahí  y no lo vuelvas a poner en el gadget.


Espero sea útil.







miércoles, 28 de noviembre de 2012

Nuevo Gadget de Seguidores de Google+ en Blogger y cómo empezar a usarlo

Ayer agregué al blog el nuevo gadgtet de Seguidores de Google+, mismo que anunciaban oficialmente desde Blogger Buzz, y parece que todo funciona de maravilla. Se reportó un problema con quienes usan las vistas dinámicas, al parecer el gadget no se veía, aunque desde el Blog de los problemas conocidos de Blogger se publicó que esto podía solucionarse si se vaciaba la caché del navegador y se volvía a cargar la página.



El gadget de Seguidores de Google+ le facilitará a los usuarios de tu blog que puedan agregarte a un círculo, y así seguir el contenido que publicas y envías a tu página de Google+, o a tu perfil en Google+, según como lo tengas configurado en tu cuenta de Blogger.




Gadget de seguidores de Google+









Cómo empezar a usar el gadget de Seguidores de Google+




Una vez que hayas actualizado tu perfil de Blogger al de Google+, puedes empezar a usar el gadget y desde ahí, los usuarios de tu blog podrán agregarte a un círculo, función que ya cumplía el gadget de "Insignia de Blogger" que no hace mucho fue habilitado, con la diferencia de que este nuevo gadget mostrará la foto del perfil en Google+ de quienes te han agregado, y un enlace que mostrará el resto de tus seguidores desde Google+. Es un gadget similar al de Google Friend Connect o "Seguidores", y puedes usar de forma simultánea con éste, si así lo deseas.



Si eres usuario nuevo de Blogger, y aún no utilizas Google+, no puedes perder la oportunidad de vincular tu cuenta de Blogger a tu perfil de Google+ o mejor aún, crear una página para tu blog y así hacer crecer tu audiencia favoreciendo la promoción de tu blog y establecer vínculos con otros blogueros como tú.





Cómo actualizar mi perfil de Blogger a mi perfil de G+ 





1. Desde el panel de Blogger, ve a la pestaña de "Google+" y luego actualiza tu perfil de Blogger al de Google haciendo click en "Actualizar a Google+".




Actualizar perfil de Google+




Para ello, lo ideal es que ya hayas actualizado tu perfil en Google+, poniendo una foto tuya, y los datos que consideres pertinentes y que quieras mostrar en la Web.



2. Luego, aceptas los términos que implica el cambio, mismos que ahí se explican, y actualizas tu perfil en "Cambiar ahora".




Cambiar perfil de Blogger por perfil de Google+





El nombre que aparece en la imagen es ficticio y muestra solo un ejemplo.



3. Hecho lo anterior, ya habrás asociado tu blog al perfil de Google+, y tanto el gadget de "Perfil", así como tus entradas y comentarios serán enlazados a tu perfil de Google+. Además, ya puedes empezar a usar el gadget de Seguidores de Google+.





Cómo agregar el gadget de Seguidores de Google+




Es muy simple y lo haces del mismo modo que agregas cualquier otro gadget. Desde la pestaña "Diseño" del panel de Blogger, haces click en agregar un gadget, y eliges la opción de "Seguidores de Google+"




Nuevo gadget de seguidores



Por el momento, (no se si sea permanente) no hay opciones que configurar en este gadget, así que sólo hay que guardarlo para que se agregue.



Conclusiones 



Tal y como lo mencionan desde el blog de los productos de Google en español y en el mismo Blogger Buzz, creo que este gadget le da más relevancia a tus seguidores de Google+, puede hacer crecer más tu audiencia, ya que éste siempre estará visible desde tu blog, ¿tú que piensas?



Al asociar tu blog con la cuenta de Google+, tendrás múltiples beneficios como la capacidad de poder compartir entradas fácilmente cada vez que publiques, y poder agregar la fotografía de tu perfil en G+, en los resultados de búsqueda de Google, ¿ya lo has hecho?.



Y aprovechando la ocasión, "Muchas gracias por agregarme a un círculo y seguir mi contenido" ;)



+ Información sobre el tema y referencias

Gadget de Seguidores de Google+

Cómo administrar la configuración de Google+ de tu blog

miércoles, 4 de abril de 2012

2 Nuevos Gadgets en Blogger: Botón +1 e Insignia de Google+

Blogger ha añadido dos nuevos gadgets para que puedas poner en tu blog, siguiendo unos simples pasos.

Se trata de dos gadgets que están estrechamente relacionados con Google, y su notable interés en impulsar su servicio de Google+. Estos gadgets permitirán aumentar las recomendaciones a tu blog, en la búsqueda Google.



El primer gadget es el botón +1, y al agregarlo, los usuarios de tu blog podrán recomendar tu contenido en la búsqueda de Google. El segundo es la Insignia de Google+, que servirá para que los usuarios de tu blog te agreguen a un círculo y así aumentar tu audiencia en Google+.















Gadget con el Botón +1



Si aún no lo tienes, ahora lo podrás agregar muy fácilmente y sin complicaciones, sólo ve a diseño, usando la nueva interfaz, y agrega el gadget, seleccionando la opción de Botón +1.





Nuevo gadget de Blogger








Podrás elegir el tamaño del botón,  y el tipo de anotación como se muestra en la imagen.





nuevo gadget de blogger




Una vez configuradas tus preferencias, guardas los cambios y listo, ya tienes integrado el botón +1 para que los usuarios de tu blog recomienden tu contenido en Google.





























Gadget con la Insignia de Google+



Otro elemento que ya antes estaba disponible desde Google Developers, y que ahora podrás agregar fácilmente desde la sección de Diseño de tu blog, y así, aumentar tus posibilidades de capturar a una mayor audiencia en Google+. 





Para agregarlo, simplemente vas a Diseño y seleccionas el gadget de Insignia de Google+





Nuevo gadget de insignia de google en blogger









Luego, tendrás que añadir el ID de tu página en Googe+, o el ID del perfil de Google, si no tuvieras página de Google+, en el campo correspondiente, como se aprecia en la imagen:





Configuracion del gadget de insignia de blogger











El ID de tu página lo consigues yendo a la página de Google+, y copiando la numeración que aparace entre las barritas diagonales, en la barra de direcciones del navegador. Si no tienes página y si así lo quieres, puedes usar tu perfil, entonces tendrás que ira a la página de tu perfil e igualmente copiar la numeración.





El Id de la pagina de Google








Luego eliges el color de fondo, guardas los cambios y listo, ya tienes instalado el gadget con la insignia de Google+ en tu blog.





Nota: En las imágenes muestro el ID de mi perfil, no de mi página.
















Notas Finales y conclusiones



Estos gadgets, como el resto de gadgets que Blogger ofrece, hacen más accesible elementos claves para el blog, de tal modo que, cualquier usuario de Blogger puedan añadirlos fácilmente.






Sin duda Google está concentrando sus esfuerzos en facilitar aplicaciones dentro de su plataforma de blogs (Blogger) para promover su conocido servicio de Google+, valiéndose del argumento de que esto ayudaría a obtener más recomendaciones para la página web en su motor de búsqueda y la consecuencia sería entonces: ¿colocar a los sitios en una mejor posición en su motor?, a mi no me queda muy claro...




*Actualizado (Algunas palabras en la redacción).




jueves, 1 de marzo de 2012

3 Nuevas opciones de botones de redes sociales para que sigan tu blog (widgets)


iconos sociales



Así como ocurre en las telenovelas, este post es la continuación del anterior, donde compartía contigo cuatro opciones de iconos sociales, listos para que los pongas en tu blog. En esta ocasión he preparado otras tres opciones, para que tengas más posibilidades de que alguna se adapte al diseño de tu blog, y al igual que la vez anterior, también usan solo una imagen.



Y por si fuera poco, para que sea todavía más fácil, en este caso, vas a poner todo el código (CSS+HTML), en un gadget, eligiendo la opción HTML/Javascript, solo vas a llevarte el código completo de los botones que más te gusten, y vas a editar lo que resalté con rojo, al final del código.



Cómo poner los botones, paso a paso



Paso 1. Ve a Diseño, o elementos de la página de la vieja interfaz, y pon el código completo de los botones que te gustaron, en un gadget HTML/Javascript.



Paso 2. Luego, edita la última parte del código, que es la del HTML y resalté de azul,  escribiendo la dirección web de la red social, donde está la almohadilla (#). Es fácil saber a que red corresponde cada almohadilla, ya que antes verás la clase (class), que lleva el nombre de la red.



Por ejemplo, esta es la linea de código en el HTML, del botón de Twitter:



<li><a class="twitter" href="#"><span>Twitter</span></a></li>



Ahí donde esta la almohadilla o signo de número  (#), pones la dirección web de tu cuenta de Twitter. El gatito se debe de quitar, solo debe de llevar la dirección web, cuidado con no borrar las comillas antes y después.También puedes editar el texto del tooltip y que en este caso, dice: Twitter.



Paso 3. Ya que editaste el código para todos los botones, guarda los cambios y listo ;)









(ver opciones 5,6, y 7)

Opción 5




botones sociales











 Código (CSS + HTML) 




<style type="text/css">

ul#m-soc5{  margin:19px 0 0 10px; padding:0; width:220px; height:60px}

ul#m-soc5 li{list-style:none; margin:4px; padding:0; float:left; border:none}

ul#m-soc5 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwwvycdEEXKudRbqzXKo5p6eXOoCXgUDPus6kzWlPNFpSOtLpqTBHeGlOdTrBdzuaECfNP0bpZTzcQw1NwWXhyN7dnFHb6slEMo3R3unfyMoXhBj8Bj3TPLVtjZMrFG1-q0CUtOx8atBZ/s400/sprite5-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:33px; height:33px; overflow:visible}

ul#m-soc5 li a.twitter{background-position:0 0}

ul#m-soc5 li a.facebook{background-position:-33px 0}

ul#m-soc5 li a.google{background-position:-66px 0}

ul#m-soc5 li a.youtube{background-position:-99px 0}

ul#m-soc5 li a.rss{background-position:-132px 0}

ul#m-soc5 li a span{background:#555; position:absolute; top:-5px; left:-10px;width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none;border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}

ul#m-soc5 li a:hover{text-decoration:none}ul#m-soc5 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-28px}

</style>





<ul id="m-soc5">

<li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="youtube" href="#"><span>Youtube</span></a></li><li><a class="rss" href="#"><span>Suscríbete</span></a></li>

</ul>





Opción 6 




iconos













 Código (CSS + HTML) 


<style type="text/css">

ul#m-soc6{  margin:19px 0 0 10px; padding:0; width:190px; height:55px}

ul#m-soc6 li{list-style:none; margin:4px; padding:0; float:left; border:none}

ul#m-soc6 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYaVfgETCZkeiNj4yFL6qva9CABT67Ib3170w7pnQOj_F1AuQFl8lECLWMhXG4wkgr8qpvHZEfOHmy0jdQfSpx9MQjpq_JwUUQ17L8RdVtKDOhj0TGjTET5vCaagmidNOEl5sU5lkO0Xu8/s400/sprite6-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:32px; height:32px; overflow:visible}

ul#m-soc6 li a.twitter{background-position:0 0}

ul#m-soc6 li a.facebook{background-position:-32px 0}

ul#m-soc6 li a.google{background-position:-64px 0}

ul#m-soc6 li a.rss{background-position:-96px 0}

ul#m-soc6 li a.twitter:hover{background-position: 0 -32px;}

ul#m-soc6 li a.facebook:hover{background-position: -32px -32px;}

ul#m-soc6 li a.google:hover{background-position:-64px -32px;}

ul#m-soc6 li a.rss:hover{background-position:-96px -32px;}

ul#m-soc6 li a span{background:#555; position:absolute; top:-5px; left:-10px; width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}

ul#m-soc6 li a:hover{text-decoration:none}ul#m-soc6 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-27px}

</style>






<ul id="m-soc6"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="rss" href="#"><span>Suscríbete</span></a></li></ul>





Opción 7




Iconos















 Código (CSS + HTML) 


<style type="text/css">

ul#m-soc7{margin:18px 0 0 10px; padding:0; width:280px; height:66px}

ul#m-soc7 li{list-style:none; margin:4px; padding:0; float:left; border:none}

ul#m-soc7 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdnv9dtzoamzuOd47XmQGS0rLjarogxDNCbyah_NwjesUQlwia4USbOWAcjXR6TF11Fnojs7-MgLOVj49mXmHf1N5pTfpQWF10TVZfGm901E2UR6v7LDE67PDWYM6cGGMjxPXIRWk3gOik/s400/sprite7-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:48px; height:48px; overflow:visible}

ul#m-soc7 li a.twitter{background-position:0 0}

ul#m-soc7 li a.facebook{background-position:-48px 0}

ul#m-soc7 li a.google{background-position:-96px 0}

ul#m-soc7 li a.youtube{background-position:-144px 0}

ul#m-soc7 li a.rss{background-position:-192px 0}

ul#m-soc7 li a.twitter:hover{background-position:0 -48px}

ul#m-soc7 li a.facebook:hover{background-position:-48px -48px}

ul#m-soc7 li a.google:hover{background-position:-96px -48px}

ul#m-soc7 li a.youtube:hover{background-position:-144px -48px}

ul#m-soc7 li a.rss:hover{background-position:-192px -48px}

ul#m-soc7 li a span{background:#555; position:absolute; top:-10px; width:auto; left:0;opacity:0; padding:3px; text-align:left;text-decoration:none; color:#fff; filter:alpha(opacity=0); white-space:nowrap; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}ul#m-soc7 li a:hover{text-decoration:none}

ul#m-soc7 li a:hover span{opacity:.8; filter:alpha(opacity=80); top:-24px}

</style>

<ul id="m-soc7"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="youtube" href="#"><span style="border:0;">YouTube</span></a></li><li><a class="rss" href="#"><span style="border:0;">Suscripción</span></a></li></ul>



Nota: Puse la URL de la imagen, de cualquier modo, te recomiendo que la alojes por tu propia cuenta en Blogger, para luego sustituirla, así evitas cualquier problema.



Actualización, 20/marzo/2012: Agregué una linea de código en el CSS, para que no se subraye el texto del tooltip; ésto ocurre solo en las plantillas que tienen una regla que hace que se subrayen todos los textos de los enlaces en la plantilla, al poner el puntero del ratón sobre un enlace.



Créditos por los botones:

awicons

Ca-creation

miércoles, 26 de octubre de 2011

Galería Horizontal con gadget de Entradas Populares con Título Deslizante (Tooltip)

Hace tiempo te decía como crear una galería de imágenes usando el gadget de entradas populares que ofrece Blogger, hoy vamos a crear una galería horizontal con ese gadget, y vamos a hacer que aparezca el título de la entrada en un tooltip.



Esto surge, porque estoy trabajando en una plantilla de recetas de cocina, (espérala muy pronto), y estaba pensando en incluirla, y hacerla mas funcional, mostrando el título de la entrada al poner el puntero del ratón encima de la imagen miniatura.



Inicialmente lo hice usando sólo CSS, y no queda tan mal, pero no tenía movilidad el tooltip, que es donde iría el título, así que mejor decidí probar un tooltip que funciona con jQuery, que exponen en el blog de Soh Tanaka, pensando en que ya  uso jQuery en la plantilla para otros propósitos.



Así es como luce:




configuracion de gadget de entradas populares



Anque puedes ver como funciona en la plantilla que te menciono, y que pronto estará lista para ser descargada.¿Te gusta?, entonces veamos como hacerlo.



Antes de empezar necesitas agregar el gadget de entradas populares, y marcar la opción de imagen en miniatura, sin el fragmento, y elegir el número de entradas a mostrar...




Galeria de imagenes con gadget de entradas populares



Hecho eso, entonces, empecemos con la personalización...



Como hacerlo paso a paso



Paso 1. Primero necesitamos agregar los estilos o CSS y para ello, vas a Diseño > Diseñador de Plantillas > Avanzado  y en el campo para Añadir CSS agregas lo siguiente:


#PopularPosts2 {

margin: 10px;

}

#PopularPosts2 h2{

display: none;

}

#PopularPosts2 ul {

width: 100%;

margin: 0;

}

#PopularPosts2 .item-title{

display: none;

}

#PopularPosts2 ul li {

float:left;

list-style-type: none;

padding: 0 5px 0 4px;

}

#PopularPosts2 li img {

background: #fff;

padding: 4px;

transition: all .5s linear; /*Transiciones*/

-o-transition: all .5s linear;

-moz-transition: all .5s linear;

-webkit-transition: all .5s linear;

}

.tip { /*Tooltip */

color: #fff;

background:#120b01;

display:none;

padding:10px;

position:absolute;

z-index:99;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

#PopularPosts2 li img:hover, .tip {

opacity:.6;

filter:alpha(opacity=60);

}

/*Para evitar el subrayado del texto del tooltip si se tuviera declarado en todos los enlaces*/

a.tip_trigger:hover {

text-decoration: none;

}


Lo que está marcado de azul, es opcional, la primera parte donde dice transiciones, es para crear efecto de desvanecimiento en la opacidad de la imagen en el hover, la segunda es para darle transparencia al fondo del tooltip, y la imagen, y la tercera para evitar que se subraye el texto del tooltip, cuando esté declarado en la plantilla en el hover de todos los enlaces, me refiero a esto:



a:hover {

...

text-decoration: underline;

}



Importante: Si es tu primer gadget de entradas populares el ID es #PopularPosts1, recuerda que Blogger los va numerando conforme los vas agregando.



Paso 2. Luego, vas a la edición de HTML de la plantilla, marcas la casilla de expandir plantilla de artilugios, y si no tienes jQuery lo agregas antes de </head>:


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

Paso 3. Inmediatamente después pones el script:


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show();
}, function() {
tip.hide();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY + 20;
var tipWidth = tip.width();
var tipHeight = tip.height();

var tipVisX = $(window).width() - (mousex + tipWidth);
var tipVisY = $(window).height() - (mousey + tipHeight);

if ( tipVisX < 20 ) {
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) {
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
//]]>
</script>



Paso 4. Después, buscas la parte que controla el gadget de entradas populares, cuando este sólo muestra imágenes, y que se ve de este modo:



<!-- (3) Show only thumbnails -->

            <div class='item-thumbnail-only'>

              <b:if cond='data:post.thumbnail'>

                <div class='item-thumbnail'>

                  <a expr:href='data:post.href' target='_blank'>

                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

                  </a>

                </div>





...y lo cambias por esto:


<!-- (3) Show only thumbnails -->

            <div class='item-thumbnail-only'>

              <b:if cond='data:post.thumbnail'>

                <div class='item-thumbnail' style='width: 72px; height: 72px;'>

                  <a class='tip_trigger' expr:href='data:post.href' target='_blank'>

                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/><span class='tip'><data:post.title/></span>

                  </a>

                </div>

Eso debería quedar antes del cierre de la condición: </b:if>, si no quieres que la entrada se abra en una ventana nueva, elimina lo que está de morado.





Paso 5.Verifica en vista previa, y si todo luce bien, guarda los cambios.



Listo, ya tienes un tooltip que muestra el título de la entrada de cada post respectivamente, en la galería de imágenes que muestra tus artículos más visitados =)



Notas



Como ya está implementado el tooltip, lo puedes usar en cualquier otro enlace de tu blog, ya sea para ponerlo en  imágenes que tengan enlace como en este caso, o bien, sólo en un enlace, y este es el HTML que necesitas:



Para un enlace:




<a href="#" class="tip_trigger">El texto del enlace<span class="tip">El contenido del tooltip</span></a>

Para una imagen:




<a href="#" class="tip_trigger"><img src="URL de la imagen" alt="" /><span class="tip">El contenido del tooltip</span></a>

Así de fácil y rápido ;)



*Actualizado



lunes, 24 de octubre de 2011

Crear una sección con pestañas para agregar cualquier gadget usando jQuery


sección con pestañas



Anteriormente, ya te había hablado como agregar una sección con pestañas para agregar ahí cualquier widget,  y hace unos días vi en net tus, una propuesta para crear secciones con pestañas que tiene un efecto deslizante. Me gustó para adaptarla a Blogger y poner ahí gadgets.



Esto permite mostrar contenido de una manera dinámica, sin ocupar mucho espacio, puedes verlo funcionando en el blog de demostración; ¿te gusta?, entonces veamos como ponerlo en tu blog.



Cómo hacerlo paso a paso (Nuevas Plantillas)



Paso 1: Primero agregas los estilos o CSS, y para ello, vas al Diseñador de Plantillas > Avanzado >Añadir CSS, (en la nueva interfaz, necesitas ir a Plantilla > Personalizar, para ingresar al Diseñador de Plantillas), y en el campo pegas lo siguiente:




/* Sección con pestañas*/

.boxy {

width: 100%;

margin: 15px 5px;

padding: 0;

background: #f3f1eb; /*el color de la seccion*/

border: 1px solid #dedbd1;

}

.boxy ul {

margin: 10px 2px 0 10px;     

padding: 0;

}

.boxy ul li {

margin: 0 0 10px 0;     

padding: 0;

border: none;

}

.boxy li a {

color: #123456;

text-align: left;

margin: 0;

padding: 0;

}

.boxy a:hover {

color: #009;

text-decoration: underline;

}

.tabnav li {

display: inline;

font-size: 12px;

}

.tabnav li a {

text-decoration: none;

text-transform: uppercase;

line-height: 180%;

color: #222;

font-weight: normal;

margin: 0;

padding: 4px;

outline: none;

}

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {

background: #dedbd1; /*color de la pestaña activa y hover*/

color: #222;

text-decoration: none;

}

.tabdiv {

margin: 0 10px 10px;

background: #FFF;

border: 1px solid #dedbd1; /*color de borde*/

padding: 4px 2px;

}

.tabdiv li {

list-style: none; 

margin: 0;

padding: 0;

}

.ui-tabs-hide {

display: none;

}

#col1, #col2, #col3 {

margin: 5px;

padding: 0;

font-size: 12px;

}

Si vas a usar gadget que tengan listas puedes agregar una imagen como viñeta en cada elemento de la lista, y para ello buscas:

           .tabdiv li {

            list-style: none; 

            ...

            }

...y cambias: list-style: none; por  list-style-image: url(mi_imagen.gif);.





Paso 2: Vas a a la edición de HTML de la plantilla y agregas jQuery y los scripts antes de </head> :


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

<script src='//sites.google.com/site/scriptskarla/archivos/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});

//]]>

</script>



IMPORTANTE


  • En el caso del archivo del segundo script que viene en la parte de morado, te recomiendo ampliamente que lo guardes en tu propio servidor.

  • Si ya usas jQuery, no lo agregues, pero si podrías por ejemplo, actualizar la versión.


Paso 3:  Vas a la Edición de HTML de la plantilla, y con la ayuda de ctrl F buscas </aside> pensando en que lo vas a poner en la columna derecha de tu blog y como último elemento en la columna:



 <aside>

          <macro:include id='main-column-right-sections' name='sections'>

            <macro:param default='2' name='num' value='1'/>

            <macro:param default='sidebar-right' name='idPrefix'/>

            <macro:param default='sidebar' name='class'/>

            <macro:param default='true' name='includeBottom'/>

          </macro:include>

          </aside>





Inmediatamente después agregas el HTML, y editas los títulos de cada pestaña,  que vienen marcados de rojo, y que deberán coincidir con cada gadget que pienses poner:


<!--sección con pestañas-->

<div class='boxy' id='tabvanilla'>

    <ul class='tabnav'>

    <li><a href='#pestana1'>Lo + nuevo</a></li>

    <li><a href='#pestana2'>Comentarios</a></li>

    <li><a href='#pestana3'>Lo + visto</a></li>

    </ul>

                                                <!--/pestana1--> 

    <div class='tabdiv' id='pestana1'>

    <b:section id='col1' maxwidgets='1' showaddelement='yes'>

</b:section>

</div>

  <!--/pestana2-->

<div class='tabdiv' id='pestana2'>

    <b:section id='col2' maxwidgets='1' showaddelement='yes'>

</b:section>

</div>

   <!--/pestana3-->

   <div class='tabdiv' id='pestana3'>

   <b:section id='col3' maxwidgets='1' showaddelement='yes'>

</b:section>

</div>

    <!--featured-->

         </div><!--/sección con pestañas-->

Nota: Si quieres que aparezca como primer elemento buscas:



<div class='column-right-inner'>



Inmediatamente después de esa linea lo agregas, también lo puedes poner antes del cierre de la etiqueta </aside> y quedará dentro de la envoltura, no hay diferencia ya que queda dentro del mismo div.



*Para las plantillas anteriores o de Diseño, buscas la envoltura de la columna lateral:



  <div id='sidebar-wrapper'>



...y si quieres que quede como primer elemento, lo pones inmediatamente después de esa linea, sino, antes del cierre del div "</div>" de dicha envoltura de la columna lateral. Generalmente así viene identificada, debes estar segura (o).



Paso 4: Checas en vista previa y si todo luce bien, guarda los cambios.





Paso 5: Después vas a los elementos de la página o Plantilla en el nuevo Diseñador de Plantillas y agregas los gadgets respectivamente haciendo que coincidan con los títulos de cada pestaña y guarda los cambios.





Puedes personalizar los colores de fondo de las secciones y pestañas así como el color de fuentes etc.

Funciona en todos los navegadores incluyendo Internet Explorer 6.



*Actualizado Oct/31/11

miércoles, 12 de octubre de 2011

Panel deslizante para mostrar cualquier gadget de Blogger


panel flotante



En spyrestudios vi un panel deslizante que funciona con jQuery y con CSS3 que me gusto para agregar ahí cualquier gadget, por ejemplo, cualquiera que de información sobre el autor y/o el blog, como el de perfil, agregar enlaces de tus redes sociales, (algo así muestran en el demo de spyrestudios) caja de Facebook, o una encuesta, etc, y pensé: ¿por qué no adaptarlo a Blogger para mostrar ahí gadgets?



Cómo funciona

Este panel o cajita contenedora será visible al hacer click en la pestaña o botón que flotará, y dentro de este  podrás agregar cualquier gadget de Blogger, para mostrar ahí el contenido que tu quieras.



Funciona con jQuery, y si ya lo usas en tu blog, puede ser una muy buena opción para ti, y si no, tal vez te animes a usarlo. Puedes ver como funciona en el Blog de demostración, y si te gusta, entonces ahora mismo te diré como ponerlo en tu blog.



Instrucciones paso a paso:

Antes de empezar recuerda guardar una copia de seguridad de tu plantilla.





Paso 1: Ve a Diseño > Diseñador de Plantillas > Avanzado > Añadir CSS, o si usas la nueva interfaz, ve a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el campo agrega este CSS:


/*Panel deslizante*/

.panel {

position: fixed;

top: 80px;

left: 0; 
/*si pones right se ira a la derecha*/

display: none;

z-index: 20;

background: #111010;

border:1px solid #111;

color: #FBFEFF;

-moz-border-radius-topright: 20px;

-webkit-border-top-right-radius: 20px;

-moz-border-radius-bottomright: 20px;

-webkit-border-bottom-right-radius: 20px;

width: 330px;

height: auto;

padding: 30px 30px 30px 130px;

}

.panel h2 {

color: #FBFEFF; /*el color del título de los widgets*/

}

.panel p{

margin: 0 0 15px 0;

padding: 0;

}

.panel a, .panel a:visited{

margin: 0;

padding: 0;

color: #44AEFF;

text-decoration: none;

}

.panel a:hover, .panel a:visited:hover{

margin: 0;

padding: 0;

color: #75FF55;

text-decoration: underline;

}

a.trigger{ /*la pestaña*/

position: fixed;

text-decoration: none;

top: 80px;

left: 0; 
/*si pones right se ira a la derecha*/

z-index:21;

font-size: 16px;

color:#fff;

padding: 20px 30px 20px 15px;

background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ZN6KVZZraFFpB4FHxFIssRtFEMVuaH3dx7tn_4qLcFu7iglYP3HmvBCSUVoXtUocesdS31BG49G4Hrx5Z-YPPUn13SKd7IRcOUiWIpDdZKHb3e0LP7ZxvqhukEkPPrQxyl9PqqtahDOO/s1600/plus.png) 85% 55% no-repeat;  

border:1px solid #444;

-moz-border-radius-topright: 20px;

-webkit-border-top-right-radius: 20px;

-moz-border-radius-bottomright: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-bottom-left-radius: 0px;

display: block;

}

a.trigger:hover { /*efecto hover de la pestaña*/

padding: 20px 30px 20px 20px;

color: #44AEFF;

font-weight: bold;

}

a.active.trigger {

background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3JrBhUEeqcu7Wa-6VHl9AW-PjlJz8_fOGP_UVCAXxniunzfioxOEjIrXHHSdigqt3mukRDOZPfqr9Qeyb82dsegMjoNAmc6fyiqtwRIe_SSP48WGSXzz_23T7SQK1lHoLW32j36sloVv/s1600/minus.png) 85% 55% no-repeat;

}

.columns-panel{

clear: both;

width: 330px;

padding: 0 0 20px 0;

line-height: 22px;

}

.colleft-p, .colright-p {

line-height: 22px;

}

/*Posición absoluta para IE6*/

* html .panel {

position: absolute;

}

* html a.trigger {

position: absolute;

}

Paso 2: Ve a la edición de HTML y antes de </head> pegas jQuery y el script (recuerda que lo puedes buscar con la ayuda de ctrl F).


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

<script type='text/javascript'>

//<![CDATA[

 $(document).ready(function(){

$(".trigger").click(function(){

$(".panel").toggle("fast");

$(this).toggleClass("active");

return false;

});

});

//]]>

</script>

IMPORTANTE

-Si ya usas jQuery no lo agregues, pero si podrías por ejemplo actualizarlo, para que se muestre tal y como lo he agregado.

-Guarda las imágenes en Blogger, para luego usar los enlaces propios.



Paso 3: Luego, ve a la edición de HTML de la plantilla y busca la etiqueta <body> inmediatamente después agrega esto:


<div class='panel'>

    <b:section class='sec1' id='sec1' showaddelement='yes'/>

     <div style='clear:both;'/>

<div class='columns-panel'>

<div id='conte-left' style='width:49%; float:left;'>

        <b:section class='colleft-p' id='colleft-p' showaddelement='yes'/>

</div>

<div id='conte-right' style='width:49%; float:right;'>

            <b:section class='colright-p' id='colright-p' showaddelement='yes'/>

    </div>

<div style='clear:both;'/>

</div>

    </div>

<a class='trigger' href='#'>info</a>

Nota: puedes cambiar el texto que se mostrará, que viene como info.





Paso 4: Checa en vista previa y si todo luce bien, guarda los cambios.



Ahora puedes ir a Diseño de tu plantilla en la nueva interfaz, o a los Elementos de la página en la interfaz anterior, y agregar ahí los gadgets que quieras Guiño. Las secciones se mostrarán arriba de la sección de la cabecera.






secciones en blogger



Notas


  • Puedes personalizar todo a tu gusto, cambiando fondos, y colores para que se adapte a tu blog.

  • Aunque agregué un hack para mostrar el panel en posición absoluta en IE6 (Internet Explorer 6),  ya que la posición fixed no funciona en esa versión antigua del navegador (excepto en el body), no lo probé en este.