Cómo agregar un pie de página como el de Strato en mi página web

  • Autor Autor kino2
  • Fecha de inicio Fecha de inicio
kino2

kino2

Épsilon
Verificación en dos pasos activada
He visto una pagina que me ha encantado su "pie de pagina", y sobre todo su PIE de pagina..creo que ha modificado el archivo styles y alguno otro...

alguno sabría que código hay que añadir para que salga ese "pie de pagina"???

La pagina a investigar es Strato - Opinión sobre este alojamiento web barato

Muchas gracias a todos por la atencion
 
disculpa que tiene de loco el pie de esta web???
 
simplemente pillado usando la inspección de elemento y ya esta 😀 😛irate:
 
Pero en cuantos ficheros debo modificar el codigo?

te agradeceria que me hicieras un copia/pega..porque sino puedo estar hasta mañana...NUNCA he podido con el codigo fuente...en cuanto me sacan del SEO...chungo..
simplemente pillado usando la inspección de elemento y ya esta 😀 😛irate:
 
Hola kino2

Primero debes incorporar el siguiente código en tu archivo CSS

Insertar CODE, HTML o PHP:
.footer-outer-wrapper {
  background: none repeat scroll 0 0 #333333;
  border-top: 5px solid #cccccc;
  margin-top: 20px;
}
.copyright-outer-wrapper {
  background: none repeat scroll 0 0 #292929;
  padding-top: 20px;
}
.copyright-wrapper {
  color: #999999;
}
.b20 {
  margin-bottom: 20px !important;
}
.left {
  float: left;
}
.b20 {
  margin-bottom: 20px !important;
}
.text-right {
  text-align: right;
}
.right {
  float: right;
}

Luego debes replicar las clases de los siguientes <div>

Insertar CODE, HTML o PHP:
<div class="footer-outer-wrapper">
<div class="copyright-outer-wrapper">
<div class="copyright-wrapper container">
<div class="row clearfix">
<div class="copyright-left left b20">
<nav class="footer-nav">
<div class="menu">
<ul>
<li>
<a href="http://www.hostingmundo.com/">Inicio</a>
</li>
<li class="page_item page-item-2">
<a href="http://www.hostingmundo.com/acerca-de/">Acerca de</a>
</li>
<li class="page_item page-item-58">
<a href="http://www.hostingmundo.com/cloud-hosting/">Cloud Hosting</a>
</li>
<li class="page_item page-item-18">
<a href="http://www.hostingmundo.com/contacto/">Contacto</a>
</li>
<li class="page_item page-item-50">
<a href="http://www.hostingmundo.com/vps-servidores-privados-virtuales/">VPS – Servidores Privados Virtuales</a>
</li>
<li class="page_item page-item-53">
<a href="http://www.hostingmundo.com/servidores-dedicados/">¿Cuales son los mejores Servidores Dedicados de España?</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="copyright-right right b20 text-right"> © 2014. Creado con amor desde Quondos.com </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>

Espero que te sea de utilidad :encouragement:
Saludos
 
Vayaaaaaaaaa no me he explicado bien.....Trato de saber que codigo tengo que implantar para que me permita añadir esa seccion que aparece justo debajo de:
"No obstante, si lo tuyo son muchas Webs y de un tamaño medio Strato puede ser un proveedor de Hosting mejor que excelente para dar los primeros pasos en el medio 2.0."
y antes de
"Más información: Comparativa de Hosting – Servidores dedicados – VPS - Cloud Hosting"


S.O.S graciassssssss
Hola kino2

Primero debes incorporar el siguiente código en tu archivo CSS

Insertar CODE, HTML o PHP:
.footer-outer-wrapper {
  background: none repeat scroll 0 0 #333333;
  border-top: 5px solid #cccccc;
  margin-top: 20px;
}
.copyright-outer-wrapper {
  background: none repeat scroll 0 0 #292929;
  padding-top: 20px;
}
.copyright-wrapper {
  color: #999999;
}
.b20 {
  margin-bottom: 20px !important;
}
.left {
  float: left;
}
.b20 {
  margin-bottom: 20px !important;
}
.text-right {
  text-align: right;
}
.right {
  float: right;
}

Luego debes replicar las clases de los siguientes <div>

Insertar CODE, HTML o PHP:
<div class="footer-outer-wrapper">
<div class="copyright-outer-wrapper">
<div class="copyright-wrapper container">
<div class="row clearfix">
<div class="copyright-left left b20">
<nav class="footer-nav">
<div class="menu">
<ul>
<li>
<a rel="nofollow" href="http://www.hostingmundo.com/">Inicio</a>
</li>
<li class="page_item page-item-2">
<a rel="nofollow" href="http://www.hostingmundo.com/acerca-de/">Acerca de</a>
</li>
<li class="page_item page-item-58">
<a rel="nofollow" href="http://www.hostingmundo.com/cloud-hosting/">Cloud Hosting</a>
</li>
<li class="page_item page-item-18">
<a rel="nofollow" href="http://www.hostingmundo.com/contacto/">Contacto</a>
</li>
<li class="page_item page-item-50">
<a rel="nofollow" href="http://www.hostingmundo.com/vps-servidores-privados-virtuales/">VPS – Servidores Privados Virtuales</a>
</li>
<li class="page_item page-item-53">
<a rel="nofollow" href="http://www.hostingmundo.com/servidores-dedicados/">¿Cuales son los mejores Servidores Dedicados de España?</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="copyright-right right b20 text-right"> © 2014. Creado con amor desde Quondos.com </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>

Espero que te sea de utilidad :encouragement:
Saludos
 
Lo podrias insertar con un div id, y luego llamarlo en un css para insertarlo en cualquier posiciones que quieras...
 
Gracias por la colaboracion...pero "me suena a chino" lo que me has contado...
Lo podrias insertar con un div id, y luego llamarlo en un css para insertarlo en cualquier posiciones que quieras...

- - - Actualizado - - -

nadie sabe cómo sacar el codigo necesario???

- - - Actualizado - - -

Lo lamento, creo que me explique mal....Trato de saber que codigo tengo que implantar para que me permita añadir esa seccion que aparece justo debajo de:
"No obstante, si lo tuyo son muchas Webs y de un tamaño medio Strato puede ser un proveedor de Hosting mejor que excelente para dar los primeros pasos en el medio 2.0."
y antes de
"Más información: Comparativa de Hosting – Servidores dedicados – VPS - Cloud Hosting"
disculpa que tiene de loco el pie de esta web???
 
Hola ¿Qué tal esto? Edit fiddle - JSFiddle
Aquí el HTML:
Insertar CODE, HTML o PHP:
<div class="contenedor-pie-articulo">
    <div class="pie-articulo">
        <div class="columna center">
            <img src="http://lorempixel.com/400/300/">
        </div>
        <div class="columna center">
            <a href="#" class="boton">Hola mundo</a>
        </div>
        <div class="columna">
            <h2>Ventajas</h2>
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
            </ul>
        </div>
    </div>
</div>

Este es el CSS:
Insertar CODE, HTML o PHP:
.contenedor-pie-articulo{
    padding: 10px;
    display: block;
    border-radius: 3px;
    border: solid 1px #EEEEEE;
    
    /*DEGRADADO*/
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f0f0f0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#f0f0f0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */

}

.pie-articulo{
    display: block;
    width: 100%;
    overflow: hidden;
    
    font-family: Verdana, sans-serif;
}
.pie-articulo *{
    max-width: 100%;
}
.columna{
    display:block;
    float:left;
    width: calc(100%/3);
    min-height:20px;
}

.boton{
    display: inline-block;
    border-radius: 3px;
    padding: 10px 15px 10px 15px;
    margin-top: 50px;
    color: #DDDDCF;
    text-transform: uppercase;
    font-family: 'Lucida Console', monospace;
    border: solid 1px #CEDD2E;
    border-bottom: none;
    
    transition: opacity 0.5s;
    transition-delay: 0.5s;
    
    /*DEGRADADO*/
    background: #d0df36; /* Old browsers */
    background: -moz-linear-gradient(top,  #d0df36 0%, #5e7e00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0df36), color-stop(100%,#5e7e00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d0df36 0%,#5e7e00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d0df36 0%,#5e7e00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d0df36 0%,#5e7e00 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #d0df36 0%,#5e7e00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0df36', endColorstr='#5e7e00',GradientType=0 ); /* IE6-9 */
    
    /*SOMBRA*/
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.75);
}

.boton:hover{
    text-decoration: none;
    opacity: 0.7;
}

.pie-articulo h2{
    padding: 0px;
    margin: 0px;
    margin-bottom: 20px;
    font-weight: normal;
    font-size: 16px;
}

.pie-articulo ul{
    font-size: 15px;
    list-style: square url("http://www.hostingmundo.com/wp-includes/images/plus.png");
}
.pie-articulo li{
    margin-bottom: 5px;
}

.center{
    text-align: center;
}

Un saludo.
 
Atrás
Arriba