Adicionando gadget de Assinar Feed com Redes Sociais ao blog

Olá leitores do Categoria Blogger! Ainda estou na fase de férias mas como disse, sempre que eu pudesse dava uma "passadinha" aqui no blog. E hoje estarei atendendo o pedido do leitor Silvio que nos pediu - por e-mail - para mostrar como adicionar um gadget de Redes Sociais com as Redes Sociais, igual aqui do blog.

O gadget é bastante útil e não "consume" tanto espeço na barra lateral. Mudei algumas coisas no CSS do gadget para diferenciar o do blog. Seguimos o tutorial.

1. Acesse o painel de controle do seu blog e clique no menu Modelo. Clique no botão Editar HTML e pressione o botão Ctrl+F para abrir a janela Localizador do navegador, após isso, procure pela seguinte linha.

]]></b:skin>

2. Copie o código abaixo e cole-o acima da linha encontrada no passo anterior. Se desejar, faça modificações necessárias.

/* ----- Newsletter ----- */
.input-rss {
padding: 5px;
}
.input-rss {
font-family: Segoe UI;
border: 1px solid #999;
padding: 5px;
margin: 0px 10px 0px 0px;
max-width: 159px;
min-width: 159px;
font-size: 13px;
font-weight: normal;
}
.input-rss:focus {
border: 1px solid #222;
}
.submit-rss {
font-family: Segoe UI Semibold, Segoe UI;
font-size: 13px;
font-weight: normal;
margin:0px;
cursor:pointer;
}
.submit-rss {
color:#FFF;
background: #094AB2;
border: 0px solid transparent;
text-decoration:none;
margin: 10px 0px 0px;
padding: 4px 10px;
outline:0px solid #FFFFFF;
}
.submit-rss:visited {
color:#FFF;
background: #094AB2;
border: 0px solid transparent;
text-decoration:none;
margin: 10px 0px 0px;
padding: 4px 10px;
outline:0px solid #FFFFFF;
}
.submit-rss:hover {
background: #07419D;
text-decoration: none;
}
.submit-rss:active {
background: #212121;text-decoration:none;}
.text-rss {
font-family: Segoe UI;
font-size: 13px;
font-weight: normal;
background:#FFFFFF url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgewJxOLHHfJlQivrELbkh4nA-veVp6aUitGmFHpr0W095rYcHaxzen5zQefuzTEB7tRcMZpuWJNkgRjKCG_DE5xM2w_OfoooDEYMmUdp4V0geFm-CCScw-O1p5l0hW70WcLQWpYnC1yooR/s16/1347299743_021.png') no-repeat left top;
padding:1px 0px 10px 20px;
}
table.rss {
background:#FFFFFF;
border:1px solid #FFFFFF;
padding:0px;margin:0px;
}
.mais-infor {
font:normal bold 12px Arial;
float:right;
padding:0px;
margin:0px;
color:#3F91C3;
text-decoration:none;
outline:0px solid #FFFFFF;
}
/* ----- Redes Socias ----- */
div.sidebar-social-gadget {text-align:center;}
div.sidebar-social-gadget img {width: 60px;height:60px;opacity:1;-webkit-transition: 0.2s all;
-moz-transition: 0.2s all;
-ms-transition: 0.2s all;
-o-transition: 0.2s all;
transition: 0.2s all;}
div.sidebar-social-gadget img:hover {width: 60px;height:60px;opacity:0.8;-webkit-transition: 0.2s all;
-moz-transition: 0.2s all;
-ms-transition: 0.2s all;
-o-transition: 0.2s all;
transition: 0.2s all;}

3. Clique em Visualizar e se estiver tudo certo, clique em Salvar modelo.

4. Acesse o menu Layout de seu modelo e clique em Adicionar um gadget. Na nova janela, escolha a opção HTML/JavaScript.

5. Dê um título ao gadget e na opção Conteúdo, cole o código a seguir. Lembre-se de fazer as modificações destacadas.

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME-DO-SEU-FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><span class="text-rss">Informe o e-mail:</span><input id="input-rss" placeholder="Digite seu email..." class="input-rss" type="text" name="email" /><input type="hidden" value="NOME-DO-SEU-FEED" name="uri" /><input type="hidden" name="loc" value="pt_BR" /><input class="submit-rss" type="submit" value="Assinar" /><br /></form><div id="borda"></div><div class="sidebar-social-gadget" oncontextmenu="return false" ondragstart="return false"><a href="http://twitter.com/#!/PERFIL-DO-TWITTER" target="_blank" title="Siga no Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrNJDH1aF8dVZyLXCWN3nmx-sLm__72ZlkGWC9A5FKkxQ6KgI5w5g8QDKy2_8r0O5F7NgRMH_WJT8ge_3I_4IO2vZosCvaQvSLj3MSMUnGD2kg3gIymNHuD97yJZsKuBo_4huX_rP0wHB/s512/Twitter-Bird-Metro.PNG" border="0" alt="Twitter" /></a> <a href="http://www.facebook.com/PERFIL-DO-FACEBOOK" target="_blank" title="Curta no Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgig1Jd4enTuGAkVe9idJx-bafqhlkRODftL4kP0nehXuNlZASl_0hiNpPLtP4duRfqZ2SwD2Okpfh5ak4OpaEnHoEi6w9lIpUoJ1q3kcL54uxgWleEv7KI89H9yER4IysBACE7SF_GrBNE/s512/Facebook-F-Metro.PNG" border="0" alt="Facebook"/></a> <a href="http://www.youtube.com/user/PERFIL-DO-YOUTUBE" target="_blank" title="Inscreva-se no YouTube"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZj7taJR_PvOeSO7dxtv7D5XtYqRmVReQBIX8wHzttOoivLJE5Mux47xXUMdiii61wlljuudQHgbTZgkIMh5hZEFiD9m6oI3Gr3_P3_-8_83Kn2LHBXz6PiAp79adXvqn86ko5elDZqwLP/s512/Youtube-Metro.PNG" border="0" alt="YouTube" /></a>
<a href="https://plus.google.com/PERFIL-DO-GOOGLEPLUS"  target="_blank" title="Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LmtUlsV0FVjwpTSKQ7rxvaFSwN65SD3VrY3HzZzEtd_VoCzMKWTIcHzw5XjOQjvv_2JUnsZ8r4zbrvgoGKlRMZ9XYhVwR83UvI8nNHsNyZPIO5svXuiyIXPIJVkhOKe6Axz6LEXMMriK/s512/Google%252B-Metro.PNG" border="0" alt="Google+" /></a></div>

Nas partes destacadas em negrito, adicione o nome do seu Feed. Nas partes destacadas de vermelho, adicione os links das redes sociais.

6. Salve as informações e clique em Salvar organizações.