Dividir el crosscol del blog

2 títulos "Lo mismo de dos formas diferentes"

• 1.- Dividir el crosscol del blog
• 2.- Añadir Gadgets entre el header y las entradas (crosscol) (al final)

Título 1
Dividir el crosscol del blog

El crosscol es esa área debajo de la cabecera en la que la mayoría de las veces añadimos un menú horizontal, aunque muchas otras veces queremos que nos rinda más ese espacio para añadir más gadgets y la mejor forma de hacerlo es dividir el crosscol del blog para que pueden entrar más gadgets en una fila, es decir, que si originalmente se ve así:

Con las respectivas divisiones pueda verse así:

Empecemos, lo primero es entrar en Diseño | Elementos de la página y cerciorarse que no haya ningún gadget en esa área, si tienes alguno lo mejor es moverlo a la sidebar u otro lugar momentáneamente, ya después podrás ponerlo de nuevo ahí, sólo tienes que arrastrarlo y soltarlo en el lugar donde lo quieras mover.

Ya que está libre esa área entonces vamos a Diseño | Edición de HTML y SIN expandir los artilugios busca este código:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>

O si usas una plantilla del Diseñador de Plantillas de Blogger entonces busca este código:

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes' />
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>

Cualquiera de esos códigos que tengas elimínalo y en su lugar pon este:

<div class='region-inner tabs-inner' id='crosscol-wrapper' style='text-align:center'>

<div id='crosscol0' style='text-align: center; padding: 5px;'>
<b:section class='tabs' id='crosscol-superior' preferred='yes'/>
</div>

<div id='crosscol1' style='width: 33%; float: left; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross1' preferred='yes' style='float:left;'/>
</div>

<div id='crosscol2' style='width: 33%; float: left; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross2' preferred='yes' style='float:left;'/>
</div>

<div id='crosscol3' style='width: 33%; float: right; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

Guarda los cambios y listo, puedes ingresar a Elementos de la Página y ya podrás ver tu crosscol dividido en tres partes.
Si quisieras que sólo estuviera dividido en dos y no en tres partes entonces elimina el código en color gris, y cambia los 33% que están a los lados por 49%
Fácil y rápido ¿no?

9 de mayo de 2011 Publicado por El Potro

Título 2

Añadir Gadgets entre el header y las entradas (crosscol)

Existe una seccion de Blogger, que no es utilizada por el mismo blogger, y por ende por CASI nadie. La sección se llama crosscol, lo mejor es que esta, esta ubicada por debajo del header y de las entradas.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[1]Lo que hay que hacer para poder utilizarla es entrar en Diseño>Edicion HTML>Expandir las plantillas de artilugios. y despues buscamos este codigo:

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

[2]Cambias la palabra en rojo(no) por yes, despues guardas los cambios y listo.

[3]Pero también puedes dividirla en tres columnas, pero para esto necesitas sustituir el código anterior:

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

por este otro:

<div id='crosscol-wrapper'>
  <div style='clear:both;'/>
  <div id='crosscol-contenedor'>
    <div id='crosscol-left'>
      <b:section class='crosscol' id='crosscol1' preferred='yes' style='float:left;'/>
    </div>
    <div id='crosscol-center'>
      <b:section class='crosscol' id='crosscol2' preferred='yes' style='float:left;'/>
    </div>
    <div id='crosscol-right'>
      <b:section class='crosscol' id='crosscol3' preferred='yes' style='float:right;'/>
    </div>
  <div style='clear:both;'/>
  </div>
</div>

[4]Despues tienes que añadir antes de ]]></b:skin> el siguiente código CSS:

#crosscol-wrapper {
text-align:center
}
#crosscol-left {
width: 30%;
float: left;
margin:0;
text-align: center;
}
#crosscol-center {
width: 40%;
float: left;
margin:0;
text-align: center;
}
#crosscol-right {
width: 30%;
float: right;
margin:0;
text-align: center;
}
#crosscol-contenedor {
clear:both;
}
.crosscol {
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
.crosscol-columna {
padding: 10px;
}

[5]Y guardas los cambios:

http://santyweb.blogspot.com/2009/02/anadir-gadgets-entre-el-header-y-las.html

Read more...

Como ocultar (o mostrar) widgets en la página principal, entradas de Blogger

1.- Para mostrar el widget sólo en la página principal de Blogger y no cuando se habrá alguna entrada

2.- Para mostrar el widget de Blogger sólo en las entradas y no en la página principal

3.- Para mostrar el widget en una página específica

4.- Para ocultar un widget sólo en una página en particular

5.- Para mostrar los widgets sólo en páginas estáticas

6.- Para ocultar los widgets en páginas estáticas

7.- Para mostrar los widgets sólo en las páginas de archivo

Quieren aprender como ocultar widgets de la página principal de Blogger o de una entrada en particular, el día de hoy aprenderás con este grandioso tutorial de cómo realizar este truco para Blogger. Como algunos de ustedes habrán notado, todos los widgets / gadgets que agregue a su blog, se mostrará en todas las páginas por defecto, incluyendo la página principal, ocultando ciertos elementos dentro de las páginas del blog no es sólo una cuestión de diseño, sino que también es un requisito.

Para ocultar (o mostrar) widgets en determinados puestos, páginas estáticas, página web o páginas de archivo, puede utilizar etiquetas condicionales.

A continuación voy a explicar claramente cómo realizar cada uno de los trucos de ocultamiento para Blogger

Primer Paso

1 Ir a Blogger

2 Un clic en “Diseño” y observa los nombre de los gadgets HTML/Javascript que ya ha añadido. Al hacer esto, será más fácil para que usted pueda identificar los controles que usted tiene en la plantilla de Blogger. Dale un título único para que no coincida con ninguno de los títulos de los otros widgets que ya hayas añadido.

Segundo Paso

1 Un clic en Tema


2 Un clic en “Editar HTML” 


Ahora se le abrirá el Editor HTML de su plantilla 


En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador. 


Encuentre el título del widget que desee ocultar

Por ejemplo:

Digamos que el título de uno de mis widgets es "Noticias". Después de buscar el nombre del widget, encontraré un código similar en mi plantilla:

<b:widget id='HTML36' locked='false' title='Noticias' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Este código representa el widget / gadget que he añadido en la ubicación de los elementos de la página de mi sidebar.

Tercer Paso

Después de haber encontrado el código de su widget, agregue las siguientes etiquetas marcadas con color amarillo. Por ejemplo, en caso de que desee algunas condicionales les mostrare 7 ejemplos de ocultamiento:

1.- Para mostrar el widget sólo en la página principal de Blogger y no cuando se habrá alguna entrada. Tendrá que ubicar dos códigos tal como lo muestro en mi ejemplo, los dos códigos están marcados de color amarillo. Mire su ubicación correctamente.

<b:widget id='HTML36' locked='false' title='Noticias' type='HTML'>
<b:includable id='main'>

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

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

2.- Para mostrar el widget de Blogger sólo en las entradas y no en la página principal. Tendrá que ubicar dos códigos tal como lo muestro en mi ejemplo, los dos códigos están marcados de color amarillo. Mire su ubicación correctamente.

<b:widget id='HTML36' locked='false' title='Noticias' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

3.- Para mostrar el widget en una página específica. Tendrá que ubicar dos códigos tal como lo muestro en mi ejemplo, los dos códigos están marcados de color amarillo. Mire su ubicación correctamente.

<b:widget id='HTML36' locked='false' title='Noticias' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == "URL de la pagina"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

Recuerde cambie las palabras que dicen URL de la pagina por la dirección URL de la página en la cual quiera que aparezca solo ese widget.

4.- Para ocultar un widget sólo en una página en particular. Tendrá que ubicar dos códigos tal como lo muestro en mi ejemplo, los dos códigos están marcados de color amarillo. Mire su ubicación correctamente.

<b:widget id='HTML36' locked='false' title='Noticias' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url != "URL de la pagina"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

Recuerde cambie las palabras que dicen URL de la pagina por la dirección URL de la página en la cual no quiera que aparezca solo ese widget.

5.- Para mostrar los widgets sólo en páginas estáticas. Tendrá que ubicar dos códigos tal como lo muestro en mi ejemplo, los dos códigos están marcados de color amarillo. Mire su ubicación correctamente.

<b:widget id='HTML36' locked='false' title='Noticias' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "static_page"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

6.- Para ocultar los widgets en páginas estáticas. Tendrá que ubicar dos códigos tal como lo muestro en mi ejemplo, los dos códigos están marcados de color amarillo. Mire su ubicación correctamente.

<b:widget id='HTML36' locked='false' title='Noticias' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType != "static_page"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

7.- Para mostrar los widgets sólo en las páginas de archivo. Tendrá que ubicar dos códigos tal como lo muestro en mi ejemplo, los dos códigos están marcados de color amarillo. Mire su ubicación correctamente.

<b:widget id='HTML36' locked='false' title='Noticias' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "archive"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

Cuarto Paso

Después de que haya ocultado los widgets de las entradas o de una página principal, es momento de dar un clic en “Guardar Tema” y mire los nuevos cambios en su blog de Blogger

!Fácil verdad!

Espero que les haya sido de mucha ayuda este tutorial para Blogger y haber sido lo más explicativo posible, recuerde suscribirse y recibirás mis nuevas actualizaciones directamente en tu correo electrónico.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

https://www.ayudadeblogger.com/2013/09/como-ocultar-widgets-en-pagina-principal-entradas-de-blogger.html

Read more...

Ocultar la Sidebar en las Páginas estáticas

Ya hemos visto cómo personalizar el gadget de las Páginas y cómo mostrar las Páginas de forma diferente, pero me preguntan si se puede ocultar la sidebar cuando se está en las Páginas.

Sí se puede, y se realiza usando la misma condicional que usamos para mostrar las Páginas de forma distinta.

Puedes ver un ejemplo en este blog de pruebas, verás que al hacer click sobre una Página la sidebar desaparece y el contenido de la Página ocupa todo el ancho del blog.

ACLARACIÓN: Los elementos mencionados a continuación son los que usan la mayoría de las plantillas clásicas de Blogger, en otras plantillas posiblemente encontrarás los elementos con el mismo nombre, de lo contrario deberás localizar en tu plantilla cuál es el nombre que corresponde. Si usas una plantilla hecha a través del Diseñador de Plantillas de Blogger entonces sigue este tutorial.

Lo único que necesitamos es saber cuánto mide el outer-wrapper de tu blog; en la plantilla Mínima dice esto:

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

En este caso el outer-wrapper mide 660px.
Entonces lo que haremos será entrar en Diseño > Edición de HTML y pegar antes de </head> lo siguiente:

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

Como ven sólo hemos usado una condicional la cual indica que cuando se trate de una Página entonces el contenedor de la sidebar medirá 0px de ancho, o sea nada, y además el contenedor del área de las entradas medirá el total del ancho del blog, en este caso 660px.

Como mencioné antes, los nombres de los contenedores pueden variar según la plantilla, sólo deberán localizar cuál es el nombre del contendor de la sidebar (sidebar-wrapper), el área de las entradas (main-wrapper) y el ancho total del blog (outer-wrapper).

Por supuesto este hack también se puede combinar con el de

mostrar las Páginas de forma diferente, sólo habría que agregar los estilos correspondientes dentro de este código, con lo cual quedaría así de forma completa:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
display:none;
visibility:hidden;
}
#main-wrapper {
width: 660px;
}
.post {
color: #8A4B08; /* Color del texto */
border: 1px solid #FF8000; /* Color del borde */
margin:.5em 0 1.5em;
padding: 5px;
background: #F2F5A9; /* Color de fondo o imagen de fondo */
}
.post h3 a {
color: #cc6600; /* Color del titulo */
font-family: Impact; /* Tipo de letra del titulo */
font-size: 20px; /* Tamaño de letra del titulo */
text-transform: uppercase;
text-align: center; /* Alineación del título */
letter-spacing: 5px;
}
.post h3 a:hover {
color: #FF8000; /* Color del título al pasar el cursor */
}
.post img {
padding:4px;
border:2px solid #FF8000; /* Color del borde las imágenes */
}
</style>
</b:if>

Como ven, la primera parte contiene la indicación sobre ocultar la sidebar dentro de las Páginas y la segunda parte contiene los estilos para las Páginas.

De esta forma sencilla hemos podido ocultar la sidebar en las Páginas estáticas con la posibilidad de mostrar las Páginas de forma diferente.

14 de febrero de 2010 Publicado por El Potro , http://www.ciudadblogger.com/2010/02/ocultar-sidebar-en-las-paginas.html

Read more...

Títulos de la sidebar personalizados III: fondos con imágenes distintas

Hace un tiempo habíamos visto cómo personalizar los títulos de la sidebar con colores y bordes y luego con imágenes e íconos. Ahora vamos a ver otra forma de personalizar los títulos de nuestra sidebar . Y esta tercera forma viene a raíz de algunas preuntas, como la que hizo G:

Aprendí mucho con este tutorial, pero, cómo hago para poner imágenes diferentes para cada título de la sidebar? ¿es posible?

La respuesta es afirmativa y ahora vamos a ver cómo hacerlo.

♠ Lo primero que haremos será ingresar a nuestro blog y de ahí a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Luego, buscamos el id del widget al que queremos poner un fondo a su título. Será sencillo de localizarlo si es que tiene un nombre. Por ejemplo, si mi gadget se llama "Datos personales" busco este nombre. Cuando lo encuentre se verá así:

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'>

Entonces, el id de este gadget es lo que está en negrita (Profile1) no incluyendo las comillas.

♠ Una vez que tengamos los id del gadget o gadgets cuyos títulos querramos cambiar de fondo, buscamos lo siguiente.Si nuestra plantilla es la mínima buscamos:

/* Sidebar Content
-------------------------------*/

Si usamos la plantilla rounders, buscamos:

/* Sidebar Boxes
-------------------------------*/

♠ Debajo de éste pegamos lo siguiente:

#Profile1 h2 {
background: url(AQUÍ-URL-IMAGEN-FONDO) left top;
}

Si queremos agregar otra imagen de fondo al título de otro gadget bastará con buscar su id y colocar un código igual al anterior solo que borraremos Profile1 y pondremos el id del otro gadget.

Si queremos colocar un ícono en lugar de un fondo, cambiaremos el código anterior del background por este otro: background: #FFFF99 url(aquí-imagen) no-repeat right; y seguiremos los otros pasos.

El resultado será el siguiente:

Read more...