Para poner los ultimos posts de una manera mas vistosa y original en Blogger, utilizaremos un poco de Javascript. Las entradas van pasando solas como cuando pasan las hojas de un libro. Se actualiza automaticamente cada vez que creas una entrada nueva y al clickear sobre la imagen, te lleva hasta ella directamente. Para ponerlo en tu blog, vas Diseño, añades un gadget HTML/Javascript y pegas el codigo. Los numeros que te te he puesto en rojo son para modificar el tamaño de las imagenes. Donde aparece la url de mi blog, la sustituyes por la del tuyo.    |
CODIGO:
<script> // 7 variables to control behavior var Book_Image_Width =200; //ancho de la imagen var Book_Image_Height =200; //alto de la imagen var Book_Border =true; var Book_Border_Color ="gray"; var Book_Speed =35; var Book_NextPage_Delay =1000; var Book_Vertical_Turn =0; // variables for content var random_posts = true; var numposts_gal = 10; </script> <script> var showpostthumbnails_gal = true; var random_posts = false; var numposts_gal = 10; var Book_Image_Sources=new Array(); function showgalleryposts(json) { var numPosts = json.feed.openSearch$totalResults.$t; var indexPosts = new Array(); for (var i = 0; i < numPosts; ++i) { indexPosts[i] = i; } if (random_posts == true){ indexPosts.sort(function() {return 0.5 - Math.random()}); } if (numposts_gal > numPosts) { numposts_gal = numPosts; } for (i = 0; i < numposts_gal; ++i) { var entry_gal = json.feed.entry[indexPosts[i]]; var posttitle_gal = entry_gal.title.$t; for (var k = 0; k < entry_gal.link.length; k++) { if ( entry_gal.link[k].rel == 'alternate') { posturl_gal = entry_gal.link[k].href; break; } } if ("content" in entry_gal) { var postcontent_gal = entry_gal.content.$t } s = postcontent_gal; a = s.indexOf("<img"); b = s.indexOf("src=\"", a); c = s.indexOf("\"", b + 5); d = s.substr(b + 5, c - b - 5); if ((a != -1) && (b != -1) && (c != -1) && (d != "")) { var thumburl_gal = d } else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7EdbmNVaPrRzML6LhDL7HB7MrrZ8p2zNkEemJgIUtcPaMZSZ2TGUiPNgR0CsxV_MaVDJrVxAvfYca1ZkxaPLH2W2D0D3hLGvyYoAH8tS63Puj3siUIuhgb0Ug_XzGwoDA50qrVQTiq4/s128/placeholder.gif'; if (i== 0){ var thumb_ = 0; var thumb_link = 1; } else{ var thumb_ = i * 2; var thumb_link = thumb_+1; } Book_Image_Sources[thumb_]=thumburl_gal; Book_Image_Sources[thumb_link]=posturl_gal; } } </script> <script> var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1; var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length); function ImageBook(){ if(document.getElementById){ for(i=0;i<Book_Image_Sources.length;i+=2){ B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]; } Book_Div=document.getElementById("Book"); B_LI=document.createElement("img");Book_Div.appendChild(B_LI); B_RI=document.createElement("img");Book_Div.appendChild(B_RI); B_MI=document.createElement("img");Book_Div.appendChild(B_MI); B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute"; B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1; B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px"; B_LI.style.left=0+"px"; B_MI.style.top=0+"px"; B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px"; B_RI.style.top=0+"px"; B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px"; B_LI.style.height=Book_Image_Height+"px"; B_MI.style.height=Book_Image_Height+"px"; B_RI.style.height=Book_Image_Height+"px"; B_LI.style.width=Book_Image_Width+"px"; B_MI.style.width=Book_Image_Width+"px"; B_RI.style.width=Book_Image_Width+"px"; if(Book_Border){ B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid"; B_LI.style.borderWidth=1+"px"; B_MI.style.borderWidth=1+"px"; B_RI.style.borderWidth=1+"px"; B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color} B_LI.src=B_Pre_Img[0].src; B_LI.lnk=Book_Image_Sources[1]; B_MI.src=B_Pre_Img[2].src; B_MI.lnk=Book_Image_Sources[3]; B_RI.src=B_Pre_Img[4].src; B_RI.lnk=Book_Image_Sources[5]; B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk; B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp; B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt; BookImages()}} function BookImages(){ if(!B_Stppd){ if(Book_Vertical_Turn){ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height)); MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz; B_MI.style.top=MidOffset+"px"; B_MI.style.height=B_MSz+"px"} else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width)); MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz; B_MI.style.left=MidOffset+"px"; B_MI.style.width=B_MSz+"px"} B_Angle+=Book_Speed/720*Math.PI; if(B_Angle>=Math.PI/2&&B_Direction){ B_Direction=0; if(B_CrImg==Book_Image_Sources.length)B_CrImg=0; B_MI.src=B_Pre_Img[B_CrImg].src; B_MI.lnk=Book_Image_Sources[B_CrImg+1]; B_CrImg+=2} if(B_Angle>=Math.PI){ B_Direction=1; B_TI=B_LI; B_LI=B_MI; B_MI=B_TI; if(Book_Vertical_Turn)B_MI.style.top=0+"px"; else B_MI.style.left=Book_Image_Width+1+"px"; B_MI.src=B_RI.src; B_MI.lnk=B_RI.lnk; setTimeout("Book_Next_Delay()",Book_NextPage_Delay)} else setTimeout("BookImages()",50)} else setTimeout("BookImages()",50)} function Book_Next_Delay(){ if(B_CrImg==Book_Image_Sources.length)B_CrImg=0; B_RI.src=B_Pre_Img[B_CrImg].src; B_RI.lnk=Book_Image_Sources[B_CrImg+1]; B_MI.style.zIndex=2; B_LI.style.zIndex=1; B_Angle=0; B_CrImg+=2; setTimeout("BookImages()",50)} function B_LdLnk(){if(this.lnk)window.open(this.lnk, '_blank');} function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"} function B_Rstrt(){B_Stppd=false} </script> <div id="Book" style="position: relative;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7EdbmNVaPrRzML6LhDL7HB7MrrZ8p2zNkEemJgIUtcPaMZSZ2TGUiPNgR0CsxV_MaVDJrVxAvfYca1ZkxaPLH2W2D0D3hLGvyYoAH8tS63Puj3siUIuhgb0Ug_XzGwoDA50qrVQTiq4/s128/placeholder.gif" /></div> <script src="http://redeando.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"> </script><script type="text/javascript"> ImageBook(); </script> |
