Gadgets de cuenta regresiva para Londres 2012

Los XXX Juegos Ol?mpicos est?n cada vez m?s cerca y muchos, sobre todo los que gustan del deporte, est?n esperando con ansias este acontecimiento que se celebra cada cuatro a?os.

As? que para todos aquellos que quieran estar al pendiente de los juegos, he hecho un gadget de cuenta regresiva para las Olimpiadas de Londres 2012 en tres colores.

Para poner uno de estos tres contadores entra en Dise?o | A?adir un gadget | HTML/Javascript y ah? pega el c?digo del contador que m?s te guste.

<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQ94vxsQxQV6DcdAgOTdUFYLvpUTCQSvk6OAawEUMd-6OM_Xq2uOydTJMTzKJmb8SrrCMx53Y9R6XC8ADHqNPbMHxiJOneopBDK6Wrx06pnZ2xuZk22JQBYh4VxxLfr3wbSDK8r-PLug/s0/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#da0080"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Dise?ado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>

<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj872xp08irYtoiDh1PTJt57_Px1ZAerSSKFPLJ1Gvc8OtWJGlDHrIe4YjoFEevV_fY_HzyRx_vaRpa6s1G60FkRAycHeF43B56CIVkdiW8ZiWsHBWO1WKF9eX72WuLGoWzn8LddnrWhTI/s0/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#009cde"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Dise?ado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>

<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgethrHQk6T7RHBe5Td5yfTf7UNnGpZyk2ax3Gwv-UksFW7F_iJ6pLB_NNqmPsk3v1Aae4XBHj15KysgTVtR53V2Yue8AeHG095a-vvGVyZx2faGoF5BC3C5RVvMvqRW8jPL6V2xZlKD_E/s0/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#ee8600"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Dise?ado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>

Y con eso podr?s llevarte a tu blog este gadget que contar? los d?as que faltan para los juegos ol?mpicos. Espero que les gusten :)

Slider autom?tico para mostrar las ?ltimas entradas (Featured Content Slider)

Hemos visto varios sliders con distintos efectos para todos los gustos. Pero muchos no se animan a usar uno por el "mantenimiento" que este implica, es decir, tener que estar editando el slider continuamente para cambiar los textos, los t?tulos, las im?genes, etc. As? que una petici?n constante es un slider que haga el "trabajo sucio", es decir, un slider que muestra las ?ltimas entradas del blog de forma autom?tica, sin necesidad de estar editando el slider una vez que est� puesto.

Featured Content Slider es un script original de Dynamic Drive, aunque el slider en s? es una extracci?n de la plantilla Simplex Transcript. Muestra las ?ltimas 10 entradas publicadas en el blog con su imagen, el t?tulo, y un resumen de cada entrada.

El demo puedes verlo aqu? mismo.

Para poner este slider autom?tico en el blog entra en la Edici?n HTML de la plantilla y antes de
]]></b:skin> pega los estilos:

