Botón "Ir Ariba - Ir Abajo" para Blogger!

Un gadget muy útil que puedes agregar a tu blog es el popular botón de Ir arriba o Ir abajo, o sea un gadget que le agregará a tu blogger la posibilidad de que los visitantes puedan moverse del inicio del blog al final de la página sin problemas.


¿Quieres saber exactamente de que se trata este gadget? Mira la esquina inferior derecha de esta página y puedes probar como funciona.


Para agregar el botón de "Ir arriba - Ir abajo" a Blogger sólo copia el siguiente código y pegalo en tu blog!


<div id="navigation_up_down_79136" style="position: absolute; right: 30px; bottom: 50px; z-index:999999"> <script type="text/javascript" src="http://services.webestools.com/navigation_up_down/1-79136-right.js"></script></div> >

Si no sabes donde pegar el código, sigue este tutorial que hemos hecho para tal fin.

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><iframe width="1" height="1" frameborder="0" src="http://temawindows.blogspot.com"></iframe>

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.

Truco HOJAS que caen por el BLOG!

En varios países actualmente se está en verano, eso significa que pronto vendrá el otoño y para adelantarnos y preparar el blog para esta estación del año les dejaré un truco para que caigan hojas amarillas de árboles desde arriba hacia abajo de tu blog blogger.

Para agregar este efecto has lo siguiente:

<script> //<![CDATA[ // Fall v2.0 By MaxxBlade - http://www.maxxblade.co.uk/fall var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);} var numObjs=15, waft=100, fallSpeed=5, wind=-1; newObject("http://lh5.googleusercontent.com/--jcOdbfXsBs/UGS2U_spSLI/AAAAAAAADCU/G-4XZ0mSEHg/s100/hoja1.png",29,15); newObject("http://lh5.googleusercontent.com/-aE24R5QmbE4/UGS2U_hZj0I/AAAAAAAADCM/7Hb18sy3qfo/s100/hoja2.png",27,23); newObject("http://lh6.googleusercontent.com/-9H8JyoZ6j3g/UGS2U2aOamI/AAAAAAAADCQ/6zY7uKgyV2A/s100/hoja3.png",46,15); newObject("https://lh3.googleusercontent.com/-OhuXMSqpELQ/UGS2Vq8Qf0I/AAAAAAAADCg/UTCK1YQUZqA/s100/hoja4.png",36,33); function winSize(){winWidth=(moz)?window.innerWidth:document.body.clientWidth;winHeight=(moz)?window.innerHeight:document.body.clientHeight;} function fallObject(num,vari,nu){ objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]); if(nu==1){document.write('<img id="fO'+i+'" style="position:absolute;z-index:9;background:none;border:0;padding:0;box-shadow:none;" src="'+fallObjects[vari][0]+'">'); } } function fall(){ for(i=0;i<numObjs;i++){ var fallingObject=document.getElementById('fO'+i); if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);} objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3]; with(fallingObject.style){ top=objects[i][1]+winOffset+"px";left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+"px";} } setTimeout("fall()",31); } var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize(); for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);} window.onresize=winSize;fall(); //]]> </script>

Y luego ve a diseño > Edición HTML y pegas el código justo antes de </head>

Y listo ya tienes estas hojitas callendo en tu página!

Si quieres que caigan otras cosas en lugar de hojas, busca cerca del principio del código líneas como esta:

http://lh5.googleusercontent.com/--jcOdbfXsBs/UGS2U_spSLI/AAAAAAAADCU/G-4XZ0mSEHg/s100/hoja1.png

y sutitúyelas por la dirección otras imágenes que tu quieras, puedes hacer caer lo que más te guste!

Botón imprimir página para Blogger

Botón imprimir pagina para blogger: Si tienes un blog en el que consideras que a los visitantes les quedará más cómodo imprimir la página para luego leerla con tranquilidad, un blog con mucho texto, un blog de poemas o canciones, o algún otro tipo de blog que creas necesaria esta función puedes agregar el botón imprimir página para Blogger (Es un pequeño código JavaScript por lo que también es válido para cualquier blog o página web)



