¿Te gusta esto?... Entonces que no se te olvide compartirlo ;)

¿Cómo tener un Gadget o Widget Fixed en un blog de Blogger?

Seguramente has visto en este blog y otros sitios web un Widget Fixed en el sidebar derecho, izquierdo o en ambos a la vez si la web tiene dos, estos son muy útiles ya que allí se puede colocar publicidad o productos patrocinados y las personas que visitan tu blog pueden visualizar estas cosas si lo hacen a través de un ordenador. Este tipo de Widget es excelente pero si usas AdSense para monetizar tienes que evitar colocar el código de alguno de tus anuncios en un gadget como este ya que a Google no le gusta eso.

En un Widget o Gadget Fixed como ya dije puedes colocar publicidad pero si es de AdSense no lo hagas, ahora bien si la publicidad es de otra empresa no hay problemas dependiendo de sus términos y condiciones y si trabajas con marketing de afiliados créeme que es muy útil ya que te ayuda a maximizar las conversiones, por lo menos a mí me sirve bastante para que los visitantes de este blog y de los otros que tengo siempre vean lo que promociono.

¿Cómo tener un Gadget/Widget Fixed en Blogger?


Bueno esto es muy sencillo de conseguir solo debes seguir los pasos que diré a continuación:

1.- Debes ir a “Tema”, creas una copia de seguridad de tu plantilla y después das clic en “Editar HTML”. Es importante la copia de seguridad por si algo sale mal, ya que así podrás regresar al estado anterior de tu plantilla de Blogger.

2.- Después debes buscar la etiqueta de cierre de estilos]]></b:skin>, si editas los estilos por tu cuenta como hago yo en mi blog la etiqueta de cierre seria </style> y pegas el siguiente estilo:

.sticky {position:fixed!important;top:0;z-index:99;-webkit-transform:translateZ(0);}

3.- Luego busca la etiqueta de cierre </body> y antes de ella tienes que pegar el siguiente script interno para que el Widget Fixed funcione:

<!-- Sidebar Fixed Right -->
<script type='text/javascript'>
//<![CDATA[
// Sticky Menubar
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<118?(n.className=a+" sticky",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("Aquí debe ir el ID del Widget");
//]]>
</script>
<!-- End Sidebar Fixed Right -->

4.- Después das clic en “Guardar tema”.

5.- Luego debes ir a “Diseño” y allí debes “Añadir un gadget”, un gadget no es más que un widget y este debes colocarlo en el sidebar derecho de tu blog desde allí mismo, el gadget que añadas preferiblemente debe ser de HTML, pero también puedes colocar el de entrada destacada o cualquier otro y añadirle contenido junto con su título por el momento.

6.- Después tienes que ir a tu blog haces clic derecho sobre el gadget que creaste, le das inspeccionar elemento en tu navegador y de esa forma es que encontraras el ID del gadget que debe estar de la siguiente forma: HTML1, HTML2, HTML3, etc, el número puede variar y dicho ID completo incluyendo las letras HTML y el numero respectivo es el que debes pegar en la función que está arriba, recuerda eliminar la referencia que te deje para poder pegar el ID y le das clic a “Guardar Tema” nuevamente (si quieres puedes eliminar el título del gadget despues de encontrar su ID).

7.- Ahora ya tienes tu gadget Fixed en Blogger pero este tiene un pequeño problema y es que no debe aparecer en la página de inicio del blog y tampoco en las etiquetas, solo debe aparecer en las entradas ya que en algunas plantillas se tienen problemas al hacer scroll en los lugares mencionados anteriormente, para eso tienes que hacer lo siguiente:

8.- Estando en el editor HTML debes buscar </head> y arriba de esa etiqueta debes pegar el siguiente código:

<b:if cond='data:blog.pageType != &quot;item&quot;'><style type='text/css'>#Aquí el ID de tu gadget/widget {display: none;}</style></b:if>

9.- Das clic en “Guardar tema” y de esta forma el gadget fixed solo aparecerá en las entradas de tu blog.

Si tu tema es totalmente responsive como el mío es necesario ocultar el gadget cuando el tamaño de pantalla no sea el de una PC de escritorio o que simplemente las personas hagan más pequeña la ventana del navegador, esto lo tienes que hacer debido a que tu sidebar bajará y entonces el gadget se súper posicionara por encima del contenido y esto es algo pésimo ya que los lectores no podrán leer tus entradas, para evitar este problema has lo siguiente:

10.- Estando en el editor HTML de tu blog tienes que buscar ]]></b:skin> y antes de ese cierre debes pegar el siguiente código CSS:

@media screen and (max-width:900px){#Aquí el id de tu gadget {display:none;}}

11.- Por último das clic en  “Guardar tema”.

En el caso de mi blog el sidebar baja al footer cuando se detecta un tamaño igual o inferior a 900 píxeles y para que no se súper posicione el widget fixed por encima de los contenidos lo oculto con display:none, los pixeles pueden variar segun cuando tengas definido en tu blog cuando este debe empezar a hacerse responsive, en mi caso es 900px pero en tu blog puede ser de 1100px, 1000px, 850px, 800px, 700px un poco menos.

¿Cómo añado dos Widget Fixed a mi blog?


Si tienes dos sidebar uno derecho y otro izquierdo también puedes añadir otro widget fixed pero tendrías que repetir todo el procedimiento descrito anteriormente tanto con el CCS, el javascript y el respectivo ID del gadget que crearas para el otro sidebar.

Como ya se utilizó el ID sticky antes del ]]></b:skin> se debe añadir otra propiedad que puede ser:

.stickyy{position:fixed!important;top:0;z-index:99;-webkit-transform:translateZ(0);} (aquí se coloca otra “y” ya que sería una función diferente y quedaría como stickyy).

El script para el sidebar izquierdo seria:

<!-- Sidebar Fixed Left-->
<script type='text/javascript'>
//<![CDATA[
// Sticky Menubar
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<118?(n.className=a+" stickyy",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("Aquí debe ir el ID del Widget");
//]]>
</script>
<!-- End Sidebar Fixed Left -->

Igualmente aquí se cambia el id sticky por stickyy, de resto debes proceder con los mismo pasos descritos anteriormente desde el punto número cinco hasta el once y podrás lograr un excelente efecto de dos widget/gadget fixed en tu blog, uno a la derecha y otro a la izquierda para promocionar dos cosas a la vez, que puede ser publicidad, contenidos de tu blog, contenidos patrocinados y marketing de afiliados.

Parte del contenido de esta entrada lo encontre en el blog “FCT -- Blogging - Blogger Widgets - SEO” en una publicación similar a esta pero que esta toda en inglés, aparte dicha entrada esta incompleta al no incluir los errores que pueden generar los widgets fixed en los blogs de Blogger y como arreglarlos y tampoco se explica cómo agregar dos en un mismo blog para un sidebar derecho y uno izquierdo, pero aquí encontrarás todo más completo y con cosas que no te explican allí, sin embargo quiero dar las gracias al autor de ese blog y además quiero enlazar su publicación ya que de allí saque las ideas y los códigos necesarios para que esto pueda funcionar. Si quieres ver el post original hazlo desde aquí.
Usamos cookies propias y de terceros que recogen datos sobre sus hábitos de navegación. Si continúa navegando se considerará que acepta su uso. OK Más información aquí