Tutorial- Candy Footer Sidebar


Boa Tarde ~
Olá, me desculpa por não ter aparecido esses dias, eu estava, isso mesmo estava fazendo provas, e começei a passar mal, e essa mistura não deu muito certo, mas vou parar de falar da minha vida, vocês não merecem ouvi-la.
Hoje, eu trago o Candy Footer Sidebar, eu achei super cute para layouts do tipo "revista", estava vendo que ele também não pesa muito no blog, e se vocês usarem, recomendo colocarem coisas mais pesadas do blog lá.
Lembrando que eu aprendi no CandyLLand.
1. Vá no seu HTML e procure por <footer>  e acima cole:

<div id='side-wrapper'>
<div id='side1'>
<b:section class='sidefoo1' id='sidefoo1' preferred='yes'/>
</div>

<div id='side2'>
<b:section class='sidefoo2' id='sidefoo2' preferred='yes'/>
</div>

<div id='side3'>
<b:section class='sidefoo3' id='sidefoo3' preferred='yes'/>
</div><div style='clear: both;'/></div>
Visualize para ver se não há algum erro. Salve.
2. Agora, procure por ]]></b:skin> e acima cole:
/*======================ESTILOS PARA O FOOTER SIDEBAR=======================*/ #side-wrapper{ width:980px; height:auto !important; margin:0 auto; display:block; padding:10px 0; background:#fff; box-shadow:inset 0 0 10px #eee, 0 2px 3px #ccc; border-radius:10px } #side1,#side2,#side3{ width:30%; float:left; background:#f9f9f9; margin-left:15px; border-left:4px #eee solid; border-right:4px #eee solid } #side1 h2,#side2 h2,#side3 h2{ font-size:25px; margin-bottom:10px; text-align:center; border-bottom:3px #f9b solid} /*==================BÔNUS===================== ------estilos para blog roll------------------*/ .blog-title a{ font-size:15px; line-height:22px; font-weight:400; color:#888; text-shadow:0 1px #ddd; background:#fee; display:block; box-shadow:0 -1px 2px #ccc; border-left:3px #f9b solid; padding-left:15px } .item-title a{ font-weight:400; color:#777 } /*=======Fim-By-Gizaa[candylland.blogspot.com]========*/
Espero que gostem e creditem e Candylland.
Qualquer dúvida é só comentar!

3 comentários: