Traductor Google con banderas

Un gadget de fácil instalación, que nos facilitan en AllBlogTolls solo hay que copiar y pegar el código en un gadget HTML/Javascript.

Detecta de forma automática el idioma del blog y lo traduce al idioma escogido usando el traductor de Google.

Soporta 12 idiomas diferentes: Inglés, francés, alemán, español, italiano, neerlandés, brasileño, ruso, japonés, coreano, árabe y chino.

Se ajusta de forma automática al espacio donde se coloca, es decir, si lo ponemos en un lugar estrecho las banderas se verán en dos o tres filas, si hay mucho espacio (debajo del header por ejemplo) las banderas de traducción se mostrarán en una única hilera.

Código

<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>

<div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitUg0grL1h3MHwWZE2LSBJlpD4CdcZ7_y8bXuvam0-nUtpmThI_MRSBGUex_-kwtRk8bF4GbqoJZyNMlllNnGEZz236h_efLUl7PJFRfcD3Bts0rZ_Gg6snMV_OxADZFVO7PGTEUw5ukg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH4VtczTjMDZjXuPMICjTwOSBvDsjGzoPy1VYtSqYbysKwEzppn25vl2dL-FH7jXvHK67WflD-JqNO3pUtAvyRtvPSRPm7mRRZZ3t59w2gnPUIGLrKNw-sZQVtg3UgxwHmoAXgeWciOk8/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpbF6_S8aAXOFBSNAJddHHJiPrk8OqEH9J7qEnOyVlY0rzRD3s8oD6rZ9eFs2SWAXtiG55jbriQ_PzFC-tzlbBO_r_TIeLV-F7nPp5SsiVr4DXk7MJjHXkIzTJ65E6xNe5CfQ62Bh8cE/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx4SpqSrdnF_vTH34tFGwHK6vPekusfZP716momyy_NIsx_GxUyxX1Y_NZSRHp7E-ZOjCYlr9hi7izv9CnidYiXUjJgmmn7ZuboPuYX1uZ-iyxxFIqTZ_BPhonGINFex3RTZLstmOvCRI/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUo8mb3LRhb7-AfZv3qvPevm26f8pCsQu2PMjgo9xlauoI2BFuv9BEFyKobBQxF0uZ8wDTcoUlBr8nRPCAUSbUwoS6kTt8Apfi3E3cOrkwey0VXvBpjJqB_g1rT_TOVzjQPcJLRiNvPvU/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrucQwrRB9SGMgGaR_tvXsq640g0iDYtvS7v3EpJMdQQw4jA0zwTPck5H7MstXXtkPgNTtFKghGKP47ceeHPto5NGuDNrI82CQ-dxwqbq119PX4KIEaUdR6FnP1Q2A-fOmrzSg3jIEZ4E/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGixo8G5pvG7hsWwUrqjBhqLP2DYWV3co4Yj3o-ppY1VqWn7nYbrh7I5tsfwmH1HQNl2lqKPPmd2vanXBCFqXtlWKtca_MZ5TY_KJzAElAVhPol27r37XzX5063Arg4pH9bjH5yVEwbNE/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGOgipFTgNsdIzH3lgcbL37Nq5DyzteXkk8qxeu1SH-E5qqmONPm3KmuR5WpmK0g91k_hHV1R4CuedVflcNcPM6yprBofGiXpTDwsa_zqNKVFj3LDD4TJrdC8nRum1FoNJAxNm1qZvms/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyzyenCe67hVaMG7hN1gQr3dYWksUXa8fhf4Zihd6vcGkjlIVqBcgRxMlx0s592bSv7EhyIIRn2hK6TdQNfJirPq1qFg31h_fFhuPYMF5jtjtUrXH3Dd3LSGiq_CV3_dJsCO9aM-Q9ts/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nWrP2p8FB18cvIxCpbDJoi2NeMh1Iv3Vc4p2bPmYWoutks_IYfzklzBhXb6j3gkGeFupGLmoahqnZDj2BOY_ATA6S48AnmlXmjomEEK80Ix8jdB4U1k40EWvZxtAp1P9FZui0aL46-k/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGEgTPSqM7ivxpP_LAw2YEHQQLBk8g6_9AOxb2pzGCahKwcPDhrV2AMaPaJe5Yzw_p_aS5iuT_rdEk4lBLPHlnqcfyhmLBdc-ZeRpoSBnfPzHi4NvyQQjBLrGrcnURAXWCdOpaZWd_oqc/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji4ZvpONqqC21yJ1H0dBjHaesq9JUlYndqBUSQmcF0QHoYZVRzoJZCz3IYtjtVa_YZyv1T2No7HG4uiplA-GR3dEyINmg5lfwTi2wF-n4S9ZDgmgRTq_6c3bIiF0Wx14qHg4HAP6NXDjE/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a> </div>
<div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div>