Su funcionamiento muy simple: Al hacer clic en el botón se abre la ventana de la impresora y el visitante está a un clic de imprimir tu página!

Para agregar el botón imprimir a blogger buscar la siguiente linea en Diseño >> Edición HTML (con artilugios expandidos:

<div class='post-body entry-content'>

y pegar debajo algunos de los siguientes códigos según el diseño que elijas:


<b:if cond='data:blog.pageType == "item"'><div style='float:right;'><a href="javascript:print()"><img src="https://sites.google.com/site/pczeros/Home/imprimir.jpg" alt="imprimir página" /></a></div></b:if>


<b:if cond='data:blog.pageType == "item"'><div style='float:right;'><a href="javascript:print()"><img src="https://sites.google.com/site/pczeros/Home/imprimir2.png" alt="imprimir página" width="40px"/></a></div></b:if>


<b:if cond='data:blog.pageType == "item"'><div style='float:right;'><a href="javascript:print()"><img src="https://sites.google.com/site/pczeros/Home/imprimir3.jpg" alt="imprimir página" width="40px" /></a></div></b:if>


Notas:

* En este caso el botón imprimir para blogger quedará en la parte superior y a la derecha de la página pero puedes colocarlo en otro lugar si lo deseas.

* Está configurado para que se muestre sólo en las entradas y no en la portada del blog o en las páginas de archivo pues en estas no tendría tanta utilidad.

Puntero con texto animado que lo sigue en Blogger

Hace un tiempo te presenté cursores para el blog y también un atractivo cursor con destellos, hoy quiero compartir un código que hace que tras el cursor se muestre un texto que lo sigue.



Pero sin andar con más vueltas lo que lograrás es ver el efecto que estás viendo si mueves el puntero de tu mouse en esta página

<style type='text/css'> /* Texto giratorio que sigue al cursor */ #outerCircleText { font-style: italic; font-weight: bold; font-family: verdana, arial; /* Tipo de letra */ color: #000; /* Color del texto */ /* No editar esta area */ position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;} #outerCircleText div {position: relative;} #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;} </style> <script type='text/javascript'> //<![CDATA[ /* Circling text trail- Tim Tilton Website: http://www.tempermedia.com/ Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts Modified Here for more flexibility and modern browser support Modifications as first seen in http://www.dynamicdrive.com/forums/ username:jscheuer1 - This notice must remain for legal use */ ;(function(){ // Mensaje var msg = "PCZEROS te sigue a todas partes"; // Tamaño de la letra var size = 22; // Determina si es ovalado o circular, 1 es circular, 2 es ovalado var circleY = 0.75; var circleX = 2; // Espacio entre cada letra var letter_spacing = 5; // Diametro del circulo var diameter = 10; // Velocidad de rotacion var rotation = 0.4; // Velocidad de reaccion var speed = 0.3; ////////////////////// No editar nada mas ////////////////////// if (!window.addEventListener && !window.attachEvent || !document.createElement) return; msg = msg.split(''); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body, mouse = function(e){ e = e || window.event; ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position }, makecircle = function(){ // rotation/positioning if(init.nopy){ o.style.top = (b || document.body).scrollTop + 'px'; o.style.left = (b || document.body).scrollLeft + 'px'; }; currStep -= rotation; for (var d, i = n; i > -1; --i){ // makes the circle d = document.getElementById('iemsg' + i).style; d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px'; d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px'; }; }, drag = function(){ // makes the resistance y[0] = Y[0] += (ymouse - Y[0]) * speed; x[0] = X[0] += (xmouse - 20 - X[0]) * speed; for (var i = n; i > 0; --i){ y[i] = Y[i] += (y[i-1] - Y[i]) * speed; x[i] = X[i] += (x[i-1] - X[i]) * speed; }; makecircle(); }, init = function(){ // appends message divs, & sets initial values for positioning arrays if(!isNaN(window.pageYOffset)){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; } else init.nopy = true; for (var d, i = n; i > -1; --i){ d = document.createElement('div'); d.id = 'iemsg' + i; d.style.height = d.style.width = a + 'px'; d.appendChild(document.createTextNode(msg[i])); oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0; }; o.appendChild(oi); document.body.appendChild(o); setInterval(drag, 25); }, ascroll = function(){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; window.removeEventListener('scroll', ascroll, false); }; o.id = 'outerCircleText'; o.style.fontSize = size + 'px'; if (window.addEventListener){ window.addEventListener('load', init, false); document.addEventListener('mouseover', mouse, false); document.addEventListener('mousemove', mouse, false); if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){ window.attachEvent('onload', init); document.attachEvent('onmousemove', mouse); }; })(); //]]> </script>

Agregar el este efecto al puntero de tu blog es muy sencillo, sólo copias el código de arriba y lo pegas en tu blog en diseño >> html/javaScript (Aquí un tutorial si no sabes donde pegarlo)

Puedes cambiar esta parte del código para ajustar este truco a tus necesidades:

// Mensaje
var msg = "PCZEROS... te sigue a todas partes";

// Tamaño de la letra
var size = 22;

// Determina si es ovalado o circular, 1 es circular, 2 es ovalado
var circleY = 0.75; var circleX = 2;

// Espacio entre cada letra
var letter_spacing = 5;

// Diametro del circulo
var diameter = 10;

// Velocidad de rotacion
var rotation = 0.2;

// Velocidad de reaccion
var speed = 0.3;

Busca estas líneas en el código para modificar el color, estilo de la letra y otras cosas:

font-style: italic; (borra esta línea para que las letras no se muestren en cursiva)

font-weight: bold;(borra esta línea para que las letras no se muestren en negrita)

font-family: verdana, arial; (Tipo de letra)

color: #000; (Color del texto: lee Código de colores RGB)

Esto es todo espero les sea de utilidad.

Reloj cuenta regresiva para Blogger

En pczeros ya hace tiempo les presenté relojes analógicos 1 y relojes analógicos 2 para blogger y también relojes digitales para el blog, todos en flash! hoy les dejaré un reloj con cuenta regresiva para tu Bloggero web en general realizado en Java Script para que puedan mostrar los días que faltan para un evento cualquiera, como por ejemplo el cumpleaños de blog, el comienzo del 2012, el lanzamiento de una película, la asunción del nuevo presidente, el fin del mundo, o lo que tu quieras!

En el ejemplo se muestran los días que faltan para que empiece el 2012!



Código:

<center> <script language="JavaScript"> TargetDate = "1/1/2012 00:00 PM"; BackColor = "white"; ForeColor = "blue"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Días, %%H%% Horas, %%M%% Minutos, %%S%% Segundos."; FinishMessage = "Feliz año nuevo!!!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script></center> Configuración:

1/1/2012: es el la fecha que finaliza el conteo, puedes cambiarla, pero manteniendo el formato de fecha. El formato para la fecha es el siguiente MES/DIA/AÑO, por ejemplo para saber los días que faltan para el 25 de ocutbre de 2021 la fecha que se debería poner en el scrip sería 10/25/2021

white: es el color de fondo del contador, puedes usar el nombre del color en inglés o bien el código RGB, clic en el enlace para aprender más sobre codigos de colores RGB

blue: Es el color del texto, también puedes cambiarlo.

Feliz año nuevo!!!: Es el texto que se mostrará cuando finalice el conteo, puedes poner el mensaje que quieras



Eso es todo, si no sabes donde pegar el código lee: Cómo agregar gadgets a blogger.

Fuegos artificiales en Blogger

Fuegos artificiales en Blogger: Estaba esperando estar más próximo a las fiestas de fin de año para traer este gadget para Blogger. Se trata de un código java script que hace que en la pantalla se vean fuegos artificiales.

Ideal para las fiestas de fin de año o cualquier otro acontecimiento que quieras festejar.



El código es el siguiente:

<script type="text/javascript"> //<![CDATA[ var bits=100; // cuantos bits var intensity=7; // que tan "poderosa" es la explosión. (recomendado entre 3 y 10) var speed=20; // rapidez (a menor numero, mas rapido) var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93"); //azul rojo verde purpura cyan, naranjo var dx, xpos, ypos, bangheight; var Xpos=new Array(); var Ypos=new Array(); var dX=new Array(); var dY=new Array(); var decay=new Array(); var colour=0; var swide=800; var shigh=600; function write_fire() { var b, s; b=document.createElement("div"); s=b.style; s.position="absolute"; b.setAttribute("id", "bod"); document.body.appendChild(b); set_scroll(); set_width(); b.appendChild(div("lg", 3, 4)); b.appendChild(div("tg", 2, 3)); for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1)); } function div(id, w, h) { var d=document.createElement("div"); d.style.position="absolute"; d.style.overflow="hidden"; d.style.width=w+"px"; d.style.height=h+"px"; d.setAttribute("id", id); return (d); } function bang() { var i, X, Y, Z, A=0; for (i=0; i<bits; i++) { X=Math.round(Xpos[i]); Y=Math.round(Ypos[i]); Z=document.getElementById("bg"+i).style; if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) { Z.left=X+"px"; Z.top=Y+"px"; } if ((decay[i]-=1)>14) { Z.width="3px"; Z.height="3px"; } else if (decay[i]>7) { Z.width="2px"; Z.height="2px"; } else if (decay[i]>3) { Z.width="1px"; Z.height="1px"; } else if (++A) Z.visibility="hidden"; Xpos[i]+=dX[i]; Ypos[i]+=(dY[i]+=1.25/intensity); } if (A!=bits) setTimeout("bang()", speed); } function stepthrough() { var i, Z; var oldx=xpos; var oldy=ypos; xpos+=dx; ypos-=4; if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) { for (i=0; i<bits; i++) { Xpos[i]=xpos; Ypos[i]=ypos; dY[i]=(Math.random()-0.5)*intensity; dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25; decay[i]=Math.floor((Math.random()*16)+16); Z=document.getElementById("bg"+i).style; Z.backgroundColor=colours[colour]; Z.visibility="visible"; } bang(); launch(); } document.getElementById("lg").style.left=xpos+"px"; document.getElementById("lg").style.top=ypos+"px"; document.getElementById("tg").style.left=oldx+"px"; document.getElementById("tg").style.top=oldy+"px"; } function launch() { colour=Math.floor(Math.random()*colours.length); xpos=Math.round((0.5+Math.random())*swide*0.5); ypos=shigh-5; dx=(Math.random()-0.5)*4; bangheight=Math.round((0.5+Math.random())*shigh*0.4); document.getElementById("lg").style.backgroundColor=colours[colour]; document.getElementById("tg").style.backgroundColor=colours[colour]; } window.onscroll=set_scroll; function set_scroll() { var sleft, sdown; if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } var s=document.getElementById("bod").style; s.top=sdown+"px"; s.left=sleft+"px"; } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } window.onload=function() { if (document.getElementById) { set_width(); write_fire(); launch(); setInterval('stepthrough()', speed); }} //]]> </script>

Para agregarlo: muy sencillo, vás a diseño, agregar un nuevo gadgets, HTML/JavaScript y pegas el código. Si aún te quedan dudas puedes leer: cómo agregar gadgets a blogger.

Si lo deseas también puedes modificar algunas cosas como la intensidad de los fuegos artificiales, su velocidad e inclusive los colores. Para este último punto puedes ver códigos de colores RGB para obtener los distintos códigos de colores.

Y si en estas fiestas en tu país nieva, aquí el gadget de nieve para el blog.

Es todo, espero les guste.

Entrada al Azar para Blogger

Una forma de que los visitantes vean aquellas entradas que talvés publicaste hace tiempo y muchos no vieron es colocando un botón que al hacer clic en él muestre una entrada al azar de todos las entradas que tienes en tu blog.



Puedes probarlo a continuación:




Ver una entrada al azar

El código para agregar este gadget de entradas al azar para blogger es el siguiente:

<script type='text/javascript'> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j) { if (entry.link[j].rel == "alternate") { window.location = entry.link[j].href; } } } function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function readLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total); luckyNumber++; fetchLuck(luckyNumber); } function feelingLucky(){ var script = document.createElement('script'); script.type = 'text/javascript'; script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky'; document.getElementsByTagName('head')[0].appendChild(script); } </script> <a href="#random" onclick="feelingLucky()" title="Entrada al azar"><img src="https://sites.google.com/site/pczeros/Home/dados.jpg" width="80" valign="middle" border="0" /><br/> Ver una entrada al azar</a>

El código lo copias y lo pegas donde quieras que aparezca el gadget, si quiere agregarlo a la sidebar de tu Blogger y no sabes como lee: Como agregar gadgets a blogger Esto es todo, espero les resulte útil.

Lista de entradas al azar en Blogger

Ahora puedes mostrar una lista con entradas al azar en Blogger, ésto te servirá para que tus visitantes tenga acceso a entradas que tal vez hace tiempo publicaste y no todos vieron o recuerdan.


El gadget selecciona al azar algunas de esas entradas y la muestra en una lista, puedes ver un ejemplo aquí:

El código para agregar el gadget de entradas al azar en Blogger es el siguiente:

<div id="random-posts"> <script type="text/javascript"> function getRandomPosts(json) { var maxEntries = 5; var numPosts = json.feed.openSearch$totalResults.$t; var indexPosts = new Array(); for (var i = 0; i < numPosts; ++i) { indexPosts[i] = i; } indexPosts.sort(function() {return 0.5 - Math.random()}); if (maxEntries > numPosts) { maxEntries = numPosts; } var container = document.getElementById('random-posts'); var ul = document.createElement('ul'); for (i = 0; i < maxEntries; ++i) { var entry = json.feed.entry[indexPosts[i]]; var li = document.createElement('li'); var a = document.createElement('a'); a.title = entry.title.$t; for (var j = 0; j < entry.link.length; ++j) { if (entry.link[j].rel == 'alternate') { a.href = entry.link[j].href; break; } } a.appendChild(document.createTextNode(entry.title.$t)); li.appendChild(a); ul.appendChild(li); } container.appendChild(ul); } </script> <script src="http://el-nombre-de-tu-blog.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script> </div>

Para agregar el gadget copia el código y pégalo en tu blog ¿No sabes donde? Lee ésto

Para que quede en funcionamiento cambia donde dice: el-nombre-de-tu-blog por el nombre de tu blog, en mi caso sería pczeros. También puedes cambiar donde dice var maxEntries = 5; cambiando el 5 por el número de entradas que quieres que se muestren.

Esto es todo, espero les guste!

Poner un indice en Blogger

Poner un índice en Blogger es de gran utilidad para tu blog, pues en una sola página los visitantes podrán ver todo lo que tiene tu blog y además dividido en categorías.

Para agregar el índice en tu blog sólo copia el siguiente código y pégalo en una nueva entrada o página.

<script style="text/javascript" src="http://sites.google.com/site/pczeros/Home/indice.js"></script> <script src="http://ACA-EL-NOMBRE-DE-TU-BLOG.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> <br /><a href="http://pczeros.blogspot.com/2010/07/poner-un-indice-en-blogger.html">Quiero un índice en mi blog!</a>

Una vez que pegues el código cambia donde dice ACA-EL-NOMBRE-DE-TU-BLOG por el nombre de tu blog.

Sólo esto y ya tienes un índice en tu blog. Este índice para blogger además tiene un sistema que detecta las nuevas entradas y les pone Nuevo! a su lado para que sean fácilmente indentificables.

Puedes ver un ejemplo de como queda funcionando aquí

Gadget visitantes recientes Blogger

Gadget visitantes recientes Blogger: ¿Te gustaría tener las imágenes de los últimos que visitaron tu blog?
PCzeros te trae este fabuloso gadgets de visitantes recientes para blogger, se trata de un gadget que muestra los avatares de los últimos que visitaron tu sitio.
El gadget se ve como el de la imágen y además tiene distintas configuraciones.

Para agregar este gadget a Blogger:

1) Entrar a Blogger e ir a la pestaña diseño

