¿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√≠