Bom e feliz sábado para vc ,eu venho trazer aqui nesta postagem um tutorial para colocar um footer de 3 colunas com créditos.
Como podem ver na imagem acima tem 3 colunas só não aparece a área de créditos mas porque não consegui tirar a screenshot.
Um footer/ródapé com várias colunas tem suas vantagens alem de ser vistoso ,podemos colocar os gadgets e assim arruma-mos melhor a sidebar.
Veja aqui online: Entre aqui... .
Vamos começar a aplicação .
ANTES DE TUDO FAÇA UMA CÓPIA DO SEU TEMPLATE...
Agora entre no painél do seu blog depois vá em modelo e click em editar html:
Procure este código e acima dele colóque o meu código do blockquote:
Pegue aqui código:
/*-- INICIO Footer http://best-tuga.blogspot.com/ --*/
#footer-wrapper {
width: 100%;
background: #ff8f85;
border-top: 5px solid #858080;
border-bottom: 5px solid #858080;
}
#bt-footer {
width:920px;
clear:both;
margin:0 auto;
padding: 25px 0 25px 0;
line-height: 1.6em;
}
.footerbox{
width: 280px;
padding: 10px 0;
color: #262626;
}
.footerbok p {
color: #262626;
}
.footerbox a {
color: #000;
}
.footerbox a:hover {
color: #FFF;
text-decoration: none;
}
.footerbox h2 {
background-color:#00b3b3 ;
width: 280px;
float:center;
padding-left: 20px;
font-weight: bold;
margin-top: -10px;
margin-bottom: 13px;
color: #ff8f85;
text-transform: uppercase;
font-size: 22px;
font-family: Oswald;
}
.footerbox ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.footerbox li {
margin:0;
padding-top:0;
padding-right:5px;
padding-left: 5px;
padding-bottom:.25em;
line-height:2em;
border-bottom: 1px solid #000;
}
#footerbox1 {
margin-right:38px;
float: left;
}
#footerbox2 {
margin-right:38px;
float: left;
}
#footerbox3 {
float: left;
}
#credit-wrapper{
width: 100%;
margin: 0 auto;
background: #00b3b3;
height: 20px;
padding: 10px 0;
border-top: 5px solid #858080;
}
#credit {
width: 940px;
margin: 0 auto;
color: #000;
text-align: center;
font-size: 12px;
}
#credit a {
color: #FCFCFC;
}
.clear {
clear: both;
}
/*-- FIM Footer Não retire créditos por favor --*/
Agora vamos ao html procure por este código:
Agora acima deles coloque meu código:
<div id='footer-wrapper'>
<div id='bt-footer'>
<b:section class='footerbox' id='footerbox1'>
<b:widget id='Label11' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='footerbox' id='footerbox2'>
<b:widget id='Label22' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='footerbox' id='footerbox3'>
<b:widget id='Label44' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
<div style='clear:both'/>
</div>
<!-- Por favor não retire créditos pode personalizar mas não retire créditos
http://best-tuga.blogspot.pt/-->
<div id='credit-wrapper'>
<div id='credit'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> © 2014 - Desenvolvido por: <a alt='cartita' href='http://best-tuga.blogspot.pt/' title='best-tuga'>best-tuga</a>- <a alt='best-tuga' href='http://www.pg-ins.com' title='best-tuga'>best-tuga</a> </div>
</div>
</div>
</div>
Salve e veja como ficou coloque seus gadgets .
Nota : ao guardar modelo ele pode estar dar erro por causa id gadgets que vão foter é só vc trocar id nd mais.Foi ésta a partilha que trouxe espero ter sido útil ,duvidas disponha ,até mais...
Mostra SmilesOculta Smiles