-->

Articulo

Footer Ónix para Blogger


Bienvenidos a esta entrada especial de CirculoBlogger. estoy encantado e decirles que adapte exitosa mente un footer de PHPost a blogger. pues no fue muy facil, ya que las lineas en blogger son totalmente diferentes en PHPost y viceversa. pero ahi tienen un catalogo de estilo muy grande, que pueda que utilice para adaptar a blogger, de todos modos blogger es más facil de usar.

A este footer lo he nombrado Ónix, dando mencion a la piedra negra utilizada en joyeria con el mismo nombre.
Empecemos a adaptar este footer a nuestro blog.

1) ahora hagamoslo facil para ustedes. vamos a editar la plantilla en HTML.


Ahi vas a buscar la etiqueta </body> "Debe encontrarse casi al ultimo de tu pagina"



Despues vas a colocar el siguiente codigo arriba de la etiqueta:
<footer>
       
                <!--END CONTAINER-->
     
<div id='footer'>
          <div class='wrap'>
               <ul id='company-promos'>
                  <li><a href='#'><img alt='Mad Scientist' height='198' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9UQGTDaBLEHb14kYvUtYWp80kh70xJ9sSWDNx-AsmjQyK4C_WMIUnFhu3RZxhAB7zzqmA1ITIPIGjRkFxtQzBT5aoSTn0E8aVWDISAor6uie2NDLgd7k-FBKxLsT-nv4HbJXRLHODYNm/w200-h198-no/' width='200'><br><strong>CopyRight</strong>CirculoBlogger© 2015 - Footer adaptado de phpost para Blogger y diseños HTML.</br></img></a></li>
                  <li><a href='#'><img alt='Blogbot' height='198' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV0VFJzxft2-eCXqQ5JRaX8mLC6OZkh-efhelheaIWsEodN_EEtkcTR2fwQcNueMJO-ga0EcpFDmFRfvfSihNDm65ppbMugpvk3kvhRFhpAroFJ7owWnFfJ7bwloPKGzZ5OxRS-BH5tLKK/w200-h198-no/' width='200'><br><strong>Anuncios Importantes</strong></br>Recuerda Visitar las ultimas noticias e informaciones que te entregamos en CirculoBlogger.</img></a></li>
                  <li><a href='#'><img alt='Nurse' height='198' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG7N3qBOAYAMiNLE3lb38PT_Gz0Cwy30XBEXYD5DLjIdmBkPPlktsau6jnkHsc-iv-wZ0lSHoRysmVcnXeE9IPBI8WGThzd2PHylnlcbo6Mngyt3sICOLrsRshadDHKBI6p7P1sYKeJiAb/w200-h198-no/' width='200'><br><strong>Ayuda</strong></br>Necesitas Ayuda en el sitio, pues acude a nuestro STAFF de CirculoBlogger y pidela ahora..</img></a></li>
                  <li><a href='#' title='Vista nuestra pagina de Google+'><img alt='Twitter Bird' height='198' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cTVITVYrBDkIvu5UTY7XIrdptonZx6pMHj6J0xQMcvEKvNTqn0hFEzjkgA5Dfk4qBcsAiRQ-ipSj2Nk6HVm9vcQD9_K4Fq_8SA_iGeRHGu13TKpTl_Ou723t8qOjLGMya-e1M-XtrCNn/w200-h198-no/' width='200'><br><strong>Sigue a ZeroJuegos</strong></br>Agreganos a tus circulos en Google+ y mantente al dia con nuestros diseños.</img></a></li>         </ul>
<div id='pie'>
                <center> <a href='#'>Ayuda</a> -
                 <a href='#'>Chat</a> -
                 <a href='#'>Contacto</a> -
                 <a href='#'>Protocolo</a>
                 <br/>
                 <a href='#'>Terminos y condiciones</a> -
                 <a href='#'>Privacidad de datos</a> -
                  <a href='http://goo.gl/d9yKcA'>CirculoBlogger!</a></center>
                 </div>
          </div><!--#wrap-->
</div>
</footer>
2) Una vez que ya colocaste el codigo, vas a hacer la busqueda de la etiqueta </b:skin> y vas a pegar el siguiente código encima de esa etiqueta.
.wrap {
width: 960px;
margin: 0 auto;
text-align: left;
}
#footer{
margin-top:100px;
background: #19191A;
        border-top: 5px solid #c0c0c8;
        padding:40px 0;
float: left;
width: 100%;
min-width: 960px;
clear: both;
display: inline;
color: #565656;
}
/* Company Promos */
#company-promos{
float: left;
display: block;
margin-bottom: 40px;
}
#company-promos li{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9e2PEZu5J3lppKV2sEeGdJoEszpD29FZ7viiodt-EOas_-dFlgGPIlJMXDQCvs6R_EdgkwmIgpzXKDe4hyphenhyphenK_ufW5xQofGjktYknvvwONa-7PZhcz3-bOKFp_MAv93Vn1Rw3UJtEc3mwoi/w220-h360-no/) no-repeat 0 0;
        width: 200px;
        padding: 0 10px;
        float: left;
        display: inline;
        margin-left:  20px;
        text-align: center;
}
#company-promos li:hover{background-position: 0 -180px;}
#company-promos li:first-child{margin-left: 0;}
#company-promos li a{
font-size: 11px;
color: #777;
display: block;
padding-top: 84px;
height: 96px;
text-shadow: #222 0 -1px 0;
}
#company-promos li a:hover{color: #999;}
#company-promos li a img{
        margin-top: -184px;
        margin-bottom: 10px;
        display: block;
}
#company-promos li a br{display: none;}
#company-promos li a strong{
        color: #fff;
        display: block;
        width: 200px;
        height: 20px;
  opacity: .7;
  -webkit-transition: opacity .2s linear;
}
#company-promos li a:hover strong{opacity: 1;}
Y ahora vas a guardar tu plantilla.

No tengo demos live de este supermod para blogger, pero te dejo con esta imagen que le hice a un blog mio con este footer.


• Te recomiendo que si tienes un pie de pagina lo quites, estéticamente se ve bien solo un pie de pagina, De ahi solo tienes que reemplazar la información y los # por las paginas web.

Te pido que dejes el nombre de CirculoBlogger como agradecimiento por adaptar este footer a Blogger, así mas personas podran hacer blogs espectaculares.

1 Comentario