Como ocultar widgets en la página principal, entradas de Blogger


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

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios