Rodapé personalizado para blogger com widgets !

Olá pessoal,tudo bom? aqui é a Dessa trazendo mais um tutorial e bem meus queridos... Hoje vou fazer um tutorial especial a pedido de Nubia em meu facebook,ela me pediu que pudesse montar um Rodapé e pudesse explicar a ela como editar e tudo mais.
A pedido da Nubia do blog jeito simples de ser. Tenho o prazer de ajudar quem eu posso e quando posso,mas devo isso a ela faz um tempinho e hoje estou aqui como prometido! Estava sem internet e também estava muito lenta e agora resolvi e deixei tudo prontinho para vocês editarem!

A preview dele:

LEMBRANDO QUE...

você pode editá-lo da maneira que quiser,disponibilizei então alguns materiais de edição prontos.

Bem,como tudo já está pronto e você não necessita mexer em muita coisa,vou deixar o código dele inteiro abaixo e vou explicar cada coisa.

Primeiramente,em seu computador,peço que você copie o código abaixo e cole em algum documento de texto: Seja um bloco de notas,um Oficcer do Word ou qualquer editor desde que não modifique/traduza ou faça correções ortográficas no código.

Código html:

<div id='rodapé'>
Todos os direitos reservados - Belos Sonhos Blog.
<div id='marcadagua-rodape'>
Design By:
  <br/>
<a href='http://beautifulprettydreams.blogspot.com.br/'><img src='http://i.imgur.com/jqjxhqw.gif'/></a>
  </div>
<div id='mensagem-rodapé'>
A vida me ensinou a nunca desistir. Nem ganhar, nem perder mas procurar evoluir.
  </div>
<div id='facebook-rodape'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBelos-Sonhos-Blog%2F611495805564218&amp;width&amp;height=62&amp;colorscheme=dark&amp;show_faces=false&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=254110221429714' style='border:none; overflow:hidden; height:62px;'/>
  </div>
<div id='redes-icons-roda'>
<div id='facebook-sidebar'>
<li><a href='https://www.facebook.com/pages/Beautiful-Dreams/611495805564218' target='_blank'>Facebook</a></li>
</div>
<div id='youtube-sidebar'>
<li><a href='https://www.youtube.com/user/horozitta' target='_blank'>Youtube</a></li>
</div>
<div id='tumblr-sidebar'>
<li><a href='http://www.r3ports.tumblr.com/' target='_blank'>Tumblr</a></li>
</div>
<div id='google-sidebar'>
<li><a href='https://plus.google.com/u/0/106357770776708939638/posts' target='_blank'>Google+</a></li>
</div>
</div>
</div>

Código CSS:

/* Rodapé
-----------------------------------------------
*/
/* Font Instalada Por - beautifulpdreams.blogspot.com */
@font-face { font-family: "Austie"; src: url('http://static.tumblr.com/c4knkzi/joKn9uwcj/austiebostkittenklub.ttf'); }
#rodapé {
background: url('http://i.imgur.com/R5fWd3S.png')repeat-x;  /* BACKGROUND FUNDO DE JEANS */
height: 261px; /* TAMANHO (ALTURA) DO BACKGROUND */
color: white; /* COR DA FONT */
font-family: austie;
font-size: 35px;
text-align: center; /* TEXTO ALINHADO NO CENTRO */
margin-top: 15px; /* NÃO ALTERE */
margin-bottom: 5px; /* NÃO ALTERE */
padding-top: 25px; /* ESPAÇO DO TEXTO AO TOPO ("TODOS OS DIREITOS...") */
}
#mensagem-rodapé {
position: absolute;
font-size: 19px;
font-family: arial;
text-align: center;
left: 327px;
margin-top: 17px;
border: 1px dashed rgba(255, 255, 255, 0.29);
color: rgba(255, 255, 255, 0.48);
padding: 5px;
background: #5D5E95;
}
#marcadagua-rodape {
position: absolute;
left: 215px;
margin-top: 86px;
font-family: arial;
font-size: 14px;
background: #FF679C;
padding: 5px;
border: 1px solid white;
}
#redes-icons-roda {
display: block;
font-family: arial;
font-size: 9px;
margin-top: 133px;
left: 523px;
position: absolute;
display: inline-flex;
width: 245px;
background: url('http://i.imgur.com/hYeYHSx.png');
border: 1px dashed rgb(255, 221, 227);
padding: 5px;
}
#redes-icons-roda a {
color: #FF7EA2;
text-decoration: none;
}
#facebook-sidebar li {
background: url('http://i.imgur.com/Wsz4fNI.png') no-repeat left;
list-style: none;
padding-left: 18px;
margin-right: 7px;
background-size: 12px;
}
#youtube-sidebar li {
background: url('http://i.imgur.com/f18lMQQ.png') no-repeat left;
list-style: none;
padding-left: 18px;
margin-right: 7px;
background-size: 12px;
}
#google-sidebar li {
background: url('http://i.imgur.com/9nkFZu4.png') no-repeat left;
list-style: none;
padding-left: 18px;
margin-right: 7px;
background-size: 12px;
}
#tumblr-sidebar li {
background: url('http://i.imgur.com/o8ZbUvL.png') no-repeat left;
list-style: none;
padding-left: 18px;
background-size: 12px;
margin-right: 7px;
}
#facebook-rodape {
position: absolute;
left: 879px;
width: 197px;
margin-top: 97px;
background: #FF679C;
border: 1px solid #fff;
}

Vamos então para o posicionamento dos códigos:

onde cada um deles deve ficar,por isso separei os códigos por nomes.

Primeiro: Começando pelo código CSS,entre em modelo > Editar html

Dê um clique no texto e aperte as teclas Ctrl F

Assim vai aparecer uma caixa de pesquisa e para pesquisar,utiliza-se o enter.

Então você procura por:

]]></b:skin>

e acima dele,você cola o código CSS

Vamos para o código Html...

Procure por: </body

e em baixo dele você põe o código Html,finalizado né? Já está instalado e finalizado .Mas ai você com certeza vai querer personalizá-lo.

COMO PERSONALIZAR A CAIXA DE RODAPÉ

Então para o post não ficar grande,lento e chato eu deixei tudo prontinho para vocês um download em vídeo e um pack de materiais de da edição da aula para download.

Materiais - Download (mega)

Mas antes de baixar certifique-se que você tem o programa Winrar para descompactar os arquivos,é o que eu uso em todos os arquivos múltiplos que eu ponho para download e que vai ser muito útil para você que gosta de baixar coisas na internet.

Após baixar tudo,extraia e deixe na área de trabalho e observa o vídeo abaixo.
Extensão paleta de cores Hexadecimais

Abraços Nubia, Espero que tenha gostado e que ensinei ao certo o que você mesma me pediu... Não tinha me esquecido de você mas perdoe-me por não ter feito um tutorial 100% do que você me pediu mas eu perdi a mensagem que você me mandou e eu tentei ajudar. Beijos!