-->

Articulo

Footer Perla Negra para Blogger


Bueno, en un día he publicado 3 tipos diferentes de footers, me gusto hacerlo y ahora vere que más escuentro para adptar a blogger. pero ahora le toca al ultimo de mis footers adaptados. Les presento a el Footer Perla Negra. Nombrado así por su color puro negro, posee una barra social al final con varias cuentas, secciones de Agradecimientos, Creditos y Recomendaciones, Un mapa del sitio y para que recomienden la pagina por Facebok o Google+.

El nombre del Footer "Perla Negra" tambien es referente a una joya, pero dejemos eso para despues.

Para instalar este footer vamos a Plantilla y editamos en HTML.


De ahi haremos una busqueda.


Buscamos la etiqueta </body> y pegamos arriba el siguiente codigo.
<footer>
<!--end-cuerpo-->

        <footer>
<div class="footer">
 <div class="FooIzq">
 <li style="background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); padding: 6px; text-align: center; border-radius: 3px 3px 3px 3px; border: 1px solid rgb(68, 68, 68); color: #FFF;">AGRADECEMOS A...</li><br />
        <li><a href="#">Otorgar créditos a..</a></li>
        <li><a href="#">Otorgar créditos a..</a></li>
        <li><a href="#">Otorgar créditos a..</a></li>
<li><a href="#">Otorgar créditos a..</a></li>
<li><a href="#">Otorgar créditos a..</a></li>
<li><a href="#">Otorgar créditos a..</a></li>
        <li><a href="http://ciudadblogger.blogspot.com">Ciudad Blogger!</a></li>
 </div>

 <div class="FooCent">
        <li style="background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); padding: 6px; text-align: center; border-radius: 3px 3px 3px 3px; border: 1px solid rgb(68, 68, 68);">&iexcl;CR&Eacute;DITOS Y RECOMENDACIONES</li>
<div class="FooCredit">
<li><a href="http://masterdesign.com/" target="_blank"><img style="margin-left: -4px; margin-right: 10px; margin-bottom: -4px;" src="https://lh5.googleusercontent.com/-JAX43A6LuOI/VWucfLyftCI/AAAAAAAAAeI/beL_xxwuAKk/s20-no/lab.png"> Lab's Master Design</img></a></li>
<li><a href="http://phpost.net" target="_blank"><img style="margin-left: -4px; margin-right: 10px; margin-bottom: -4px;" src="https://lh3.googleusercontent.com/-FLn-dfobjW0/VWucefDQlJI/AAAAAAAAAeg/bSTXSxzVzxE/s20-no/copy.png"> Software By PHPost</img></a></li>
<li><a href="http://www.pixicode.net/perfil/Altffenser/" title="No retires mi Copyright" target="_blank"><img style="margin-left: -4px; margin-right: 10px; margin-bottom: -4px;" src="https://lh3.googleusercontent.com/-FLn-dfobjW0/VWucefDQlJI/AAAAAAAAAeg/bSTXSxzVzxE/s20-no/copy.png"> Diseño de footer por Altffenser</img></a></li>
 </div> <!-- DIV FOOSOCIAL -->
 <div class="FooSocial">
 <li style="background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); padding: 6px; text-align: center; border-radius: 3px 3px 3px 3px; border: 1px solid rgb(68, 68, 68);">RECOMIENDA LA PAGINA!</li>
 <div class="FooBottom" style="padding-top: 9px;">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.pixicode.net&amp;send=false&amp;layout=button_count&amp;width=
450&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=recommend&amp;
height=21&amp;appId=325267927545663" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height: 20px;" allowTransparency="true"></iframe>
</div>
<div class="FooBottom" style="padding-top: 9px;">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="pixicode.net" data-lang="es">Twittear</a>
                    </div>
 </div>
 </div>

 <div class="FooDer">
 <li style="background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); padding: 6px; text-align: center; border-radius: 3px 3px 3px 3px; border: 1px solid rgb(68, 68, 68); color: #FFF;">&iexcl;MAPA DEL SITIO!</li><br />
        <li><a href="#">Ayuda</a></li>
        <li><a href="#">Chat</a></li>
        <li><a href="#">Contacto</a></li>
        <li><a href="#">Protocolo</a></li>
        <li><a href="#">T&eacute;rminos y condiciones</a></li>
        <li><a href="#">Privacidad de datos</a></li>
        <li><a href="#">Report Abuse - DMCA</a></li>
 </div>
