Footer Hope Azul para Blogger

Sinceramente me he picado un poco con esto de los diseños y pies de pagina, ahora presento un diseño más detallado que el anterior que presente. igualmente esto lo he adaptado de PHPost para Blogger. me demoro un poco más que el anterior, pero de igual manera esta bien detallado.

El nombre de este footer es El Hope Azúl, al igual que la joya invaluable con el mismo nombre haciendo referencia al color mas usado y que realmente esto es una joya para los bloggeros.

Ahora empecemos a adaptar el footer a nuestro blog.

Empezaremos editando la plantilla en modo HTML.

Realizaremos una busqueda en la plantilla:

Ahora vamos a pegar el siguiente codigo encima de la etiqueta </b:skin>.

#footer-container{
background : url('images/footer.jpg') repeat-x left top;
background : rgb(10,7,7) url(images/footer.gif) repeat-x left top;
}
#footer {
position : relative;
margin : 100px auto; /* Distancia Relacionada con el blog */
width : 960px;
}
#footer .rings{
left : 271px;
top : -345px;
}
.footer-icon{
position : relative;
left : -150px;
top : -133px;
background : url('https://lh4.googleusercontent.com/-JYaeiQauDmc/VWtc7eX1_1I/AAAAAAAAAcg/s_LlklDUlks/w1517-h167-no/footer-ico.png') no-repeat left top;
height : 133px;
width : 1213px;
}
#footer-container{
background : url('https://lh4.googleusercontent.com/-chf_wTrxrbI/VWtc7c4SeaI/AAAAAAAAAcY/76QrFtvjVi4/w253-h402-no/footer.jpg') repeat-x left top;
_background : rgb(10,7,7) url(images/footer.gif) repeat-x left top;
}
#footer-container a{
_text-decoration : none !important;
}
#footer-container{
margin-top : 100px;
height: 321px;
width: 100%;
margin: auto;
}
.aereo-icon{
background : url(https://lh3.googleusercontent.com/-J7wa3T7p1gA/VWtc54W_9kI/AAAAAAAAAbs/jJC2-V7yYbA/s109-no/aereo.png) no-repeat left top;
top : -67px;
right : -55px;
position : absolute;
height : 87px;
width : 87px;
}
.more-read, .new{
width : 280px;
float : left;
border-right : 1px solid #044dba;
margin-top:-132px;
}
.new{
border : 0px;
}
#footer .side-title{
height : 55px;
padding-left : 75px;
padding-top : 10px;
margin : 0px;
}
.more-read .side-title{
background : url(https://lh3.googleusercontent.com/-s0TaRohgTgM/VWtc6LPvOAI/AAAAAAAAAb8/wXthCqG_ix4/s75-no/cuore.png) no-repeat left top;
}
.new .side-title{
background : url(https://lh3.googleusercontent.com/-RnxD6ZOzl2I/VWtc7bzOjTI/AAAAAAAAAcc/0IrZoN4LcIY/s75-no/twitter.png) no-repeat left top;
}
.more-read ul, .new ul{
width : 260px;
height: 170px;
margin-top: 30px;
}
.more-read ul li a, .last-comment ul li a, .new ul li a{
width : 240px;
height : 30px;
border-bottom : 1px solid #044dba;
display : block;
text-decoration : none;
padding : 5px 10px;
overflow : hidden;
}
.new ul li a{
width : 260px;
}
.more-read ul li a:hover, .new ul li a:hover{
background : #004a95;
}
.more-read ul li a strong{
color : #fff;
font-size : 12px;
display : block;
font-weight : bold;
overflow : hidden;
}
.more-read ul li a small{
color : rgb(173,172,153);
font-size : 12px;
}
.more-read ul li a small span{
text-decoration : underline;
}
.last-comment{
width : 358px;
margin-left : 20px;
margin-right : 20px;
float : left;
border-right : 1px solid #044dba;
margin-top: -132px;
}
.last-comment .side-title, #comments .side-title {
background: url(https://lh5.googleusercontent.com/-SEzMP2iyHds/VWtc6UbHkzI/AAAAAAAAAcA/b6RL43MGk74/s75-no/esclamativo.png) no-repeat left top;
}
.last-comment ul{
width : 318px;
height: 170px;
margin-top: 30px;
}
.last-comment ul li a{
width : 318px;
}
.last-comment ul li a:hover{
background : #004a95;
}
.last-comment ul li a span,.new ul li a span{
color : #fff;
font-size : 12px;
display : block;
overflow : hidden;
}
.last-comment ul li a small, .new ul li a small{
color : rgb(173,172,153);
font-size : 12px;
}
.info{
position : relative;
margin-top : 50px;
.margin-top : 70px;
zoom : 1;
}
.info div{
float : left;
color : #fff;
background : #004a95;
padding : 2px 10px;
}
.info .copyright{
background : none
}
.info .copyright div{
clear : both;
}
.info div.credits{
margin-left : 67px;
}
.info a{
text-decoration : none;
color : #fff;
}
.info a:hover{
color : rgb(173,172,153);
text-decoration : none;
}
div.rss-mail{
background : url('https://lh6.googleusercontent.com/-lqBfp_I_GMg/VWtlfic9Q1I/AAAAAAAAAc8/Htf9-UCiTG4/w325-h75-no/socialplustube.png') no-repeat left top;
width : 260px;
height : 55px;
right : 360px;
top : 35px;
display : block;
position : absolute;
float : right;
padding : 0px;
}
div.rss-mail a{
display : block;
padding-top : 22px;
height : 38px;
}
div.rss-mail a.rsslink:hover, div.rss-mail a.contactlink:hover{
color : #ADAC99 !important;
}
div.rss-mail a.rsslink{
width : 130px;
float : right;
cursor : pointer;
text-decoration : none;
color : #fff;
padding-left : 70px;
width : 60px;
}
div.rss-mail a.contactlink{
width : 130px;
float : left;
cursor : pointer;
text-decoration : none;
color : #fff;
padding-left : 3px;
width : 127px;
}
#footer .wrapper {
background: url("images/bgfooter.png") no-repeat scroll left bottom transparent;
border-top: 1px solid #EEE;
padding-bottom: 10px;
width: 1002px;
}
#footer .wrapper a:hover {
color: #666!important;
}
.last-action {
background: none repeat scroll 0 0 #FFFFFF;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
padding: 10px;
}
#footer ul li {
float: left;
display: block;
padding: 3px;
}
#footer ul li a {
color: #006595!important;
text-shadow: none!important;
margin: 0 10px;
font-weight: bold;
font-size: 11px;
}
#footer ul li span {
color: #999;
}
.clearfix, .container, .box, .markItUpHeader, .list-element {
display: block;
}
ul.footer-list li {
display: inline;
margin: 0 10px;
}

Despues vamos a volver a realizar una busqueda con la etiqueta: </body>; y pegaremos esto arriba.

<footer>

<div id="pie">
</div>

<div class="wrapper clearfix">
<div id="footer-container">
<div id="footer">
<div class="bottom">
<div class="footer-icon"></div>
<div class="aereo-icon"></div>
<div class="more-read">
<div class="side-title" style="position:absolute; top:-30px;">
<h2 class="title" style="color:white;">De Interes</h2>
</div>
<ul>
<li>
<a href="#">
<strong><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png">
ANUNCIE</img></strong>
<small>Promociona tu web, empresa o producto</small>

</a>
</li>
<li>
<a href="#">
<strong><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png">
BLOG</img></strong>
<small>Informate sobre los cambios Aqui.</small>
</a>
</li>
<li>
<a href="#">
<strong><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png">
CONTACTO</img></strong>
<small>Dudas, comentarios y sugerencias</small>
</a>
</li>
<li>
<a href="http://circuloblogger.blogspot.com">
<strong><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png">
CIRCULO BLOGGER!</img></strong>
<small>Adaptando tus ideas a Blogger</small>
</a>
</li>
</ul>

</div>
<div class="last-comment">
<div class="side-title" style="position:absolute; top:-30px;">
<h2 class="title" style="color:white;">Informacion</h2>
</div>
<ul>
<li><a href="#">
<span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
DMCA</font></img></b></span>
<small>Notice to Owners of Copyrighted Works</small>
</a></li>
<li><a href="#">
<span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
PROTOCOLO</font></img></b></span>
<small>Reglamento para la plataforma.</small>
</a></li>
<li><a href="#">
<span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
ENLAZANOS</font></img></b></span>
<small>Obten miles de visitas.</small>
</a></li>
<li><a href="#">
<span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
TERMINOS Y CONDICIONES</font></img></b></span>
<small>Condiciones de uso.</small>
</a></li>
</ul>

</div>
<div class="new" style="float:right;">
<div class="side-title" style="position:absolute; top:-30px;">
<h2 class="title" style="color:white;">Alternativas</h2>
</div>
<ul>
<li>
<a href="#">
<span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
FOOTER ADAPTADO</font></img></b></span>
<small>De redLatinos en PHPost</small>
</a>
</li>
<li>
<a href="#">
<span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
PRIVACIDAD</font></img></b></span>
<small>Tu información esta segura y no es compartida.</small>
</a>
</li>
<li>
<a target="_blank" href="#">
<span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
PREMIUM</font></img></b></span>
<small>Chat con radio, buena musica gratis.</small>
</a>
</li>
<li>
<a href="#">
<span><b><img src="https://lh5.googleusercontent.com/-Cl39NGiHHbk/VWtc5wUpcBI/AAAAAAAAAcE/L1nL_f8Zf7Y/w10-h15-no/bullets.png"><font color="white">
CHAT</font></img></b></span>
<small>Acude a ellos para informacion</small>
</a>
</li>
</ul>
</div>
<br class="clearer">
</br></div>
<div class="info">
<div class="copyright">

</div>
<div class="rss-mail">
<a class="rsslink" href="#" style="margin-top: 0px!important;">Youtube</a>
<a target="_blank" href="#" style="margin-left: 13px; margin-top: 0px!important;">Google+</a>
</div>
<br class="clearer">

</br></div>
</div>
</div>
</div>
</footer>

Y finalmente guardamos nuestra plantilla.

Les quedara algo similar a esto.

Ahora quiero decirles unos puntos importantes de este footer. Puedes editar los # con tus enlaces, y los textos en Negrilla por los textos tuyos. Te pido que no modifiques la linea de CIrculoblogger ya que es un agradecimiento por compartir este elemento y para que otros puedan conocer más a CirculoBlogger.

Bueno, lo demas es automatico y usenlo a su gusto en sus blogs. Saludos a todos.

Articulo

Footer Hope Azul para Blogger

0 Comentarios