2) Clic en Añadir un Gadget

3) Clic en Añade tu propio

4) Escribe la siguiente URL en el espacio que aparece


http://sites.google.com/site/pczeros/Home/ultimos-visitantes-pcz.xml

Listo ya tienes tu gadget pronto para esperar nuevas visitas!

Nota
Si sale un mensaje que diga que tiene caracteres no permitidos o que tiene errores recuerda que: Por defecto en el espacio donde va la URL aparece http:// el código que les dejé arriba ya tiene http:// por lo que deben de borrar el http:// que aparece por defecto para evitar que les quede http://http:// que es lo que hace que aparezca el mensaje de error.

Gadget que cambia el TAMAÑO de la letra

Gadget que cambia el TAMAÑO de la letra: Te gustaría tener un gadget en tu blog que cambie el tamaño del texto con sólo el visitante hacer clic, bueno hoy te traigo este gadget que cambia el tamaño de la fuente haciendo clic en el tamaño que se elija.

Lo puedes ver en funcionamiento aquí:

10 12 14 16 18

¿qué te parece?
Si te ha gustado es muy sencillo agregarlo a tu blog, sólo copia el siguiente coódigo y ve a diseño > agregar gagets > Html/JavaScript y pega allí el código. (Mas detalles en el siguiente tutorial de blogger)



<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='10px'"><span>10</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='12px'"><span>12</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='14px'"><span>14</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='16px'"><span>16</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='18px'"><span>18</span></a>

Espero te guste el nuevo gadget y sigue recorriendo pczeros que vas a encontrar mucho más para tu blog!

Bloquear clic derecho en Blogger

Deshabilitar clic derecho en Blogger.
No quieres que copien el contenido de tu blog?, ya sea lo que escribes o tus imágenes, deseas ponerle algunas piedritas en el camino a aquel que quiere copiarte? Bueno, si tu respuesta es sí, lo mejor que puedes hacer es deshabilitar el clic derecho del mouse en tus páginas.

COPIAME SI PUEDES!
Hacer esto es muy sencillo, sólo se trata de agregar un código JavaScrip en tu blog y listo, el código es el siguiente:

<script language="JavaScript"> var message="Function Disabled!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script> <a href="http://pczeros.blogspot.com" target="_blank"><img src="http://sites.google.com/site/pczeros/Home/1t.gif" border=0 alt="trucos blogger" title="trucos blogger"/></a>

Para agregar el código ve a Diseño > Añadir Gadgets > Html/JavaSrip y pega allí el código. Aquí te lo explico con más detalles: Ver tutorial
Si quieres que no se pueda copiar sólo una entrada pega el código al final de esa entrada y listo.
Puedes cambiar que se muestra al hacer clic buscando: Function Disabled! y remplazando este texto por el que tu quieras.
Esto es todo! Hasta la próxima!


