PARA MOSTRAR UN ÍNDICE POR ETIQUETAS

Este es el script que hace el índice como un menu:

<script type ="text/javascript" > function recentpostslist(json) {
    document.write('<ul>');
    for (var i = 0; i < json.feed.entry.length; i++) {
        for (var j = 0; j < json.feed.entry[i].link.length; j++) {

            if (json.feed.entry[i].link[j].rel == 'alternate') {

                break;
            }
        }
        var entryUrl = "'" + json.feed.entry[i].link[j].href + "'"; //bs 
        var entryTitle = json.feed.entry[i].title.$t;
        var item = "<li>" + "<a href=" + entryUrl + '">' + entryTitle + "</a> </li>";

        document.write(item);
    }

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

Y este lo muestra:

<script src="URL DEL BLOG(solo una barra/)/feeds/posts/summary/-/NOMBRE ETIQUETA QUE QUIERES MOSTRAR?max-results=500&alt=json-in-script&callback=recentpostslist"></script>

</div>

Crear dos columnas de texto

SIN IMAGEN:

<div style="padding: 10px; float: left; width: 45%; text-align: justify;">Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>

CON IMAGEN:

<div style="padding: 10px; float: left; width: 45%; text-align: justify;"><img style="margin: 0px; float: left;" src="URL de la imagen" alt="Trucos blogger” border="0" />Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>

Cargar y usar en tu blog fuentes de iconos

Carga la fuente. Coloca este código entre las etiquetas <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Allí donde quieres colocar el símbolo este código:
<span class="fa fa-home"></span>

Se le puede asignar estilo ejemplo:
<style>
 .fa {display: inline-block;font-size: 40px;margin: 5px;color: #666;}
.fa:hover {color: #1A4E93;}
.fa.fa-signal {color: #71AF42;}

</style>

Los símbolos se encuentra en esta dirección,La fuente y los símblos solo tienes que cambiar en <span class="fa fa-home"></span> lo que está en rojo, por el símbolo en cuestión.

Centrar un elemento o contenedor sin la etiqueta Center

<div align="center" ;">

Aquí lo que quereís centrar

</div>

No es compatible con Html5 utilizar en su lugar css

Sintaxis CSS: <div style = "text-align: center">

Probar el ejemplo:

<div style="text-align:center;border:1px solid red">

Aquí el elemento

</div>

OCULTAR "Mostrando entradas con la etiqueta..."

Para ocultar este molesto mensaje en vuestra plantilla y antes de  ]]></b:skin> colocáis este código:

.status-msg-wrap {visibility:hidden;display:none;}

CENTRAR LA CABECERA DEL BLOG

Lo único que se necesita es este pequeño código colocado en vuestra plantilla antes de ]]></b:skin>

.header .widget {
text-align:center;}
.header img {margin:0 auto;}

INDICE POR ETIQUETAS DESPLEGABLE

Usaremos el Gadget de etiquetas propio de blogger, una vez añadido buscaremos su ID que suele ser label acompañado de un numero, si le ponéis un nombre cuando lo creéis os sera más fácil encontrarlo. Luego ampliáis el codigo dándole a la flechita que teneis a la izquierda y sustituis este codigo que os aparecerá :

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span dir='ltr'>(<data:label.count/>)</span>

</b:if>

</li>

</b:loop>

</ul>

Por este otro:

<br/>

<select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>

<option>Selecciona una categoría</option>

<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/>

(<data:label.count/>)

</option>

</b:loop>

</select>

La información detallada de todo esto la encontrareis en este magnifico blog ciudadblogger

REDONDEAR UNA IMAGEN EN VUESTRO BLOG

.redondo img{
border: 2px solid grey;
margin: 0;
padding: 0;
border-radius: 800px;
overflow: hidden;
}

 ]]</b:skin>

El Html a colocar o bien en una entrada o en un gadgets:

<div class="redondo">
<img src="DIRECCION_IMAGEN"/>
</div>

¿DONDE ESTÁN LOS ESTILOS(CSS) EN BLOGGER?

Lo primero será acceder a vuestra plantillas presionando:

Una vez dentro del editor esto es lo que tenéis que buscar (para que os salga el buscado presionar CONTROL+F)

desplegáis la flecha que veis en el dibujo y se expandirá el codigo donde encontrareis el  CSS y a las variables.
Muchos de los códigos que en este blog se muestran es justo ahí donde deben colocarse.

ABRIR TODOS LOS ENLACES EN NUEVA VENTANA

Para hacer que todos los enlaces de tu blog se abran en una nueva ventana o pestaña basta con poner este código después del <Head>

<a href="DIRECCION"target="_blank">Texto enlace</a>

