Mensaje animado con AUDIO para el Blog

Mensaje animado con AUDIO para el Blog!: Googleando me encontré con este divertido gadget para tu blog llamdo Woki, la verdad que me pareció bien interesante y decidí compartirlos con todos ustedes, sin más palabras delen play al gadget de abajo y comprenderán de que se trata!



Les cuento que tanto el personaje como el fondo, la ropa, los accesorios, color de piel, voz, etc son totalmente personalizables así que se pueden entretener un buen rato probando distintas opciones!



El audio se puede teclear o bien grabarlo o subirlo desde tu PC, pero a mi la primera opción me parece la más divertida.

Luego que teminen la personalización obtendrán un código para insertar este gadget en su blog (Ayuda: ¿Dónde pego el código HTML?)

Esto es todo y si les gustó Woki... comenten y dejen el enlace a sus wokis!

Menu flotante lateral para Blogger

Menú flotante lateral para Blogger: A veces no es suficioente con agregar un menú superior, pues hay otras cosas que queremos enlazar. En este caso les dejo el código para colocar un menú lateral flotante para el blog, es decir que a pesar de hacer scroll en la página el menú permanecerá sin moverse en su Blogger.


Este menú lateral flotante tiene 5 botones que permiten al visitante: ir a la página de inicio o establecer como página de inicio (dependiendo del navegador), agregar una entrada a favoritos, pasar a la vista dinámica del blog, pasar a la vista para móviles y acceder al feed del blog.
Si sabes de HTML puedes agregar más botones o cambiar las imágenes por otras.

El código es el siguiente:

<!-- inicio codigo botones laterales --> <a href='http://pczeros.blogspot.com/#'><img src='http://goo.gl/csX5Y' style='display:scroll;position:fixed;top:300px;left:0px;z-index:10004' title='Página de Inicio'/></a> <a href='javascript:agregarmarcadores();' title='Agregar a Favoritos/Marcadores'> <img src='http://goo.gl/FXVml' style='display:scroll;position:fixed;top:350px;left:0px;z-index:10004' title='Agregar entrada a favoritos'/></a><script type='text/javascript'> //<![CDATA[ function agregarmarcadores() { if (window.sidebar&&window.sidebar.addPanel) window.sidebar.addPanel("PCZEROS","http://pczeros.blogspot.com",""); else window.external.AddFavorite("http://pczeros.blogspot.com","PCZEROS") } //]]> </script> <a href='http://pczeros.blogspot.com/view' target='_blank' title='Pasar a vista dinámica'><img src='http://goo.gl/y2iht' style='display:scroll;position:fixed;top:400px;left:0px;z-index:10004'/></a> <a href='http://pczeros.blogspot.com/?m=1' target='_blank' title='Versión para movil'><img src='http://goo.gl/xyC3v' style='display:scroll;position:fixed;top:450px;left:0px;z-index:10004'/></a> <a href='http://pczeros.blogspot.com/feeds/posts/default' target='_blank' title='Feed'><img src='http://goo.gl/QxCwY' style='display:scroll;position:fixed;top:500px;left:0px;z-index:10004'/></a> <!-- FIN codigo botones laterales -->

Pueden probarlo al lado izquierdo de este blog.

Notas:

* El código debe estar ubicado justo antes de la etiqueta </body> (ir a Diseño + Edición HTML y buscarla en el código [Ctr + F para buscar rápidamente])

* Debes cambiar en el Código todos los lugares que dice pczeros.blogspot.com por la dirección de tu blog

* "Agregar a favoritos" funciona en Firefox e Inernet Explorer

* Para que las vistas dinámicas funciones debe de estar habilitado el Feed completo del blog (Configuración + Feed del Sitio + Permitir feed del blog[Completo])

Entradas relacionadas con Miniaturas para Blogger

Un gadget muy útil para aumentar la cantidad de páginas vistas es añadir el gadget de entradas relacionadas con miniaturas (thumbnails) a Blogger Añadir el gadget de entradas relacionadas con miniaturas a Blogger es muy sencillo y configurable, lo puedes hacer en dos simples pasos:

1)

En diseño >> Edición HTML selecciona la casilla "Expandir plantillas de artilugios" y pega el siguiente código justo antes de </head>

<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='https://sites.google.com/site/pczeros/Home/relatedthumbs21.js' type='text/javascript'></script> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

2)

Ahora búsca la siguiente línea: <div class='post-footer-line post-footer-line-1'> y pega justo debajo el siguiente código y guarda los cambios (si no está prueba con esta otra: <p class='post-footer-line post-footer-line-1'>):

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle="Entradas relacionadas"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

Para no recargar la portada del blog las entrdas relacionadas se ven sólo en las entradas individuales.

Notas:

* Si quieres cambiar el número de post relacionados busca la siguiente línea en el código: var maxresults=5 y remplaza 5 por el número de entradas que quieres mostrar.

* Puedes modificar en donde dice var relatedpoststitle="Entradas relacionadas";/ cambiando "Entradas relacionadas" por el texto que tu quieras.

* Tienes que tener etiquetas en tus entradas para que el gadget funcione.

* El código JavaScript que hace que el gadget funcione es el siguiente, si quieres respaldarlo o subirlo a tu host lo puedes descargar desde aquí.



Actualización:

25/7/11: Modificación del código para hacerlo compatible con más plantillas de Blogger. Si ya has probado el código y no te ha dado resultado te recomiento que lo intentes ahora con los nuevos cambios.

Imagen fija en la esquina de Blogger

Otro gadget interesante para tu blog es el de colocar una imagen fija en la esquina de tu Blogger (o sea que al hacer scroll la imagen no se mueva), la función que le puedes dar puede ser la que gustes, por ejemplo un saludar a los visitantes, invitarlos a que realicen un comentario, promover una nueva sección del blog, vincular tu Twitter, etc, etc.

Dejo algunos de ejemplo y el código para colocarlos, pero recuerda que este gadget es totalmente personalizable con la imagen que gustes.




<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="http://pczeros.blogspot.com/2011/07/imagen-fija-esquina-blogger.html"/><img src="https://lh4.googleusercontent.com/-xeUV8GickpQ/ThzNaXk2sUI/AAAAAAAAAWo/MV_rYNOBI2M/s288/if-homercomentario.gif" style="z-index:99;"/></a>




<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="http://pczeros.blogspot.com/2011/07/imagen-fija-esquina-blogger.html"/><img src="https://lh5.googleusercontent.com/-d7Y5RZ74SCw/ThzNaf13GWI/AAAAAAAAAWk/fTtqhYsXYco/s288/if-emoticoment.gif" style="z-index:99;"/></a>




<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="http://pczeros.blogspot.com/2011/07/imagen-fija-esquina-blogger.html"/><img src="https://lh3.googleusercontent.com/-OJyaByDALsQ/ThzNam48kBI/AAAAAAAAAWg/pDNadHyfSLw/s288/if-sigueme.gif" style="z-index:99;"/></a>


http://www.blogger.com/img/blank.gif Notas:

* El código se pega en HTML/JavaScript (si necesitas ayuda en este punto lee cómo agregar gadgets a blogger)

* Para cambiar la imagen, tomando por referencia que utilizaste el primer código cambia donde dice: https://lh5.googleusercontent.com/-d7Y5RZ74SCw/ThzNaf13GWI/AAAAAAAAAWk/fTtqhYsXYco/s288/if-emoticoment.gif por la url de donde está tu imagen. Para aprender a subir imágenes lee: Cómo subir archivos para Blogger

* Para cambiar el enlace a donde irá el visititante una vez que ha hecho clic en la imagen cambia donde dice: http://pczeros.blogspot.com/2011/07/imagen-fija-esquina-blogger.html por la dirección que gustes.

* Puedes cambiar la pocición cambiando la parte del código que pegaste (en donde dice bottom:0px;right:0px;)por los siguientes valores según corresponda:
Esquina inferior izquierda: bottom: 0px; left: 0px;
Esquina inferior derecha: bottom: 0px; right: 0px;
Esquina superior izquierda: top: 0px; left: 0px;
Esquina superior derecha: top: 0px; right: 0px;
También puedes usar valores intermedios si lo deseas, por ejemplo: botton:0px; left: 350px;


Bueno por hoy es todo, espero les sea de utilidad.

Gadget pajaro de Twitter volando por el Blogger

Te gustaría tener el pájarito de twitter volando por todo el blog, es muy sencillo hacerlo! Simplemente debes agregar el Gadgets del pajaro de Twitter y lo tendrás volando por todo tu blogger


<script src="https://sites.google.com/site/pczeros/Home/pajaritoTwitterVolador.js" type="text/javascript"></script><script type="text/javascript">var birdSprite='https://sites.google.com/site/pczeros/Home/pajaritoTwitterVolando.png';var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');var twitterAccount = 'http://pczeros.blogspot.com/2011/06/gadget-pajaro-twitter-volando-blogger.html';var twitterThisText ='';tripleflapInit();</script>

Simplemente copia el código del pajaro de twitter volando y pegalo en tu Blogger o web. En blogger sigue el siguiente tutorial para agregarlo: Agregar gadget a Blogger

Si quieres vincularlo con tu página en twitter debes cambiar la siguiente url del código: http://pczeros.blogspot.com/2011/06/gadget-pajaro-twitter-volando-blogger.html por la url de tu twitter.