Cuadros de texto incrustados en Blogger

A veces necesitamos incrustar cuadros de texto en los posts o artículos de Blogger. Son cuadros que crean barras de desplazamiento para poner textos largos. Veamos la forma de hacerlo con el código correspondiente que tenemos que utilizar. En el siguiente ejemplo os dejo el trozo de código necesario para hacer lo que debajo tenéis: un cuadro de texto con barras de desplazamiento. Sólo hay que copiar el código y llevarlo al blog propio.

<span id="fullpost"><div align="center"><pre style="overflow: auto; width: 500px; height: 150px;"><div align="left"><span style="font-size: 100%;">

En este espacio ponemos el texto que queramos; sea largo o corto.

</span></div></pre></div>

Cuadros de Texto

Con un sencillo código, puedes crear un pequeño cuadro con un texto que se desplaza hacia arriba. Prueba a modificar el color, la dirección, etc. Experimenta...

Aquí el código:

<div align="center"><table bgcolor="#990000" border="1" 
width="200"><tbody><tr><td 
align="center"><marquee scrollamount="1" direction="up" 
height="50"><span style="color:#ffffff;">Con un sencillo 
código, puedes crear un pequeño cuadro con un texto que se desplaza 
hacia arriba.
Prueba a modificar el color, la dirección, etc.
Experimenta...
</span></marquee></td></tr></tbody></table></div>

Cambiar la presentación de las fechas de las entradas

Podemos cambiar la típica fecha del post por lo siguiente:  
Hace "tiempo transcurrido desde la publicación de la entrada"

Para ello hemos de modificar nuestra plantilla y añadir código javascript.
Pasos:

• Entrar al código html de la plantilla (Escritorio → Diseño → Edición de HTML)
• Marcar: Expandir plantillas de artilugios
• Colocar el código javascript siguiente detrás de: ]]></b:skin> 