LA FECHA ACTUALIZADA DONDE QUIERAS ( y en castellano)

Dos maneras de mostrar la fecha en vuestro blog o pagina web allí donde queráis:

SIMPLE:

(en blogger lo podéis colocar en un widget html)

<script>

var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");

var f=new Date();

document.write(f.getDate() + " de " + meses[f.getMonth()] + " de " + f.getFullYear());

</script>

MUESTRA:

CON ESTYLO

<style type="text/css">

.mifecha {

   background-color: #999;

   padding: 3px;

   width: 110px;

   text-align: center;

   font-family:verdana, arial;

   font-size: 12pt;

}

.mifecha .ano{

   background-color: #339;

   padding: 2px;

   font-size: 100%;

   margin-bottom: 3px;

   color: #fff;

   letter-spacing: 3px;

   font-weight: bold;

}

.mifecha .dia{

   background-color: #99f;

   font-size: 300%;

   padding: 5px 8px;

   margin-bottom: 3px;

   font-weight: bold;

}

.mifecha .mes{

   background-color: #339;

   font-size: 80%;

   padding: 2px;

   color: #fff;

   font-weight: bold;

}

</style>

<script>

var f=new Date();

var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");

document.write('<div class="mifecha">');

document.write('<div class="ano">' + f.getFullYear() + '</div>');

document.write('<div class="dia">' + f.getDate() + '</div>');

document.write('<div class="mes">' + meses[f.getMonth()] + '</div>');

document.write('</div>');

</script>

MUESTRA:

OCULTAR ELEMENTOS EN ZONAS DEL BLOG

Para localizar el elemento buscas el nombre y copias la ID.
Estos elementos hay que colocarlos antes de </head>

• Ocultar un elemento SÓLO en la portada del blog

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style type='text/css'>

#NOMBRE {

display: none;

}

</style>

</b:if>

• Ocultar un elemento en todas partes MENOS en la portada del blog

<b:if cond='data:blog.url != data:blog.homepageUrl'>

<style type='text/css'>

#NOMBRE {

display: none;

}

</style>

</b:if>

• Ocultar un elemento SÓLO en las entradas individuales

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>

#NOMBRE {

display: none;

}

</style>

</b:if>

• Ocultar un elemento en todas partes MENOS en las entradas individuales

<b:if cond='data:blog.pageType != &quot;item&quot;'><style type='text/css'>

#NOMBRE {

display: none;

}

</style>

</b:if>

• Ocultar un elemento SÓLO en las páginas del archivo del blog

<b:if cond='data:blog.pageType == &quot;archive&quot;'><style type='text/css'>

#NOMBRE {

display: none;

}

</style>

</b:if>

• Ocultar un elemento en todas partes MENOS en las páginas del archivo del blog

<b:if cond='data:blog.pageType != &quot;archive&quot;'><style type='text/css'>

#NOMBRE {

display: none;

}

</style>

</b:if>

• Ocultar un elemento SÓLO en las páginas estáticas

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><style type='text/css'>

#NOMBRE {

display: none;

}

</style>

</b:if>

• Ocultar un elemento en todas partes MENOS en las páginas estáticas

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><style type='text/css'>

#NOMBRE {

display: none;

}

</style>

</b:if>

• Ocultar un elemento en una entrada específica o etiqueta específica

<b:if cond='data:blog.url == &quot;URL de la entrada o etiqueta&quot;'><style type='text/css'>

#NOMBRE {

display: none;

}

</style>

</b:if>

• Ocultar un elemento en todas partes MENOS en una entrada o etiqueta específica

<b:if cond='data:blog.url != &quot;URL de la entrada o etiqueta&quot;'><style type='text/css'>

#NOMBRE {

display: none;

}

</style>

</b:if>

• Ocultar mas de un elemento a la vez

<b:if cond='data:blog.pageType == "static_page"'>(o cualquier lugar antes especificado)

<style type='text/css'>

#NOMBRE,NOMBRE, NOMBRE... {

display: none;

}

</style>

JUSTIFICAR EL TEXTO SIEMPRE EN LAS ENTRADAS

   Localizamos un código con el siguiente formato poniendo, dentro del rectángulo de búsqueda, la primera línea del mismo:

.post-body {
yyyyyyyyyy: xxxxx;
yyyyyyyyyy: xxxxx;
yyyyyyyyyy: xxxxx;
yyyyyyyyyy: xxxxx;
text-align: justify;(AL FINAL COLOCAREIS ESTO)
}

