Expandir y contraer gadgets con jQuery

Hace ya algún tiempo vimos cómo expandir y contraer gadgets usando Scriptaculous y Prototype, es un método que funciona bien, pero hay quienes usan jQuery y no quieren cargar más librerías en su blog, así que en esta entrada veremos cómo conseguir el mismo resultado pero usando jQuery.

Expandir y contraer gadgets puede servir a quienes tienen muchos gadgets y quieren que la sidebar se vea más despejada mostrando sólo los títulos de los gadgets, y mostrando el contenido sólo cuando el usuario quiera verlo. Puedes ver un ejemplo en este blog de pruebas, al dar click sobre el título del gadget éste se expandirá.

Para poner estos gadgets expandibles sólo necesitas jQuery, si aún no lo tienes entra en Plantilla | Edición de HTML, y después de <head> agrega esta línea:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

Y ahora, para aplicar el efecto expandible -y deslizante- a algún gadget, localiza en la Edición de HTML el gadget al que se lo quieres aplicar. Por ejemplo, un gadget del tipo HTML/Javascript sería así:

<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'>
<span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
▼▲
<data:title/>
</span>
</h2>
</b:if>
<div class='widget-content'>
<div class='expandir1' style='display: none;'>

<data:content/>

</div>
<script>$(document).ready(function(){$('#expandirGadget1').click(function(){$('.expandir1').slideToggle("slow")})});</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Agrega lo que está en color rojo, y listo.

Para guiarte dónde poner los códigos:

El primer código en rojo va alrededor de la etiqueta <data:title/>
La otra parte en rojo va después de <div class='widget-content'>
Y la última va antes de

</div>

<b:include name='quickedit'/>

Nota que en color azul verás un ID y una clase, ambos aparecen dos veces. Si pusieras otro gadget expandible deberás cambiar tanto los IDs como las clases, por ejemplo expandirGadget2 y expandir2

En el primer fragmento que añadimos verás que aparecen estos caracteres: ▼▲
Esas son las flechas de arriba y abajo ▼▲ puedes cambiarlo por otro caracter, otro texto, o incluso por una imagen:

<img src='URL de la imagen' border='0' width='14px'/>

El código de ejemplo es para los gadgets HTML/Javascript, pero se puede aplicar a cualquier otro, sólo basta con identificar la etiqueta <data:title/> del gadget (que es donde va el primer código), y el contenido del gadget (que es donde va el segundo código).

Quizá deba aclarar que esto no hace que el blog cargue más rápido ya que el contenido se sigue cargando aun cuando esté oculto para el usuario. Es únicamente para mostrar menos espacio en la sidebar ya que algunas veces tenemos gadgets que ocupan demasiado espacio y esta es una buena manera de mostrar el blog más prolijo.

http://www.ciudadblogger.com/2014/05/expandir-y-contraer-gadgets-con-jquery.html

Poner un buscador en Blogger

Algunos se preguntarán -¿para qué poner un buscador en mi blog? Bueno, piensa que si tienes muchos post publicados y aunque tengas todo bien etiquetado talvez se les dificulte a tus lectores encontrar alguna información que hayas publicado en el pasado.

Así que acá van tres formas de poner un buscador en el blog. El primero es muy simple, está basado en Javascript y el aspecto es muy sencillo.

Para agregarlo entra en Diseño | Añadir un gadget | HTML/Javascript. Y pega este código:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>

El resultado será este:

Para el segundo buscador entra en Diseño | Elementos de la página | Añadir un gadget y elige Cuadro de búsqueda. Ahí selecciona las opciones, por si quieres que las búsquedas sean sólo en el blog o en la web. Cabe señalar que los resultados los mostrará en el área de los post, al igual como las opciones de búsqueda en el blog o en la web.

Y por último este buscador de Google, que a diferencia del anterior en este aparecen las casillas en el buscador sobre dónde queremos hacer la búsqueda. El código es el siguiente:

<form action="http://www.google.com/search" method="GET">
<input value="UTF-8" name="ie" type="hidden"/>
<input value="UTF-8" name="oe" type="hidden"/>
<table bgcolor="#FFFFFF">
<a href="http://www.google.com/">
<img border="0" alt="Google" src="https://www.google.com/logos/Logo_25wht.gif"/>
</a>
<input maxlength="255" value=""
name="q" size="15" type="text"/> <input value="Buscar" name="btnG" type="submit"/>
<font size="-1">
<input value="URL DEL BLOG"
name="domains" type="hidden"/><br/><input value=""
name="sitesearch" type="radio"/> la Web<input checked value="URL DEL BLOG" name="sitesearch" type="radio"/> NOMBRE DEL BLOG<br/>
</font>
</table></form>

Sólo debes cambiar los datos que están en color rojo por los tuyos y el resultado será este:

http://www.ciudadblogger.com/2009/02/poner-un-buscador-en-blogger.html
21 de febrero de 2009 Publicado por El Potro

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 == "static_page"'>
<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 == "static_page"'>
<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 , Etiquetas: Trucos : http://www.ciudadblogger.com/2010/02/ocultar-sidebar-en-las-paginas.html

Páginas

Herramientas para un Blogger

Links

Selección Blogger

BlogandWeb

▼▲ Trucos

Enlaces

Software libre

Útiles Google

Otros

TRUEQUES VIRTUALES

Tipografías

Afiliaciones

Fuentes y Créditos

BLOGROLL

Autores

Herramientas para conocer keywords

Expandir y contraer gadgets con jQuery

Para guiarte dónde poner los códigos:

Poner un buscador en Blogger

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.

Escribe palabra o frase a buscar

Archivo del blog

Herramientas para un Blogger

Etiquetas J - Z

Etiquetas A - I

Entradas populares

Web amigas

Herramientas para medir el tiempo de carga y conocer que problemas debes solucionar