<br/>
<a href="http://www.bloggerarticle.com/"><font size="1px">this widget by www.AllBlogTools.com</font></a>

ENTRADA ORIGINAL:AllBlogTolls

Añadir iconos para redes sociales al pie del post

Como colocar los iconos para enviar nuestras entradas a distintas redes sociales al pie de nuestras entradas (post-footer).



Fantástica explicación en Gem@ Blog.

Leer más con miniatura de imagen en páginas de etiquetas

Son varias las personas que están interesadas en saber como hacer para que el efecto que habíamos visto anteriormente de "leer más con miniatura de imagen" solamente se aplique a las páginas de etiquetas.

Si vamos a usarlo por primera vez procedemos como hicimos en esa entrada anterior y aplicamos el script directamente en la plantilla para no depender de alojamientos externos.

[1] Colocamos el script antes del </head> de nuestra plantilla.

<!-- Entradas leer mas en etiquetas -->
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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>
<!-- Fin de entradas leer mas en etiquetas -->

[2] Guardamos cambios.

[3] Marcamos entonces la casilla de "Expandir las plantillas de artilugios" para localizar este código en la plantilla: <data:post.body/>

[4] Eliminamos ese código y colocamos esto en su lugar:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span><b:else/>
<data:post.body/></b:if><b:else/><data:post.body/></b:if><b:else/><data:post.body/></b:if>

[5] Guardamos cambios.

El resultado entonces será el mismo que en la entrada de la que hablo a comienzo del post, pero solo se aplicará a las páginas de etiquetas.

Notas:

Si ya estabas usando el método anterior donde el efecto se aplicaba también a la página principal y quieres usar este, tendrás que pasar directamente al paso [4] y sustituir el código que colocaste según la entrada anterior por el de esta entrada (paso [4]).

En el código está incluida la condicional que hace que si usamos la nueva función de Blogger "Páginas estáticas", en esas páginas las entradas se vean completas, sin el "leer más" añadido.

Disminuir distancia del formulario a enlaces de navegación

Esta es una de las preguntas que recibo con más frecuencia:

"Como podría reducir la distancia entre el formulario de comentarios y los enlaces de navegación."

[1] Para reducir esa distancia, tendremos que ir a Edición HTML, marcar la opción de Expandir las plantillas de artilugios y localizar el código que corresponde al formulario:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>

[2] Localizamos en su código el height='410' (destacado en color rojo) y lo cambiamos por height='290'.

Recuperar el código de Google Analytics

Hace tiempo veíamos en una entrada como utilizar el Sistema de Estadísticas de Google Analytics.

Son muchas las personas que me consultan como volver a recuperar e incluir en la plantilla su código de seguimiento.

Normalmente la pérdida de dicho código sucede porque al cambiar la plantilla de nuestro blog, nos olvidamos de guardar este código.

Si estás usando Google Analytics y piensas cambiar de plantilla, deberás de copiar y guardar el código (en el blog de notas por ejemplo) y una vez hayas instalado la nueva plantilla, colocar el código en su lugar (antes de </body>)

Si como suele suceder ya has hecho el cambio de plantilla y te has olvidado de guardar el código de Analytics, podrás recuperarlo fácilmente desde tu cuenta de Google Analytics.

[1] Accedemos a la cuenta de Google Analytics.

[2] Una vez en nuestra cuenta, pinchamos en "Editar" para acceder a la configuración de nuestro perfil:

[3] Desde nuestro perfil nuestro perfil pinchamos en "Comprobar estado":

[4] En la siguiente página vemos nuestro código de seguimiento, lo copiamos y lo pegamos en nuestra plantilla antes de la etiqueta </body> (casi al final del código de la plantilla).

[Nota] Quizá te interese: Como eliminar tu cuenta de Google Analytics.

Diseñador de plantillas Blogger

Entre todas las nuevas funciones que Blogger ha ido incorporando en los últimos tiempos siempre se ha echado de menos el que no ofreciera un mejor y más variado surtido de plantillas... durante años hemos tenido disponibles los mismos modelos para elegir desde nuestro panel.

Eso ha cambiado desde esta misma tarde según he podido saber a través del blog de Blogger in Draft, donde incluso han incluido un vídeo explicando la nueva función de Diseño de plantillas.

De momento solo tendremos disponible el uso del "Diseñador de plantillas" si accedemos a nuestro panel de Blogger desde Blogger in Draft.

Una vez dentro de nuestro panel y en la parte de Diseño del mismo, podemos comprobar que se ha añadido una nueva pestaña llamada precisamente "Diseñador de plantillas".

La interfaz del Diseñador es muy intuitivo y fácil de manejar, contando además con una "vista previa" al estilo de "Fuentes y colores" desde donde podemos ir comprobando los cambios que vamos añadiendo a la plantilla escogida.

Vista previa del Diseñador de plantillas

Además de la posibilidad de usar nuevos modelos de plantillas, podemos incluir desde el diseñador varios cambios personalizados, como el incluir una imagen de fondo o cambiar la gama de colores a usar en el diseño:

Modificar el diseño del cuerpo del blog, el pie de página y ajustar el ancho que necesitamos entre otras cosas, desde el menú Diseño:

Por último desde la pestaña "Avanzado" del menú del Diseñador, nos será fácil modificar distintos aspectos del diseño:

Nota:

Recomiendo cierta precaución al probar esta nueva función, aunque yo he estado "jugando" un buen rato y todo parece funcionar bien (incluso el deshacer los cambios), mejor lo hacemos desde un blog de pruebas para evitar sorpresas indeseadas, pues es sabido que todas las funciones incluidas en Blogger in Draft están en periodo de pruebas...

Fallo de Blogger en el número de comentarios

Muchos son las consultas que recibo estos últimos días sobre problemas en el conteo de comentarios.

En algunos casos son los comentarios en las entradas que no se corresponden con los reales, es decir, el número de comentarios que marca la entrada no es el que en realidad tiene esa entrada y normalmente marca menos de los que en realidad hay.

Sucede lo mismo cuando usamos el gadget que muestra el total de entradas y comentarios del blog, el número de comentarios es menor que el real.

En el Foro de Ayuda de Blogger llevan días los usuarios reportando este tipo de errores en el feed de comentarios de Blogger.

Y desde la página Known Issues for Blogger (Problemas conocidos por Blogger) el equipo de Blogger informa que ya están al tanto del problema y que tratan de solucionarlo:

Algunos usuarios están experimentando las discrepancias contar comentario en su blog, específicamente para mayores comentarios durante el periodo diciembre-enero. Hemos aislado el problema de fondo sin embargo, y están trabajando para liberar una solución en breve.

Además, si usted ha cambiado recientemente de alojamiento de BlogSpot a un dominio personalizado, puede tomar hasta un par de horas antes de la cuenta se sincronizan completamente (y se espera).
[Traducción de Google]

Una vez más... ¡Paciencia!

Imagen en tu suscripción por correo (FeedBurner)

Si estás usando el servicio de FeedBurner para facilitar a tus lectores la suscripción a tu feed mediante el correo electrónico, puedes incluir en tus actualizaciones una imagen o logo que identifique a tu blog.

Cuando los lectores suscritos a tu blog vía email reciban tus actualizaciones (nueva entrada publicada), estas mostrarán la imagen que hayas escogido para mostrar en los correos de tu feed:

[1] En primer lugar debemos activar la opción de suscripción por correo electrónico en FeedBurner.

[2] Iremos entonces dentro de nuestro panel de FeedBurner a la pestaña Publicize:

[3] Pinchamos en el menú de la izquierda en Suscripciones por Email [1] y seguidamente escogemos la opción Email Branding [2].
A la derecha veremos entonces el espacio para introducir la url de nuestra imagen [3], una vez introducida la url, guardamos los cambios.

Nota:

La url de la imagen debe estar alojada en un servidor al que FeedBurner pueda acceder. Una buena opción sería alojar la imagen en Blogger.

Sólo admiten archivos JPEG, GIF y PNG.

El tamaño recomendado es de menos de 200x200 píxeles.

Leer más con miniatura de imágen y Páginas Estáticas

Muchas personas que están usando el Leer más con miniatura de imagen me han escrito con un problema que se ha presentado al usar este efecto junto con la nueva función de Blogger "Páginas Estáticas":

Si usamos este "Leer más" y añadimos las Páginas Estáticas, en estas se muestra el mismo efecto que en las demás, pero una vez que damos en el "leer más" la entrada no se expande, con lo que no tenemos acceso a verla completa.

Para solucionar esto he usado la condicional que Blogger emplea en las Páginas Estáticas, de tal manera que las entradas "normales" del blog se seguirán viendo con el efecto de "leer más con miniatura de imagen" tal como las teníamos antes y en las "Páginas Estáticas" la entrada se mostrará completa.
De esta manera seguiremos manteniendo el "leer más con miniatura de imagen" y al mismo tiempo, distinguiremos las entradas en Páginas Estáticas de las demás.


Nos situamos entonces en la entrada en la que explicaba como añadir el efecto de "Leer más con miniatura de imagen" y en el paso [2] cambiamos ese código que teníamos que añadir, por este otro:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='summary' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt; Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

El resultado es el que puede verse en el blog de pruebas donde había incluido el "Leer más con miniatura de imagen".


Nota:

En una próxima entrada veremos como añadir el efecto de "Leer más con miniatura de imagen" solo en las páginas de etiquetas y además con este mismo problema corregido si usamos las "Páginas Estáticas" al mismo tiempo.

Cambiar el diseño de las Páginas Estáticas

Desde que Blogger implementó el nuevo recurso para mostrar Páginas Estáticas, han sido bastantes personas las que se han interesado por la forma de hacer que esas páginas no se muestren con el mismo diseño que tiene el resto de páginas del blog.

Vamos a ver como modificar su diseño de forma que en las Páginas Estáticas las entradas se muestren con distinto aspecto a las del resto del blog y que en esas páginas además la sidebar se oculte y las entradas ocupen el espacio que esta deja.

Antes de empezar, aclararé que para este ejemplo voy a usar como referencia una plantilla Mínima de Blogger sin cambios en su diseño original, así que los códigos y medidas se corresponderán con esta plantilla.

Para lograr estos cambios de diseño, usaremos la condicional que Blogger dispone para las Páginas Estáticas:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Ocultar la sidebar y ampliar las entradas al espacio disponible (ancho del blog)

[1] Antes de nada necesitaremos saber que medida tiene el outer-wrapper de nuestra plantilla.
Vamos a Diseño - Edición de HTML y comprobamos que (en este caso la plantilla Mínima original) tiene un ancho de 660 pixeles en su outer-wrapper, que vemos en la parte correspondiente en su código CSS:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

[2] Después de tomar nota de la medida anterior, localizamos la etiqueta </head> de nuestra plantilla y justo antes de esa etiqueta colocamos el código necesario haciendo uso de la condicional que antes os mencionaba:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 660px;
}
</style>
</b:if>

Con esto habremos conseguido que en las Páginas Estáticas la sidebar no se muestre y las entradas ocupen todo el espacio disponible.
Podéis ver un ejemplo del resultado en este blog de pruebas.


Ocultar la sidebar y ensanchar entradas en plantillas de tres columnas.

Si el blog tuviese dos sidebars los pasos a seguir serían los mismos, aunque la medida del outer-wrapper cambiaría en cada caso (y en muchos casos el nombre de los códigos) y en el código tendríamos que incluir otra instrucción para la segunda sidebar:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 850px;
}
#newsidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
</style>
</b:if>

Cambiar el diseño a las entradas de Páginas Estáticas

Como habréis visto en el blog de pruebas, también podemos lograr que las entradas en las Páginas Estáticas tengan un diseño diferente al resto del blog, para lograr esto usamos el mismo sistema y la misma condicional de Blogger.

Colocamos de nuevo antes de </head> la condicional envolviendo al CSS que necesitamos:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.post {
color: #000000; /* Color del texto de las entradas */
background: #ffffff; /* Color de fondo de las entradas */
border: 2px solid #FF9900; /* Borde que bordea las entradas */
font-size: 15px; /* Tamaño de la fuente (texto) de las entradas */
margin:.5em 0 1.5em;
padding: 10px; /* Distancia del texto al borde de la entrada */
}
.post h3 a, .post h3 a:visited {
display:block;
color: #FF9900; /* Color del título de las entradas */
font-size: 25px; /* Tamaño de la fuente (texto) de las entradas */
border-bottom: 1px solid #FF9900; /* Línea debajo del título de las entradas */
}
.post h3 a:hover {
color:#0000CC ; /* Color del título de entradas al paso del cursor */
}
</style>
</b:if>

En el código he puesto los cambios que he aplicado en el blog de pruebas, en cada caso habrá que modificar el código al diseño que necesitemos.


Usar las dos opciones anteriores al mismo tiempo

Si queremos usar las dos modificaciones que explico en la entrada al mismo tiempo (tal como se muestra en mi blog de pruebas), no tendremos más que incluir dentro de la misma condicional ambos códigos CSS:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 660px;
}
.post {
color: #000000; /* Color del texto de las entradas */
background: #ffffff; /* Color de fondo de las entradas */
border: 2px solid #FF9900; /* Borde que bordea las entradas */
font-size: 15px; /* Tamaño de la fuente (texto) de las entradas */
margin:.5em 0 1.5em;
padding: 10px; /* Distancia del texto al borde de la entrada */
}
.post h3 a, .post h3 a:visited {
display:block;
color: #FF9900; /* Color del título de las entradas */
font-size: 25px; /* Tamaño de la fuente (texto) de las entradas */
border-bottom: 1px solid #FF9900; /* Línea debajo del título de las entradas */
}
.post h3 a:hover {
color:#0000CC ; /* Color del título de entradas al paso del cursor */
}
</style>
</b:if>