Como centralizar qualquer gadget na sidebar do blog?

Não é de hoje que me perguntam isso:
Como centralizar qualquer gadget na sidebar do blog?
Tempos atrás eu ensinei como centralizar imagens na sidebar, mas recentemente descobri um jeito mais limpo e mais simples de centralizar qualquer widget na sidebar, inclusive imagens.
Vamos aprender?
Fica tranquilo que é bem simples, tá?

O que eu posso centralizar?

Todo e qualquer elemento de página, seja gadget Imagem, gadget HTML/JAVASCRIPT, gadget de texto, o que desejar!

Para começar você precisa identificar o widget que deseja centralizar.
Vamos supor que seja o box com os seguidores do Google Followers.
O box precisa, claro, já estar instalado em seu blog.
Aí vá ao Modelo de seu blog e clique na aba Editar HTML.
A seguir clique na setinha do item Ir para um widget.
Vai expandir a lista com todos os elementos de página que há em seu blog.
Localize o que deseja centralizar (no caso do meu exemplo, Plus Followers) e você vai achar o código dele.

Em geral esse é o código padrão do widget do Google+:

<b:widget id='PlusFollowers1' locked='false' title='Google+ Followers' type='PlusFollowers' version='1' visible='true'>
    <b:includable id='main'>
        <b:if cond='data:title != &quot;&quot;'>
          <h2 class='title' id='plus'>
            <data:title/>
          </h2>
        </b:if><div style='text-align:center;'>
        <div class='widget-content'>
          <b:if cond='data:profileUrl != &quot;&quot;'>
            <div class='g-plus' data-action='followers' data-source='blogger:blog:followers' expr:data-height='data:height' expr:data-href='data:profileUrl' expr:data-theme='data:theme' expr:data-width='data:width'/>
            <script type='text/javascript'>
              window.___gcfg = {&#39;lang&#39;: &#39;<data:language/>&#39;};
            </script>
          </b:if>
      </div></div>
      </b:includable>
  </b:widget>


Preste atenção ao que marquei em azul pois é ali que você vai colar a linha de código (que destaquei em vermelho) que centralizará o seu widget.

Este é o código:

<div style='text-align:center;'>
*Para copiar selecione o conteúdo da textárea. Precisa ser no navegador Chrome, ok?

E você fecha a div, claro, com </div>

O segredo é saber onde inserir, percebe?
Você precisa inserir o código para centralizar sempre após o trecho que define o título do elemento.
O título é definido pelo trecho <h2 class='title'><data:title/></h2></b:if>


Vou dar outro exemplo, o Tradutor do Blogger.

Esse é o código padrão:

<b:widget id='Translate1' locked='false' title='Translate' type='Translate' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if><div style='text-align:center;'>
  <div id='google_translate_element'/>
  <script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: &#39;<data:pageLanguage/>&#39;,
        autoDisplay: &#39;true&#39;,
        layout: google.translate.TranslateElement.InlineLayout.<data:layout/>
      }, &#39;google_translate_element&#39;);
    }
  </script>
  <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
      <b:include name='quickedit'/></div>
</b:includable>
  </b:widget>

Percebe onde marquei em vermelho?
Abro a div que centraliza após o término da linha que define o título do widget e fecho a div após o fechamento da div que mostra o ícone de editar o gadget.


Para facilitar bem o entendimento gravei um vídeo.
Clique para ver, na prática, como é simples.



E após assistir aproveite para se inscrever no canal de tutoriais do blog.

Quero reativar as vídeos-aulas e ao se inscrever você recebe em primeira mão tudo que eu publicar no Youtube!

Se tiver qualquer pergunta deixe nos comentários e eu respondo se souber, tá?

Gostou?
Aproveite para deixar seu comentário, ou curtir o post.
Também ajuda muito se você compartilhar o tutorial no G+.
Muito obrigada!