</div> <!-- FIN DE DIV FOOTER -->
<div class="footer_a">
  <div class="FooBottom_a">
  <p>las im&aacute;genes y logos que forman parte de Master Design son proipiedad de dicha p&aacute;gina, por lo cual se prohibe el mal uso de éstas.
  <a href="{$tsConfig.url}"><img src="https://lh6.googleusercontent.com/-6bEhJPrP9jA/VWucf4XKBMI/AAAAAAAAAeo/VDJtMW
sR8Ss/w175-h25-no/logo3.png" ></img></a></p>
   <div class="FooBottomSocial">
  Master Design en:
  <a href="#"><img src="https://lh6.googleusercontent.com/-7uNWDcTk3SQ/VWujrvpNI9I/AAAAAAAAAfU/Ggv-HeS32c8/s30-no/facebook-24x24.jpg"></img> Facebook</a>
  <a href="#"><img src="https://lh6.googleusercontent.com/-SDQTMnwVz_E/VWujrs64guI/AAAAAAAAAfY/EL0gkl4RI1s/s30-no/twitter.png"></img> Twitter</a>
  <a href="#"><img src="https://lh6.googleusercontent.com/-vLwC3rZaY-A/VWucfYLoqYI/AAAAAAAAAec/LjEK8gCAz8c/s30-no/linkedin.png"></img> Linkedin</a>
  <a href="#"><img src="https://lh6.googleusercontent.com/-GBWcw56mr4A/VWucfO2eYAI/AAAAAAAAAek/tzHyMVpJx8g/s30-no/google-plus.png"></img> Google +</a>
  <a href="#"><img src="https://lh6.googleusercontent.com/-UsB3CDZ4MVo/VWucgochkDI/AAAAAAAAAe8/oCCuZ5A3V-4/s30-no/youtube.png"></img> YouTube</a>
  <a href="#"><img src="https://lh6.googleusercontent.com/-_FE-WzCxQsE/VWucep2FH3I/AAAAAAAAAeU/vhuU1AoxRl4/s30-no/delicious.png"></img> Delicious</a>
  <a href="#"><img src="https://lh4.googleusercontent.com/-ffK4xvYAISU/VWucefveW4I/AAAAAAAAAes/4cv6x07Zj7c/s30-no/apple.png"></img> Apple Account</a>
  <a href="#"><img src="https://lh4.googleusercontent.com/-M6ot0Yi70c8/VWucgrFuCPI/AAAAAAAAAe4/Ir0_qLGbBFA/s30-no/rss.png"></img> RSS</a>
   </div>
     <!-- PON LO SIGUIENTE DEBAJO DE LA LISTA DE ICONOS DE REDES SOCIALES -->
  </div>
</div>

        </footer> <!-- FIN DE TODO EL FOOTER -->
        <!--END CONTAINER-->
    <!-- <div id="pp_copyright" style="display: block!important; opacity: 1!important;">
        <a href="{$tsConfig.url}"><strong>{$tsConfig.titulo}</strong></a> &copy; {$smarty.now|date_format:"%Y"} - Powered by <a href="http://www.phpost.net/" target="_blanck"><strong>PHPost</strong></a>
    </div> -->

        </footer>
Despues vamos a hacer la busqueda de la etiqueta </b:skin>, y pegamremos el siguiente codigo arriba.
/* Footer */
    footer {
   background-color: rgba(0,0,0,0.7);
   background-repeat: repeat-x;
   border-top: 5px solid #000;
   float: left;
   clear: both;
   width: 100%;
   height:100%;
   }
 
   .footer {
   width: 1020px;
   height: auto;
   margin: 0 auto;
   padding-top: 15px;
   }
 
   .footer_a{
   clear: both;
   display: block;
   width: 1010px;
   height: auto;
   margin: 0 auto;
   }
   .footer a{
   opacity: 0.5;
   color: #FFF;
   font-family: Arial;
   font-size: 10px;
   text-transform: uppercase;
   line-height: 23px;
   -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
   transition:.5s;
   }
 
   .footer a:hover {
   text-decoration: none;
   opacity: 1.0;
   }
 
   .footer li a{
   padding: 7px 10px 7px 10px;
   border-radius: 4px;
   }
 
   .footer li a:hover {
    opacity: 1.0;
   }
 
   .FooIzq {
   width: 308px;
   float:left;
   padding: 10px;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   border: 1px solid;
   }
 
