resumen

<pre class="line-numbers language-markup" data-codetype="HTML" title="HTML">
<code class=" language-markup"> add HTML codes here... </code></pre>
<pre class="line-numbers language-css" data-codetype="CSS" title="CSS">
<code class=" language-css"> add CSS codes here...</code></pre>
<pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript">
<code class=" language-javascript"> add Java Script codes here...</code></pre>
<pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery"> add JQuery codes here...</code></pre>

</head>

<script type="text/javascript">
//<![CDATA[

function showrecentcomments(json){for(var i=0;i<a_rc;i  ){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k  ){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#comment-");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");if(m_rc==true)document.write('On ' k_rc[parseInt(i_rc,10)] ' ' j_rc ' ');document.write('<a href="' c_rc '">' b_rc.author[0].name.$t '</a> commented');if(n_rc==true)document.write(' on ' f_rc);document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i><br/><br/>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc '&hellip;&#8221;</i>');document.write('<br/><br/>');}}}

function rp(json){document.write('<ul>');for(var i=0;i<numposts;i  ){document.write('
<li>');var entry=json.feed.entry[i];var posttitle=entry.title.$t;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}}posttitle=posttitle.link(posturl);var readmorelink="(more)";readmorelink=readmorelink.link(posturl);var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");document.write(posttitle);if(showpostdate==true)document.write(' - ' monthnames[parseInt(cdmonth,10)] ' ' cdday);if(showpostsummary==true){if(postcontent.length<numchars){document.write(postcontent)}else{postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent '...' readmorelink)}}document.write('</li>
')}document.write('</ul>
')}

//]]>
</script>

<script type="text/javascript">
summary_noimg = 800;
summary_img = 750;
img_thumb_height = 195;
img_thumb_width = 260; 
</script>
<script type="text/javascript">
//<![CDATA[

function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  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); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop  ; 
 strx = strx.substring(0,chop-1); 
 return strx '...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
  summ = summary_img;
 }
 
 var summary = imgtag   '<div>
'   removeHtmlTag(div.innerHTML,summ)   '</div>
';
 div.innerHTML = summary;
}

//]]>
</script>

crosscol

tres columnas en la sección del crosscol
plantillas, trucos,


añadir tres columnas en la sección del footer,
Antes de empezar tengo que aclarar que estás modificaciones están basadas en el código de las plantillas originales de Blogger que ya tienen incluido el crosscol en su código por defecto.
[1] Tendremos que retirar cualquier elemento que tengamos colocado en el crosscol del blog, moviendolo a la sidebar de forma temporal y, una vez añadidas las tres columnas en el crosscol, volver a colocarlo en esa sección si así lo queremos.
 [2] Nos situamos en “Edición HTML” de nuestro panel y sin expandir las plantillas de artilugios, localizamos la sección del crosscol:

<div id="’crosscol-wrapper’" style="text-align: center’;">
<b:section class="’crosscol’" id="’crosscol’" showaddelement="’no’/">
</b:section></div>

[3] Sustituimos ese código por este otro:

<div id=’crosscol-wrapper’ style=’text-align:center’>
 <div style=’clear:both;’/>
 <div id=’crosscol-bottom’ style=’text-align: center; padding: 10px; text-transform: lowercase;’>
 <b:section class=’crosscol’ id=’crosscol-bottom’ preferred=’yes’>
 <b:widget id=’Text3′ locked=’false’ title=” type=’Text’/>
 </b:section>
 </div>
 <div id=’crosscol-columna-contenedor’>
 <div id=’crosscol2′ style=’width: 30%; float: left; margin:0; text-align: center;’>
 <b:section class=’crosscol-column’ id=’crol1′ preferred=’yes’ style=’float:left;’/>
 </div>
 <div id=’crosscol3′ style=’width: 40%; float: left; margin:0; text-align: center;’>
 <b:section class=’crosscol-column’ id=’crol2′ preferred=’yes’ style=’float:left;’/>
 </div>
 <div id=’crosscol4′ style=’width: 30%; float: right; margin:0; text-align: center;’>
 <b:section class=’crosscol-column’ id=’crol3′ preferred=’yes’ style=’float:right;’/>
 </div>
 <div style=’clear:both;’/>
 </div>
 </div>

4] Ahora ya solo nos queda añadirle unas líneas de CSS a la plantilla para conseguir controlar la separación de las columnas y añadirles además un color de fondo (blanco en el ejemplo) y un borde.



Pegamos estas líneas antes de ]]></b:skin>:

#crol1{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
#crol2{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
#crol3{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
#crosscol-columna-contenedor {
clear:both;
}
.crosscol-columna {
padding: 10px;
}

 add HTML codes here... 

 add CSS codes here...

 add Java Script codes here...

 add JQuery codes here...