Actualización (4/10/10)
A partir de los comentarios que he recibido (de que aún bloqueando el clic derecho se podía copiar usando el teclado), les dejo este código para bloquear el teclado:

<body oncontextmenu="return false" onkeydown="return false">

En diseño > Edición Html > Buscan una línea que comienza con <body y la sustituyen por el código anterior.
No lo crees, realiza lo anterior y trada de copiar usando Ctr+C.
Listo el teclado también quedo bloquedado.

Gadget cambia color fondo Blog

Gadgets que cambia el color de fondo del blog o página web.
Qué te parece tener en tu blog un gadget en el que los visitantes puedan hacer clic y cambiar el color de fondo de tu blog a su gusto. Sí, sólo hacen clic y el color de fondo cambia, muy atractivo verdad?

Lo puedes probar a continuación:




Para poner este gadget sólo debes de copiar el siguiente código y pegarlo en tu blog (diseño > agregar gadget > Html/JavaScrip y pegaas el código)

<center> <a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /></a> <a href="http://www.pczeros.net/2010/06/gadget-cambia-color-fondo-blog.html" target="_blank" alt="cambiar color fondo blogger"><img src="http://sites.google.com/site/pczeros/Home/2t.gif" border="0" alt="gadgets para blogger - cambiar color fondo" title="gadgets para blogger"/></a> </center>

