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="http://lh3.googleusercontent.com/-KdDQSKyrKQc/T3UJzX6AzTI/AAAAAAAACV0/UBtcuUQD9S4/s000/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="http://lh3.googleusercontent.com/-ApqPUOb_l_M/T3UJaZyosEI/AAAAAAAACVs/U3LOnq3vQKY/s000/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="http://lh6.googleusercontent.com/-lwy8tIUEIOY/T3UI-XUr0SI/AAAAAAAACVk/S5LztYfslYc/s000/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(http://lh3.googleusercontent.com/-jDLwXJiGntk/T29pYcTKb9I/AAAAAAAACUQ/gf-AfWqrTzY/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="http://lh6.googleusercontent.com/-OxOn5W_Gb4Y/TS4sf308N0I/AAAAAAAAAic/qa-fhCghsYs/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] = "http://lh4.googleusercontent.com/-xOm3GjEeKp0/T29pY9DlYPI/AAAAAAAACUY/Ec_j6_CMB5M/s000/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:

http://lh4.googleusercontent.com/-xOm3GjEeKp0/T29pY9DlYPI/AAAAAAAACUY/Ec_j6_CMB5M/s000/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://lh6.googleusercontent.com/-TyJrDs9bcr0/T2u4hmEMdWI/AAAAAAAACT8/e4cLGWGxh7s/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.