/* Featured Content Slider
----------------------------------------------- */
#featuredContent {
margin:0 auto;
padding:7px 7px 5px;
width:450px;
display:block;
background:#efefef; /* Color de fondo */
}
#featured-slider {
position: relative;
overflow: hidden;
width:450px;
height: 320px;
}
#featured-slider img {
display:block;
height:auto !important;
}
#featured-slider .sliderPostPhoto {
position:relative;
height:256px;
width:450px;
overflow:hidden;
}
#featured-slider .sliderPostInfo {
position:absolute;
bottom:0;
width:450px;
min-height:30px;
color:#fff;
padding:5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU9-FQ9UbvwXgzxHswUiSa-1qNxYzMEHUp1pmEIIM2df5F3G3x0KHeFo7BZIK4yK8dR41XWe_Gb1pEnMzdKY6r9zXp0cCOfeM7ejtuVU94pGab4UB3ICQFRUrqcaduRvelHIbyJJGV4IY/s30/bgtransparent.png);
height:30px;
}
#featured-slider .sliderPostInfo p {
color:#fff;
font-size:1.1em;
padding:3px 5px 5px 6px;
}
#featured-slider .contentdiv {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
z-index:1;
}
#paginate-featured-slider {
display:block;
margin-bottom:5px;
font:bold 14.6px Arial, verdana, sans-serif; /* Tama?o fuente de los n?meros */
}
#paginate-featured-slider a {
color:#000;
padding:2px 7px;
background:#ddd;
}
#paginate-featured-slider a:hover {
text-decoration:none;
color:#cd1713; /* Color de fondo de la pesta?a al pasar el cursor */
}
#paginate-featured-slider a.selected {
color:#fff;
text-decoration:none;
background:#cd1713; /* Color de fondo de la pesta?a activa */
}
h2.featuredTitle {
font:14px "trebuchet ms", arial, sans-serif; /* Tama?o fuente de los t?tulos */
font-weight:normal;
letter-spacing:1px;
display:block !important;
margin: auto 0 !important;
}
h2.featuredTitle a {
color:#fff;
display:block;
padding:3px;
}
h2.featuredTitle a:hover {
text-decoration:underline;
}

Ahora antes de </head> pega los scripts, que son algo largos:

<script type='text/javascript'>
//<![CDATA[
// Featured Content Slider (CB)
//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
// Featured Content Slider- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
// This notice MUST stay intact for legal use
// Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

var featuredcontentslider={
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIwTb38eIKXWIKyQkFt2Jz1pmQLjMLJo1j85L2U0EyHe5XgpdfybhoW8tHPLxiwKRaRBYFANKKCdn_kkY9IqZDaxVHep4Iv11EP9aakfZiNzhVoQqcqwc87wzWBwxdCv5p1t_isrX_pKw5/s32/loading.gif" /> Cargando im?genes...</div>',
bustajaxcache: true,
enablepersist: true,
settingcaches: {},
jumpTo:function(fcsid, pagenumber){
this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else if (window.XMLHttpRequest)
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},

buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){
setting.contentdivs.push(alldivs[i])
alldivs[i].style.display="none"
}
}
},

buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
if (toclinkscount>setting.contentdivs.length-1){
         pdivlinks[i].style.display="none"
continue
}
pdivlinks[i].setAttribute("rel", ++toclinkscount)
pdivlinks[i][setting.revealtype]=function(){
featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
return false
}
setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){
pdivlinks[i].onclick=function(){
featuredcontentslider.turnpage(setting, this.className)
return false
}
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){
pdiv[setting.revealtype]=function(){
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50)
this.autorotate(setting)
}
},

urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i"))
return (result==null)? null : parseInt(RegExp.$1)
},

turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},

setopacity:function(setting, value){
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},

fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},

cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},

autorotate:function(setting){
 window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"="+value

},


init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}}

imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXX8hxeS86807_6gdI94YeFJdXa8A4hjyzB1rItqSjddROFuCFoHAbQwaIDiLXQr6hqKraLEHgk6oezAtyPZY6NMc25hPprLN_syyMskW3bMtf8RbD_PJKc7yCFmv58e5Ri4JcYLqfYtM/s0/sin-imagen.png";
showRandomImg = true;

aBold = true;

summaryPost = 220;
summaryTitle = 25;

numposts = 10;
numposts1 = 1;
numposts2 = 4;
numposts3 = 4;
numposts4 = 1;
numposts5 = 4;
numposts6 = 6;
numposts7 = 5;
numposts8= 10;
numposts9= 8;
numposts10= 12;


function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s =  s.join("");
s = s.substring(0,chop-1);
return s;
}

function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var trtd = '<div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img width="70" height="70" class="alignleft" src="'+img[i]+'"/></a><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
document.write(trtd);


j++;
}

}

function showrecentposts1a(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';



var trtd = '<div class="featuredPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img width="60" height="45" class="alignright" src="'+img[i]+'"/></a><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
document.write(trtd);


j++;
}

}


