Blog de Daiyiro

#BlogDeDaiyiro es sobre todo Bricolajes de Electrónica/Informática. ¡^-^¡

LO NUEVO:

26.8.14

Eliminar, Ocultar, Añadir y/o Personalizar Navbar De Blogger

Hola, esta vez voy a hablaros de la navbar, esto os sera útil, a aquellos que tengáis un blog en blogger, para los que no sepáis exactamente que es la navbar aquí tenéis una imagen:




Bien, esta barra de negación se puede configurar, personalizar, ocultar o eliminar y es eso lo que os voy a explicar como hacerlo.

Decir que si utilizas para tu blog una plantilla que no sea de las que incluye blogger, es posible que no te aparezca esta barra, en ese caso os explicare también como conseguir que la tengáis, por lo general los usuarios lo que buscan es quitarla, no añadirla, pero para los que os apetezca eliminarla, tengo que decir que google penaliza un poco en visitas a los usuarios que eliminan esta barra de sus blogs, además que si la tienes, es posible que ganes visitas mediante el link siguiente blog.

Por otro lado esta barra facilita al creador del blog a entrar en las opciones de blogger mediante el link diseño o el poder crear nueva entrada.

Bien no me enrollo mas, para poder realizar las siguientes tareas le daremos a Diseño/Plantilla/Edición HTML y alli editaremos la plantilla.


Para poder ocultar la navbar hay que agregar el siguiente texto después de body:


#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Para eliminar definitivamente la navbar (no recomiendo esta practica), eliminaremos el siguiente texto después de body:


  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Barra de navegación' type='Navbar'>
      <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;gapi.iframes:gapi.iframes.style.bubble&quot;, function() {
          if (gapi.iframes &amp;&amp; gapi.iframes.getContext) {
            gapi.iframes.getContext().openChild({
                url: &#39;https://www.blogger.com


y mas texto....

                where: document.getElementById(&quot;navbar-iframe-container&quot;),
                id: &quot;navbar-iframe&quot;
            });
          }
        });
      &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
    </b:widget>
  </b:section>


Para hacer flotante la navbar (hace que se vea siempre la barra incluso cuando bajes el scroll), tendrás que copiar este texto después de body:

#navbar-iframe {
left:0;
top:0;
position:fixed;
}




Para hacer flotante la navbar pero que aparezca en la parte de abajo de la pantalla, se añadirá el siguiente texto después de body:

#navbar-iframe {
left:0;
bottom:0; 
position:fixed;
}


Como veis es el mismo que el anterior, solo que se cambia "top por bottom".


Para que aparezca la navbar con desvanecimiento al pasar el cursor, sera añadiendo después de body el siguiente texto:

#navbar-iframe {
opacity:.0;
filter:alpha(Opacity=0,FinishedOpacity=0);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}



Para que aparezca la navbar de arriba a abajo en el periodo de 1segundo, sera con el siguiente código:

#navbar-iframe {
position:absolute;
top:-30px;
height:60px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
top:0;
height:30px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}



Para hacer que cambie de color la navbar al situar encima el cursor, sera con el siguiente código:

#navbar-iframe {
background:#CFCFCF; /* color fijo de la navbar */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
background:#F0F0F0; /* color de la navbar cuando pasamos el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}



A parte de todo esto, puede que nos ocurra que no tenemos la navbar y queramos tenerla, esto suele pasar, si usamos una plantilla que la hemos sacado fuera del servicio de blogger, en tal caso es posible que quitando el siguiente código después de body, nos aparezca:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Si no fuese ese el caso, nos tocara hacer un truco, cambiar la plantilla por una de blogger, entrar en edición de HTML de la plantilla y buscar el siguiente código después de body:



  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Barra de navegación' type='Navbar'>
      <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;gapi.iframes:gapi.iframes.style.bubble&quot;, function() {
          if (gapi.iframes &amp;&amp; gapi.iframes.getContext) {
            gapi.iframes.getContext().openChild({
                url: &#39;https://www.blogger.com


y mas texto....

                where: document.getElementById(&quot;navbar-iframe-container&quot;),
                id: &quot;navbar-iframe&quot;
            });
          }
        });
      &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
    </b:widget>
  </b:section> 



Lo copiaremos con ctrl+c, aplicaremos la plantilla que queremos exterior a blogger, entraremos en edición HTML de la plantilla y después de body pegaremos el código con ctrl+v.


Pues esto es todo con respecto a las navbar, espero que os sea de interes.

1 comentario:

  1. Mi barra no aparecia con la nueva plantilla que puse, gracias a esto he conseguido volver a tenerla. Mucha gente no le gusta, pero es muy practica, bueno, lo dicho, que funciona el metodo este.

    ResponderEliminar