a.linkopacity img {

filter:alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

-khtml-opacity: 0.5;}



a.linkopacity:hover img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

-khtml-opacity: 1.0; }

Texto Comprimido
<font style="FONT-WEIGHT: normal; FONT-SIZE: 45pt; COLOR: #000000; LINE-HEIGHT: 20pt; FONT-FAMILY: Georgia; LETTER-SPACING: -10px">Aquí el texto</FONT><br />

Texto-Texto

Texto en dos líneas

<font style="font-size:55px;line-height:18px;color: Black;font-family: Trebuchet MS;">Aquí el texto<br /> <font style="font-size:45px;color: Pink;font-family: Trebuchet MS;">Aquí el texto</FONT></FONT><br />

Texto 1
Segundo

Texto tipo Pixel

<font style="FONT-SIZE: 20pt; COLOR:black; FONT-FAMILY: small fonts;" style="line-height:2px;">Aquí el texto</FONT><br />

Texto pixel

Texto de varios colores

<font face="tahoma" font size="20" font color="#8B0000">A</font><font face="tahoma" font size="20" font color=" #FF0000">Q</font><font face="tahoma" font size="20" font color="#FF8C00">U</font><font face="tahoma" font size="20" font color="#FFA500">I </font><font face="tahoma" font size="20" font color="#FFFF00">E</font><font face="tahoma" font size="20" font color="#ADFF2F">L </font><font face="tahoma" font size="20" font color="#00FF00">T</font> <font face="tahoma" font size="20" font color="#008B8B">E</font><font face="tahoma" font size="20" font color="#0000FF">X</font><font face="tahoma" font size="20" font color="#6959CD">T</font><font face="tahoma" font size="20" font color="#473C8B">O</font><br />

AQUI EL T EXTO

Otro en dos líneas

<font style="font-weight: bold; font-size: 40pt; color: Turquoise; line-height: 15px; font-family: arial; letter-spacing: -5pt; text-transform: none;">AQUÍ EL TEXTO</font><br /> <font style="font-weight: bold; font-size: 20pt; color: darkcyan; line-height: 15px; font-family: arial; letter-spacing: -2pt; text-transform: lowercase;">AQUÍ LA LÍNEA DE TEXTO</font><br />

AQUÍ EL TEXTO 1
AQUÍ LA LÍNEA DE TEXTO 2

Cambia de color al pasar el puntero del ratón

<font style="font-weight: bold; font-size: 40pt; color: Turquoise; line-height: 15px; font-family: arial; letter-spacing: -5pt; text-transform: none;">AQUÍ EL TEXTO</font><br /> <font style="font-weight: bold; font-size: 20pt; color: darkcyan; line-height: 15px; font-family: arial; letter-spacing: -2pt; text-transform: lowercase;">AQUÍ LA LÍNEA DE TEXTO</font><br />

PASA EL RATÓN POR EL TEXTO

Fuente:
Blogeriana

<style type='text/css'>
/* numerar los comentarios */
.comentacontador {
float: right;
display: block;
width: 50px;
margin-top: -30px; /* la posición de los números */
text-align: right; /* el número a la derecha */
/* el tipo y tamaño de la fuente */
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 36px;
font-weight: normal;
}

/* como son enlaces, forzamos las propiedades de color */
.comentacontador a:link, .comentacontador a:visited {color: #445566 !important;}
.comentacontador a:hover, .comentacontador a:active {color: #FF9933 !important;}

/* propiedades para diferenciar pares e impares */
.comentarioPar { /* los comentarios pares */
margin: 10px 0px; /* separación entre comentarios */
padding: 5px 20px 0px; /* margenes internos */
/* el color de fondo, los bordes. etc */
background-color: #1E252D;
border-bottom: 1px solid #445566;
border-top: 1px solid #445566;
}

.comentarioImpar { /* los comentarios impares */
margin: 10px 0px; /* separación entre comentarios */
padding: 5px 20px 0px; /* margenes internos */
/* el color de fondo, los bordes. etc */
background-color: #2E353D;
border-bottom: 1px solid #445566;
border-top: 1px solid #445566;
}
</style>


<script type='text/javascript'>
function ContarC(cual) {
var resto;
resto = contadorComentarios % 2;
if (resto == 0)
document.getElementById(cual).className='comentarioPar'
else
document.getElementById(cual).className='comentarioImpar'
}
</script>

En la parte del estilo donde dice comentario par y comentario impar esta etiqueta background-color: es la que establece el color de fondo tanto de los comentarios de números pares e impares, es preferible que sean diferente los colores para que puedas ver la diferencia.
Andrés del blog Ayuda para el Blog, tiene una entrada parecida a este truco pero con el efecto hover.

Guardas los cambios y para ver el resultado, ve a una de las entradas que tenga comentarios y veras el truco implementado.

A continuación colocaremos este códigos debajo de </b:section>:

<script type='text/javascript'>
//<![CDATA[
// http://rias-techno-wizard.blogspot.com
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=4;
var displayPageNum=2;
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">'+thisNum+'</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"></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea">
'+html;
// html = '<div class="showpageArea">
<span class="showpage"> Total '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)) {
html += downPageHtml;
}

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&amp;callback=showpageCount&amp;max-results=99999' type='text/javascript'/>

Ahora para culminar con este truco solo tienes que agregarle el estilo. Como veras las propiedades están dentro de la etiqueta <style>. Estas son las propiedades originales

<style type='text/css'>
.showpageArea {
background: transparent url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg) no-repeat left top;
color:#003366;
font-size: 11px; 
padding: 10px 15px 10px 30px;
text-align: left;
width: 470px;
}
.showpageArea a {
color: #0F0;
text-decoration: underline;
}
.showpageNum a {
border: 1px solid #FFF;
color:#0F0;
margin: 0 10px;
padding: 0 5px 0 8px;
text-decoration:none;
}
.showpageNum a:hover {
color: #FE8314;
background-color: #FFF;
border: 1px solid #0071A5;
}
.showpagePoint {
color: #FE8314;
margin: 0 8px 0 4px;
}
.showpage a {
color: #FFF;
padding: 0 2px 0 4px;
text-decoration: none;
}
.showpage a:hover {
color: #FE8314;
text-decoration: underline;
}
.showpageNum a:link,.showpage a:link {
color: #CC0000;
text-decoration: none;
}


</style>

1. Escribe la descripción de tu blog. Ve a la pestaña de ?Configuración? y en la opción ?Básico? encontraras el campo a llenar para poner una descripción a tu blog. Esto es útil para visitantes nuevos en tu blog y puede serlo para los buscadores.
2. Busca un buena plantilla. Existen varios sitios con plantillas blogger donde puedes encontrar gran diversidad de diseños. No bases tu elección solamente en lo gráfico (cabeceras, botones, iconos, etc) sino también en la estructura (número de columnas, accesibilidad, etc) y recuerda siempre leer las instrucciones de cada plantilla pues muchas veces son importantes para la correcta visualización de la misma.
3. Compra un dominio y úsalo con tu blog. Siempre he dicho que un dominio debe ser la primer inversión de un blogger y viendo que por menos de 10 dolares podemos tener nombre propio con muchas ventajas, esto es muy recomendable. Ve como agregar tu dominio en blogger.
4. Cambia el feed de tu blog por el de feedburner. Feedburner es un servicio de google que te permite tener estadísticas de las personas que te leen por este medio. Desde el panel de control de blogger es posible agregar feedburner a tu blog.
5. Corrige el enlace de comentarios. Un pequeño detalle que mejora la accesibilidad de tu blog. Para Corregir el enlace de comentarios hay que hacerlo de forma manual.
6. Cambia las imágenes de tu plantilla a un nuevo alojamiento. Muchas plantillas tienen hospedadas las imágenes en servicios gratuitos que limitan la cantidad de accesos a ellas (ancho de banda) lo que provoca que halla momentos donde ninguna imagen del blog se vea. Alojarlas en Blogger parece la mejor opción, en otro post explicaremos como hacerlo.
7. Agrega los gadgets básicos en tu barra lateral. En la pestaña ?Diseño? opción de ?Elementos de página? es posible agregar gadgets, los más básicos son: Etiquetas, Archivo del blog (en modo de lista) y Enlaces de suscripción.
8. Inserta el formulario de comentarios en la página individual de tus entradas. Como esta característica esta aun esta en fase de pruebas es necesario hacerlo de forma manual en plantillas modificadas o de forma automática únicamente para las plantillas por defecto de blogger.
9. Agrega tu código de seguimiento de estadísticas. Ya sea que uses Google Analytics, SiteMeter u otro sistema de estadísticas es importante no olvides agregar su código de seguimiento antes de la etiqueta que se encuentra en la pestaña ?Diseño?, opción de ?Edición de HTML?, justo hasta el final del código.
10. Agrega tu blog a las herramientas de Google. Las herramientas de google te permiten seguir estadísticas de búsqueda y errores relacionados a tu sitio. Su uso es muy intuitivo y gratuito, pero también puedes ver el tutorial de Eric Lander para guiarte.

 
 .comment-form { 
margin:0px auto; 
width:400px;
}

.comment-form h3 {
background:transparent url(Url_de_la_imagen) no-repeat scroll left 50%; color:#6998CA;
font-size:19px;
line-height:35px;
}
 

.comment-form p{
background-color:#EFEFF7;
color:#000;
border:1px solid #6998CA;
padding:10px;
width:375px;
}

<b:includable id='nextprev'>

<b:includable id='nextprev'>

<div id='blog-pager'>

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

<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>

<img src='http://img440.imageshack.us/img440/8276/backfn3.png'/></a>

</b:if>

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

<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>

<img src='http://img95.imageshack.us/img95/48/forwardkr5.png'/></a>

</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'>

<img src='http://img234.imageshack.us/img234/2834/homeyq0.png'/></a>

</div>

<div class='clear'/>

</b:includable>