Adicionando gadget de Assinar Feed com Redes Sociais ao blog

Compartilhar:
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://lh6.googleusercontent.com/--86YrL1X6Gg/UE4puUx-sYI/AAAAAAAAE3E/usr9kkeJpHE/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://lh6.googleusercontent.com/-6YcFWEyGRco/UCvKSQiF2OI/AAAAAAAAELo/PZKRirRzNUw/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://lh4.googleusercontent.com/-V4e3N5_kyaw/UCvKRTTnLWI/AAAAAAAAELQ/gS_KS7YmG9M/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://lh5.googleusercontent.com/-BPRt6QiPX5U/UCvKSkxDUqI/AAAAAAAAEL0/PPaqePANW_k/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://lh6.googleusercontent.com/-hJNJcJP1M2I/UCvKRiPgcKI/AAAAAAAAELU/ALH6H98TKQw/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.
► Postagens Relacionadas:

3 Comentários

Herlan Santos disse...

Olá João.


Excelente gadget, fico à espera de mais conteúdos seus.
Pois seu blog possui muita qualidade.


Abraços!

29 de outubro de 2012 às 00:11
João Almeida disse...

Obrigado Herlan! Volte sempre!

29 de outubro de 2012 às 13:36
Bruno Bezerra disse...

Excelente gadget João. Muito organizado e combina com qualquer estrutura de qualquer blog, todos podem editá-lo!, Bela matéria!,
Abraços!.

24 de dezembro de 2013 às 15:21

Postar um comentário