Para justificarlo en los comentario buscais esta linea .comment-body { 
y hacéis lo mismo que en la anterior.
También podéis hacerlo en css directamente en la entrada en el editor html o poniendo este codigo en el apartado de configuración /entradas y comentarios/plantilla de entradas/ añadir(justo este codigo)

Cada vez que entréis en el editor en modo html os aparecerá.

<div style="text-align: justify;">

Aquí el texto de la entrada

</div>

UNA IMAGEN COMO TÍTULO DE UN GADGET

      Lo primero que haremos sera añadir el gadget a personalizar en tu barra lateral o en cualquier sección del blog. 
Para ello, accede al apartado Diseño>Elementos de la página>Añadir un gadget. 
Seguidamente, atribúyele el título que quieras.
Guárdalo y sigue estos pasos: 
1º) Busca en tu plantilla el gadget en cuestión (Control+f, para acceder al buscador) hasta que aparezca un código similar este, unas veces puede ser mas largo o más corto, resulta indiferente para lo queremos cambiar:

<b:widget id='HTML1' locked='false' title='EL NOMBRE DE TU GADGET ' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

2º) Reemplaza la línea resaltada en color verde por esto:
<img src="URL DE TU IMAGEN"/> (podría estar alojada en Picasa>

3º) Guarda la plantilla para termina

PERSONALIZAR TODOS LOS GADGET DE LA SIDEBAR

 Localizamos la etiqueta   ]]></b:skin>  y, antes de la misma, pegamos el siguiente código: 

.sidebar h2 {
  color: #0b3861; /* Color del título */
  background: #58acfa; /* Color del fondo */
  text-align: center; /* Título en el centro */
  font-weight: bold; /* Título en negrilla */
  font-family: Verdana; /* Tipo de fuente */
  font-size: 12px; /* Tamaño de la fuente */ 
}

MODIFICAR EL ESTILO DE UN GADGET

 Estas es la forma más general de vestir o modificar el estilo de un gadget en blogger .Deberá colocarse en la plantilla del blog en la zona anterior a  ]]></b:ski.

Para identificar la id deberas buscar el en blog (control + f dentro de la plantilla) el nombre que le has puesto y 
<b:widget id='BlogArchive1' locked='false' title='Título del gadget' type='BlogArchive'/>
y en una linea parecida a esta hallareis la ID.

#(AQUI LA ID DEL GADGET sin los paréntesis.) h2{
  color: #0b3861; /* Color del título */
  background: #58acfa; /* Color del fondo */
  text-align: center; /* Título en el centro */
  font-weight: bold; /* Título en negrilla */
  font-family: Verdana; /* Tipo de fuente */
  font-size: 12px; /* Tamaño de la fuente */
}

Con estas instrucciones se personaliza el título del gadget si quitas el h2 que estan antes de los corchetes varias todo el contenedor.
.sidebar h2 {.... Así modificaríais el título de todos widget.


Para personalizar el contenido el codigo sera algo parecido a esto:

#(LA ID DEL GADGET sin paréntesis) .widget-content{

color: #0b3861; /* Color del texto */
background: #58acfa; /* Color del fondo */
font-family: Verdana; /* Tipo de fuente */
font-size: 12px; /* Tamaño la fuente */
}
La personalización del contenido de todos los gadget sería asi lo importante es la primera linea:


.widget-content{
color: #0b3861; /* Color del texto */
background: #58acfa; /* Color del fondo */
font-family: Verdana; /* Tipo de fuente */
font-size: 12px; /* Tamaño de la fuente */
}

Como colocar código CSS

Para colocar código CSS en vuestro blog bien sea en una gadget html/java... o en una entrada, sin tener que manipular vuestra plantilla tan solo tendréis que colocar esta instrucción:

<style type="text/css" media="screen">

Justo debajo el código CSS, par finalizar el tag, con:

</Style>

Subrayar texto en blogger

En el html del blog antes del </head>:
<style type="text/css">.subrayar{text-decoration: underline;}</style>

Cuando queramos utilizarlo siempre entrando en el editor de blogger en modo html:
<span class="subrayar">Insertar el texto que queramos subrayar</span>

Gadget para que nos enlacen

Para ponerlo entra en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y ahí pega lo siguiente:


<img src="URL de la imagen"/><form action="http://beta.blogger.com/add-widget" method="post"><input value="Blog Recomendado" name="widget.title" type="hidden"/><textarea style="display:none;" name="widget.content">
<a href="URL de tu blog" target="blank"><img title="Título del blog" src="URL de la imagen" /></a>
</textarea><input value="http://buzz.blogger.com" name="infoUrl" type="hidden"/><input value="http://www.blogger.com/favicon.ico" name="logoUrl" type="hidden"/><input value="Enlázame" name="go" type="submit"/></form>

Insertar imágenes en los títulos de las entradas

Delante del Titulo :
                                 <img src="DIRECCIÓN COMPLETA DE LA IMAGEN"/>