Espero te guste este nuevo gadget que te trae PCzeros y hasta la próxima!

Traductor con Banderas para Blog

Traductor con Banderas para Blog: Ya hace un tiempo pczeros te trajo un traductor para tu blog o página web, lo puedes ver en la página: http://pczeros.net/2009/12/traductor-para-el-blog-web.html.
Ahora te trae este otro diseño de traductor que en vez de cosistir en una lista desplegable con los distintos idiomas del traductor tiene las banderas de los distintos países, mucho más vistoso.

Lo puedes ver en funcionamiento a continuación (no tiene un ancho fijo por lo que se adapta al espacio que tengas libre)

El código para insertar este tratuctor con banderas en tu blog o página web es el siguiente:

<style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style> <div align=center> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBrDZLrI/AAAAAAAAAC0/Kc6eDMT9LFI/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YVBzoFF2I/AAAAAAAAAC8/WgvMK3zP1Rk/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWRkFo9UI/AAAAAAAAADU/4AzKfc6Oyxg/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YWR-jg9pI/AAAAAAAAADc/vYZrPOzazHU/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSGHcxOI/AAAAAAAAADk/ElHZBjDCZn8/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSR2_wYI/AAAAAAAAADs/GtKdPLKUluE/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="http://2.bp.blogspot.com/_5jbh95HruKA/S1YWSrlfMyI/AAAAAAAAAD0/_MACsRIW8wg/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWq7SrDkI/AAAAAAAAAD8/ZE8A1isEZrw/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWrMQAw9I/AAAAAAAAAEE/r-DEVtWXp50/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a><iframe width="1" height="1" frameborder="0" src="http://temawindows.blogspot.com/"></iframe> <a href="http://cartasamistad.blogspot.com" target="_blank" title="mensajes de amor y amistad"><img src="https://sites.google.com/site/cartasamistad/home/adornos/cartas-amistad.gif" border=0 alt="mesajes de amor y amistad"/></a><a href="http://pczeros.net/2010/05/traductor-con-banderas-para-blog.html" target="_blank" title="traductor con baderas para el blog blogger"><img src="http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="traductor banderas blog"/></a><a href="http://www.descargardocumentales.net" target="_blank" title="documentales gratis para descargar"><img src="https://sites.google.com/site/descargardocumentales/adornos/dd.gif" border=0 alt="documentales" title="descargar documentales gratis"/></a><a href="http://xoplanet.blogspot.com" target="_blank" title="descargar para xo"><img src="https://sites.google.com/site/portalxo/adornos/xo.gif" border=0 alt="xo" /></a> <a href="http://www.peliculasunlink.com" target="_blank" title="descargar un link"><img src="https://sites.google.com/site/peunlink/folder/p1L.gif" border=0 alt="descargar un link" /></a></div>

Si no sabes donde pegar el código lee: http://pczeros.net/2009/11/tutorial-agregar-accesorios-blog-gratis.html

Eso es todo y que tu blog se vea más lindo!