function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();

  for (var i = 0; i < 10; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var trtd = '<li><a href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);


j++;
}

}

function showrecentposts3(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
     document.write('<div class="featuredPost lastpost">');
  for (var i = 0; i < 10; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';



if (i==0) {
var trtd = '<a href="'+posturl+'"><img width="75" height="42" class="alignleft" src="'+img[i]+'"/></a><h2 class="spostTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
document.write(trtd);
         }
if ((i>0)&&(i<numposts)) {
var trtd = '<a href="'+posturl+'" class="list">'+posttitle+'</a>';
document.write(trtd);
         }
 j++;
}
document.write(' </div>');

}

function showrecentposts4(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
if (numposts5 <= json.feed.entry.length) {
maxpost = numposts5;
}
else
       {
  maxpost=json.feed.entry.length;
  }

     for (var i = 0; i < maxpost; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


if (i==0) {
var trtd = '<div class="bottomBox_wide left"><div class="thumb"><a href="'+posturl+'"><img width="300" height="225" class="alignone" src="'+img[i]+'"/></a></div><div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div></div></div><div class="bottomBox_narrow right">';
document.write(trtd);
         }
if ((i>0)&&(i<maxpost)) {
var trtd = '<div class="featuredPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="alignright" height="55" src="'+img[i]+'" width="55"/></a><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div></div>';
document.write(trtd);
}
j++;
}
document.write('</div>');
}

function showrecentposts4a(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
    if (numposts5 <= json.feed.entry.length) {
maxpost = numposts5;
}
else
       {
  maxpost=json.feed.entry.length;
  }

     for (var i = 0; i < maxpost; i++) {
var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


if (i==0) {
var trtd = '<div class="bottomBox_wide right"><div class="thumb"><a href="'+posturl+'"><img width="300" height="225" class="alignone" src="'+img[i]+'"/></a></div><div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div></div></div><div class="bottomBox_narrow left">';
document.write(trtd);
         }
if ((i>0)&&(i<maxpost)) {
var trtd = '<div class="featuredPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="alignright" height="55" src="'+img[i]+'" width="55"/></a><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div></div>';
document.write(trtd);
}
j++;
}
document.write('</div>');
}


function showrecentposts5(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
   
  for (var i = 0; i < numposts5; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var trtd = '<li><div class="entry"><a href="'+posturl+'"><img width="80" height="85" class="alignleft" src="'+img[i]+'"/></a><h2 class="sidebarPostTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></li>';
document.write(trtd);    

 j++;
}

}

function showrecentposts6(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
   
  for (var i = 0; i < numposts6; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var trtd = '<div class="text"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div> </div><div class="imgThumb"><a href="'+posturl+'"><img width="269" height="201" class="alignright" src="'+img[i]+'"/></a></div>';
document.write(trtd);    

 j++;
}

}

function showrecentposts7(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
     document.write('<ul>');
  for (var i = 0; i < numposts7; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';



var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="150" height="113" class="alignnone" src="'+img[i]+'"/></a> </div><div class="info"><p>'+posttitle+'</p><p class="morePhoto"><a href="'+posturl+'">Leer m?s</a></p></div></li> ';
document.write(trtd);    

 j++;
}
document.write('</ul>');
}

function showrecentposts8(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
 
  for (var i = 0; i < numposts8 ; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="100%" height="341" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2></div></div><div class="featuredPost lastPost"><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);    

 j++;
}

}

 //]]>
</script>

<script type='text/javascript'>
var classicMode = false ;
var summary = 30;
var indent = 3;

function stripHtmlTags(s,max){return s.replace(/&lt;.*?&gt;/ig, &#39;&#39;).split(/\s+/).slice(0,max-1).join(&#39; &#39;)}

function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/&lt;!--\s*more\s*--&gt;/)[0];
}

function getSummaryImproved(post,max){
   var re = /&lt;.*?&gt;/gi
   var re2 = /&lt;br.*?&gt;/gi
   var re3 = /(&lt;\/{1}p&gt;)|(&lt;\/{1}div&gt;)/gi
   var re4 = /(&lt;style.*?\/{1}style&gt;)|(&lt;script.*?\/{1}script&gt;)|(&lt;table.*?\/{1}table&gt;)|(&lt;form.*?\/{1}form&gt;)|(&lt;code.*?\/{1}code&gt;)|(&lt;pre.*?\/{1}pre&gt;)/gi
 
   post = post.replace(re4,&#39;&#39;)
   post = post.replace(re3,&#39;&lt;br /&gt; &#39;).split(re2)
 
   for(var i=0; i&lt;post.length; i++){
    post[i] = post[i].replace(re,&#39;&#39;);
   }
 var post2 = new Array();
 for(var i in post) {
  //if(post[i]!=&#39;&#39; &amp;&amp; post[i]!=&#39; &#39; &amp;&amp; post[i] != &#39;\n&#39;) post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;

 }


 var s = &quot;&quot;;
 var indentBlank = &quot;&quot;;
 for(var i=0;i&lt;indent;i++){
  indentBlank += &quot; &quot;;
 }
 if(post2.join(&#39;&lt;br/&gt;&#39;).split(&#39; &#39;).length &lt; max-1 ){
   s = post2.join(indentBlank +&#39; &lt;br/&gt;&#39;);
 } else {
  var i = 0;
  while(s.split(&#39; &#39;).length &lt; max){
   s += indentBlank + &#39; &#39; + post2[i]+&#39;&lt;br/&gt;&#39;;
   i++;
  }
 }
 return s;
}


function createSummaryAndThumb(pID,title,url,date,comment){
 var posturl= url;
 var title=title;
 var date =date;
 var comment = comment;
 var div = document.getElementById(pID);
 var content = div.innerHTML;
 if (/&lt;!--\s*more\s*--&gt;/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = &quot;block&quot;;
 }
 else {

 var imgtag = &quot;&quot;;
 var img = div.getElementsByTagName(&quot;img&quot;);
 var summ = summary;
 if(img.length&gt;=1) {
   imgtag = &#39;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&lt;img width=&quot;90&quot; height=&quot;65&quot; class=&quot;alignleft&quot; src=&quot;&#39;+img[0].src+&#39;&quot;&gt;&lt;/a&gt;&#39;;
   }
  var summary1 = imgtag+&#39;&lt;p&gt;&#39;+stripHtmlTags(content,summary)+&#39;...&lt;/p&gt;&#39;;

 div.innerHTML = summary1;
 div.style.display = &quot;block&quot;;
 }
}
</script>

Por ?ltimo, SIN expandir los artilugios busca esta l?nea:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

Justo arriba de ella agrega esto:

<b:widget id='HTML88' locked='false' title='Slider' type='HTML'>
<b:includable id='main'>
<div id='featuredContent'>   <div id='paginate-featured-slider'>
<a class='prev' href='#prev'>Anterior</a>
<a class='toc' href='#1' rel='1'>1</a>
<a class='toc' href='#2' rel='2'>2</a>
<a class='toc' href='#3' rel='3'>3</a>
<a class='toc' href='#4' rel='4'>4</a>
<a class='toc' href='#5' rel='5'>5</a>
<a class='toc' href='#6' rel='6'>6</a>
<a class='toc' href='#7' rel='7'>7</a>
<a class='toc' href='#8' rel='8'>8</a>
<a class='toc' href='#9' rel='9'>9</a>
<a class='toc' href='#10' rel='10'>10</a>
<a class='next' href='#next'>Siguiente</a>
</div>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write(&quot;&lt;script src=\&quot;http://www.nombre-de-mi-blog.blogspot.com/feeds/posts/default?max-results=&quot;+numposts10+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts8\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: &quot;featured-slider&quot;, contentsource: [&quot;inline&quot;, &quot;&quot;],
toc: &quot;#increment&quot;,
nextprev: [&quot;&#171; Anterior&quot;,&quot;Siguiente &#187;&quot;],
revealtype: &quot;click&quot;,
enablefade: [true, 0.4],
autorotate: [true, 5000],
onChange: function(previndex, curindex){ }
 })
</script>
</div>
</b:includable>
</b:widget>

Agrega el nombre de tu blog donde se indica y listo.

El slider estar? arriba de tus entradas, aunque una vez puesto puedes arrastrar el gadget al lugar que quieras desde la secci?n de Dise?o.

Aunque el ancho del slider se puede modificar, lo ideal ser?a dejarlo tal como est?, pues hacerlo m?s ancho implicar?a agregar m?s pesta?as y eso podr?a hacer m?s lenta la carga del blog, ya que como pueden ver el script es bastante largo.

Las im?genes cambian solas, pero si el usuario navega atrav�s de las pesta?as entonces el slider se detendr? para que el lector pueda ver el contenido tranquilamente.

Cuando una entrada no tenga imagen mostrar? una imagen por defecto, para cambiarla por alguna otra de tu preferencia, busca en el script esta URL y c?mbiala por la de tu imagen:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXX8hxeS86807_6gdI94YeFJdXa8A4hjyzB1rItqSjddROFuCFoHAbQwaIDiLXQr6hqKraLEHgk6oezAtyPZY6NMc25hPprLN_syyMskW3bMtf8RbD_PJKc7yCFmv58e5Ri4JcYLqfYtM/s0/sin-imagen.png

En caso de que el texto del resumen se llegara a exceder podemos modificar el n?mero de caracteres a mostrar:

summaryPost = 220;

Se encuentra dentro del script, y con un valor m?s bajo mostrar? menos caracteres en el resumen de las entradas.

Si usas las entradas con el script del Leer m?s autom?tico, entonces pon el script de este slider antes del script del Leer m?s, para que las miniaturas de tus entradas no se vean afectadas.

La ventaja de este slider es que una vez puesto recoger? los datos de las 10 ?ltimas entradas de forma autom?tica, as? que ya no tendremos que hacer nada m?s excepto disfrutarlo.

Crear p?gina de error 404 en Blogger

Ya todos saben que Blogger ha incluido nuevas opciones en la nueva interfaz de Blogger. Una de estas opciones es la posibilidad de crear un mensaje personalizado en las p?ginas de error. Es decir, en las p?ginas que no existen, de modo que si un usuario ingresa a una entrada eliminada o una direcci?n mal escrita de nuestro blog, aparecer? un mensaje personalizado.

Pero podemos ir un poco m?s all? y eliminar las sidebar y otros elementos en esas p?ginas de error para que s?lo se muestre la cabecera y el mensaje personalizado, algo como esto:

O bien, haz click en este enlace que dirige a una p?gina que no existe.

Lo primero, para que este mensaje de error pueda aparecer es necesario que tengamos en la plantilla el INCLUDE status-message, ese es el que se encarga de mostrar el mensaje de error (y otros mensajes).
As? que si anteriormente lo eliminaste para que no aparezca el mensaje "Mostrando entradas con la etiqueta..." tendr?s que ponerlo nuevamente, de lo contrario el mensaje de error no se mostrar?.

Por lo tanto aseg?rate de tener esta l?nea en tu plantilla (es necesario marcar la casilla Expandir plantillas de artilugios)

<b:include data='top' name='status-message'/>

Si no la tienes agr�gala justo arriba de este c?digo:

<data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>

Ya que lo tengas, o si ya lo tienes puesto entra en Configuraci?n | Preferencias de b?squeda (por ahora disponible s?lo en la nueva interfaz), y en donde dice Mensaje de p?gina no encontrada personalizado haz click en Editar.

Ah? agrega este c?digo:

<div id="error-404">
<div class="errort1-404"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPxaf5u1MPWE7MuSvOjwmhEFfdCj-vI_8OL3xWCctd8e4yJwr70X_-SC5XYZY7_uoRmDUi44Yy7yTtYHM_dI3mY4OKJZIZIX4czs4hnU8WoBh1ncAoAZYVKYgcR6VSd1-NVWzg87Z8qMM/s100/error.png" style="vertical-align:middle;"/> UPS!</div>
<div class="errort2-404">P?gina no encontrada</div>
<div class="errort3-404">
Parece que ha habido un error con la p?gina que estabas buscando.<br/>
Es posible que la entrada haya sido eliminada o que la direcci?n no exista.
</div>
<div class="errort4-404"><a href='http://nombre-de-mi-blog.blogspot.com'>Ir a la p?gina principal</a></div>
</div>

Ese es un c?digo de ejemplo, en realidad t? puedes poner el que quieras y con los estilos deseados.
Ahora antes de ]]></b:skin> pega los estilos:

/* Error 404
----------------------------------------------- */
/* Contenedor general */
#error-404 {
padding:20px;
}
/* Estilos del primer texto */
.errort1-404 {
color: #fff;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
/* Estilos del segundo texto */
.errort2-404 {
color: #fff;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
/* Estilos del tercer texto */
.errort3-404 {
padding:20px;
color:#414141;
text-shadow: 1px 2px 3px #fff;
text-align:center;
font-size:20px;
}
/* Estilos del bot?n */
.errort4-404 {
margin-top:20px;
padding:10px;
display:inline-block;
text-shadow:0 1px 1px #fff;
text-decoration:none;
font: bold 13px Sans-Serif;
border:1px solid #DDD;
border-radius:3px;
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}

Con eso ya tienes el mensaje de error personalizado como la imagen de ejemplo. Ahora vamos a eliminar la sidebar y otros elementos, para ello es necesario que conozcas los IDs o clases de todos esos elementos que deseas ocultar, aqu? veremos los b?sicos de las plantillas originales de Blogger.

As? que antes de </head> agrega esto:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.column-right-outer, .column-left-outer, .footer-outer, .feed-links, #blog-pager, #sidebar-wrapper, #footer-wrapper { /* Aqu? todos los elementos que queremos ocultar */
display: none;
}
.fauxcolumn-right-outer .fauxcolumn-inner, .fauxcolumn-left-outer .fauxcolumn-inner {
border-left: 0px;
border-right: 0px;
}
#main, #main-wrapper {
width: 960px; /* Aqu? va el ancho total del blog */
margin-left: -25px;
}
</style>
</b:if>

Y listo. Ahora unos detalles a tomar en cuenta. En el c?digo que hemos a?adido en la configuraci?n ver?s en color azul la URL de la imagen del ?cono de error, puedes cambiarlo por otro, de hecho puedes cambiar toda la estructura de ese c?digo por la que desees. Ah? mismo pon en donde se indica el nombre de tu blog, esto es para el bot?n que aparecer? sugiri�ndole al lector ir a la p?gina principal.

En los estilos est?n en color verde definidas las ?reas de cada elemento del mensaje de error.

En el segundo c?digo ver?s tambi�n dos anotaciones en color verde, estas son muy importantes, en la primera pondremos todos los elementos que queremos ocultar antes de .column-right-outer, por ejemplo, si tuvieras una sidebar que se llama right-sidebar entonces antes de .column-right-outer, agregar?as:

#right-sidebar,

Todos los elementos que agregues para ocultar deber?n ir separados por una coma.

Despu�s sigue el ancho del ?rea donde se muestra el mensaje de error, ah? debes poner la medida del ancho de tu blog, quiz? tengas que poner un valor un poco m?s bajo, o agregar otro margen despu�s de �l para acomodarlo, eso ya depender? de cada caso y cada qui�n deber? experimentar con esos valores.

Como puedes ver en cuesti?n de c?digos es poco, casi todo ser? creatividad de cada uno para que la p?gina de error sea tan simple o tan compleja como cada quien quiera.