<script type='text/javascript'>
function timeAgo(date1,date2,granularity){var self=this;periods=[];periods[&#039;semana&#039;]=604800;periods[&#039;d&amp;iacute;a&#039;]=86400;periods[&#039;hora&#039;]=3600;if(!granularity){granularity=5;}
(typeof(date1)==&#039;string&#039;)?date1=new Date(date1).getTime()/1000:date1=new Date().getTime()/1000;(typeof(date2)==&#039;string&#039;)?date2=new Date(date2).getTime()/1000:date2=new Date().getTime()/1000;if(date1&gt;date2){difference=date1-date2;}else{difference=date2-date1;}
output=&#039;&#039;;for(var period in periods){var value=periods[period];if(difference&gt;=value){time=Math.floor(difference/value);difference%=value;output=output+time+&#039; &#039;;if(time&gt;1){output=output+period+&#039;s &#039;;}else{output=output+period+&#039; &#039;;}}
granularity--;if(granularity==0){break;}}
return&#039;Hace &#039;+output;}
$(document).ready(function(){});
</script>

• Sustituir el siguiente código: <data:post.dateHeader/>

          Por: 

<scrip type='text/javascript'>document.write(timeAgo(&#39;<data:post.dateHeader/>&#39;));</script>

• El último paso es cambiar el formato de fecha para que sea compatible con el script entra a: Escritorio → Configuración → Formato → Formato de cabecera de fecha. Cambiar el formato de fecha por el sexto de arriba hacia abajo: 7/18/2010. Guardar los cambios.

Comentarios recientes en el blog

Para mostrar los últimos comentarios añadidos tenemos un gadget: Recent Comments
Pero parece ser que su funcionamiento es errático.

Podemos solucionarlo añadiendo el gadget Feed y colocar como dirección del feed:

http://el_nombre_de_tu_blog.blogspot.com/feeds/comments/default

Añdir multiples autores a un Blog

Seguimos los pasos siguientes:
- Accedemos a la página de configuración
- Vamos a permisos
- Pinchamos en añadir autores  introducimos la dirección de correo
   Esto enviará una invitación que cuando sea aceptada el usuario podrá añadir entradas
- Si no le damos privilegios de administrador solo podrá administrar sus propias entradas.

Añadir Paginación al Blog

Para ello añadimos un gadget de HTML/Javascript y pegamos el código siguiente:

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 2px;
text-decoration: none;
}

.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 2px;
text-decoration: none;
}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpagePoint {font-size:10px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=1;
var firstPageWord = 'Primera';
var endPageWord = 'Última';
var upPageWord ='Anterior';
var downPageWord ='Siguiente';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="font-size:10px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Página '+thisNum+' de '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}

</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Ocultar la barra de navegación de Blogger

Para ello tenemos que modificaros la plantilla:
Buscamos body {
y añadimos arriba:

/* CSS para ocultar la barra de navegación bar */

#navbar

{

height:0px;

visibility:hidden;

display:none

}

El archivo anterior en un marco

Como insertar objetos en un marco

Para insertar objetos en el blog haremos uso del elemento iframe de html, que nos permite insertar un documento html dentro de otro documento html.
Ej:

<div align="center">
<iframe frameborder="0" height="500" scrolling="auto" src="http://dl.dropbox.com/u/14593377/Pintor%20Julio%20Quesada/burbujitas.swf" width="500"></iframe></div>

Donde:

• src:          URL o ruta del documento html a insertar.
• frameborder:  indica si el marco lleva borde (1) o no (0). Por defecto si los lleva.
• height:       alto del marco en píxeles.
• width:        ancho del marco en píxeles.
• scrolling:    barra de desplazamiento, auto para que aparezca automáticamente cuando sea necesario, yes aparecerá siempre y no para que no aparezca nunca.

La etiqueta div y el atributo align="center" para que el marco aparezca centrado.

Ejemplo de archivo en dropbox

Vamos a enlazar un archivo en dropbox

Emulando a Yolanda: puntxa aquí

Archivos en el Blog

Utilizaremos Dropbox para colocar archivos a disposición de nuestros lectores.

Veamos como en el siguiente enlace

Enlace Imagen

Albúm de Picasa

Para insertar un álbum de Picasa en nuestro blog podemos leer el siguiente enlace
En nuestro ejemplo hemos colocado el siguiente código:

<embed type="application/x-shockwave-flash" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" width="400" height="267" flashvars="host=picasaweb.google.com&hl=es&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F102104939515780882998%2Falbumid%2F5574008463435794817%3Falt%3Drss%26kind%3Dphoto%26hl%3Des" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

Colección de Pájaros

Album de Flickr

Para insertar un álbum de Flickr en nuestro blog podemos leer el siguiente enlace

En nuestro ejemplo hemos copiado el siguiente código:

<object width="400" height="300"> <param name="flashvars" value="offsite=true&lang=es-us&page_show_url=%2Fphotos%2F44566564%40N03%2Fsets%2F72157626056100614%2Fshow%2F&page_show_back_url=%2Fphotos%2F44566564%40N03%2Fsets%2F72157626056100614%2F&set_id=72157626056100614&jump_to="></param> <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649"></param> <param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" allowFullScreen="true" flashvars="offsite=true&lang=es-us&page_show_url=%2Fphotos%2F44566564%40N03%2Fsets%2F72157626056100614%2Fshow%2F&page_show_back_url=%2Fphotos%2F44566564%40N03%2Fsets%2F72157626056100614%2F&set_id=72157626056100614&jump_to=" width="400" height="300"></embed></object>

Colección de Flores

División de entradas

No conviene que las entradas sean demasiado largas, es preferible hacer una división, colocar una introducción y después el texto completo, tendremos así una carga de la página más rápida y clara.
Para ver como se hace esta división podemos leerlo en éste enlace,
Esto sería la introducción de la entrada :-)

Para ir leyendo

Dejo aquí los enlaces a los textos que puede ayudaros a crear vuestros blogs:

De Alejandro Valero:

• Crear un blog en blogger
• Taller de blogs