Criando Rodapé com 4 gadgets no blogger

Saiba como tornar o rodapé de seu blog capaz de ter 4, ou mais gadgets nesse tutorial. Se você tem um blog, sabe que cada espaço que pode ser aproveitado pode ser muito útil.Você poderá utilizar esses espaços, com ultimos comentarios, top comentaristas, parceiros entre vários outros gadgets que lhe podem ser úteis.







Instruções

Antes de tudo precisamos, primeiro fazer o backup completo do template caso haja erros.
Vá a aba Modelo-Editar html e procure por ]]></b:skin> ou ></b:skin> e cole o seguinte código abaixo.

  1. /*começo do código 4 gadgets ------- */
  2. #lower {
  3.     margin:auto;
  4.     padding: 0px 0px 10px 0px;
  5.     width: 100%;
  6.     background:#333333; /*cor do fundo*/
  7.     }
  8. #lower-wrapper {
  9.     background:#333333;
  10.     margin:auto;
  11.     padding: 20px 0px 20px 0px;
  12.     width: 960px;
  13.     border:0;
  14.     }
  15. #lowerbar-wrapper {
  16.     background:#333333;
  17.     float: left;
  18.     margin: 0px 5px auto;
  19.     padding-bottom: 20px;
  20.     width: 23%; /*aumentar  largura dos gadgets*/
  21.     text-align: justify;
  22.     color:#ddd;
  23.     font: normal 12px Arial, Tahoma, Verdana;
  24.     line-height: 1.6em;
  25.     word-wrap: break-word;
  26.     overflow: hidden;
  27.     }
  28. .lowerbar {margin: 0; padding: 0;}
  29. .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
  30. .lowerbar h2 {
  31.     margin: 0px 0px 10px 0px;
  32.     padding: 3px 0px 3px 0px;
  33.     text-align: left;
  34.     border:0;
  35.     color:#ddd;
  36.     text-transform:uppercase;
  37.     font: bold 14px Arial, Tahoma, Verdana;
  38.     }
  39. .lowerbar ul {
  40.     color:#fff;
  41.     margin: 0 auto;
  42.     padding: 0;
  43.     list-style-type: none;
  44.     }
  45. .lowerbar li {
  46.     display:block;
  47.     color:#fff;
  48.     line-height: 1.6em;
  49.     margin-left: 0 !important;
  50.     padding: 6px;
  51.     border-bottom: 1px solid #222;
  52.     border-top: 1px solid #444;
  53.     list-style-type: none;
  54.     }
  55. .lowerbar li a {
  56.     text-decoration:none; color: #DBDBDB;
  57.     }
  58. .lowerbar li a:hover {
  59.     text-decoration:underline;
  60.     }
  61. .lowerbar li:hover {
  62.     display:block;
  63.     background: #222;
  64.     }
  65.         /*final do código 4 gadgets ------ */
Tecle CTRL+F e procure por #333333  (Esta é a cor de fundo) e altere pela cor de sua preferência.
Agora procure por: "aumentar largura dos gadgets" a aumente a proporção dos gadgets no caso o padrão é 23%.

Procure pela tag </body> e adicione o código abaixo.


Atenção:

Dependendo do template você não poderá usar 4 gadgets, então exclua a parte que contém o número 4 no código abaixo marcado em vermelho. 

Então exclua essa parte e pronto.
Espero ter ajudado vocês a melhorar e/ou personalizar o seu blog.

0 Comment "Criando Rodapé com 4 gadgets no blogger"

Postar um comentário

Comentários São Muito Bem vindos, mas precisamos Ter Conhecimento do que se é comentado então temos algumas dicas para evitar algo indevido, tais dicas seguem-se abaixo:
- Nunca Comente ofensas há ninguém seja autores ou leitores
- Não será moderado Comentários que contenham URLs de seus web sites use OpenID
- Mais dicas e regras acesse nossa política de Comentários