/*    .FooDer li:hover {
   background: url(/themes/default/img_MD/arrow.png) no-repeat scroll -8px 3px;
   } */
 
   .FooCent {
   float:left;
   width: 308px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   margin: 0px 10px auto;
   border: 1px solid;
   }
 
   .FooCent li {
   color: #FFF;
   }
 
   .FooDer {
   float: left;
   width: 308px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   border: 1px solid;
   }
 
   .FooCredit {
   padding-bottom: 10px;
   }
 
   .FooCredit li {
   padding-top: 10px;
   }
 
   .FooSocial {
    clear: both;
   }
 
   .FooBottomSocial {
   clear: both;
   }
 
   .FooBottomSocial a{
   color: #FFF;
   opacity: 0.7;
   -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
   transition:.5s;
   }
 
   .FooBottomSocial a:hover{
   text-decoration: none;
   opacity: 1.0;
   }
 
   .FooBottomSocial img {
   margin: 10px 3px -7px 20px;
   }
 
   .qAtop {
   background: url(https://lh6.googleusercontent.com/-bZ_7oXo2fEY/VWuce2FP6kI/AAAAAAAAAeE/pgLX6n_qdEs/w59-h20-no/footer-arrow.png) repeat scroll;
   width: 100%;
   height: 16px;
   }
 
   #footerT .footer-wrapper {
    background: url("img_MD/bgfooter.png") no-repeat scroll left bottom transparent;
    border-top: 1px solid #EEEEEE;
    padding-bottom: 10px;
    margin: 0 auto;
    position: relative;
width: 1002px;
}
   .FooBottom {
   float: left;
   margin: 3% 0px auto;
   padding: 0 0px 0px 30px;
   width: 100px;
   }
 
   .FooBottom_a {
   background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
   float: left;
   padding: 10px;
   border-radius: 5px 5px 5px 5px;
   border: 1px solid #000;
   width: 98%;
   margin: 10px -6px auto;
   text-transform: uppercase;
   color: #FFF;
   font-family: Arial;
   font-size: 11px;
   }
 
   .pls {
   color: #FFF;
   }
 
   .footer-action {
   padding: 10px;
   border-top: 1px solid #EEE;
   overflow: hidden;
   width: 981px;
   background: white;
   height: 34px;
   clear: both;
   margin-top:-15px;
   border-right: 1px solid #CCC;
   border-left: 1px solid #CCC;
}
#asd {
    position: relative;
}
#buscador-footer {
    background: none repeat scroll 0 0 transparent !important;
    border: 1px solid #CCCCCC;
    border-radius: 30px 30px 30px 30px;
    color: #999999;
    padding: 8px;
    width: 240px;
}
.search-f {
    font-family: Arial,Helvetica;
    font-size: 13px;
    margin: 0;
}
.btn_search-f {
    background: url("images/magn.gif") no-repeat scroll left top transparent;
    border: 0 none;
    display: block;
    height: 14px;
    position: absolute;
    right: 5px;
    top: 8px;
    width: 14px;
}
   .copyright-footer {
   display: block;
   height: auto;
   margin: 0 230px auto;
}
   .copyright-footer:hover {
   opacity: 0.7;
}
   .irCielo {
   color: #999!important;
   font-weight: bold;
   border-bottom: 1px dotted #999;
   display: block;
   float: right;
   text-decoration: none;
   margin: 7px 0;
}
   .irCielo:hover {
   color: #666!important;
}
 /* FIN DE FOOTER */
Y ahora van a guardar su plantilla.

Les quedara algo similar a esto.


Puedes descargar el demo:

 

Ahora algunas recomendaciones si no pudieron instalar.

• Primero asegurate de haber eliminado el anterior footer o cerciórate de no tener footer.
• Respeta el copy, estos diseños son libres de uso y gratuitos, manten la ultima inea de la sección "Agradecemos a".
• Este es una adaptación de un recurso de PHPost realizada por MasterDesign, Si algo resulta mal avisanos.

0 Comentarios