Widget Autor Convidado
Widget caixa assinar feed e redes sociais simples
Olá pessoal, meu nome é Denis Gomez e sou o novo autor do Mundo Blogger, por aqui falarei bastante sobre Blogger e redes sociais!
Como primeiro artigo fiz um widget para blogs no Blogger com uma caixa para assinar o Feed do blog e abaixo icones de redes sociais. Espero que gostem dele e do meu trabalho por aqui.
Bem, vamos ao tutorial:
Primeiro vamos adicionar o CSS ao template, abra o editor HTML e procure por ]]></b:skin> .
Acima dele cole o seguinte código:
#CaixaBuscar {
margin:10px;}
#campo {
float: left;width: 170px;padding-left: 8px;height: 29px;line-height: 18px;font-family: arial, sans-serif;
font-size: 14px;color: #333;background: white;border: solid 1px #D9D9D9;border-top: solid 1px silver;
border-right: none;outline: none;
}
#campo-apagar {
float:left;width:16px;height:29px;
line-height:27px;margin-right:15px;padding:0 10px 0 10px;font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;font-size:22px;
background: #fff;border:solid 1px #d9d9d9;border-top:solid 1px #c0c0c0;border-left:none;
}
#campo-apagar #x {
color:#A1B9ED;cursor:pointer;display:none;
}
#campo-apagar #x:hover {
color:#36c;
}
#buscar:active {
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
#buscar {
cursor:pointer;width:70px;height: 31px;line-height:0;font-size:0;text-indent:-999px;color: transparent;background: url(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/s1600/ico-search.png) no-repeat #4d90fe center;border: 1px solid #3079ED;-moz-border-radius: 2px;-webkit-border-radius: 2px;
}
#buscar:hover {
background-color: #4088FD;border: 1px solid #2F5BB7;
}
.fclear {clear:both}
#campo-de-texto {
width: 162px;padding: 8px;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;-moz-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;border: 1px solid #CCC;font-size: 12px;height: 11px;border-image: initial;float: left;margin-right: 6px;
}
#input-rss:focus {
border: 1px solid gray;outline: none;
}
#enviar {
cursor: pointer;margin-top: -3px;height: 29px;color: white !important;border: 1px solid #000000;color: white;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;padding: -1px;cursor: pointer;float: left;line-height: 2px;text-shadow: 1px 1px 1px #000000;
filter: dropshadow(color=#117aab, offx=1, offy=1);border-image: initial;background: #494949; /* Old browsers */background: -moz-linear-gradient(top, #494949 1%, #333333 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#494949), color-stop(100%,#333333)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #494949 1%,#333333 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #494949 1%,#333333 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #494949 1%,#333333 100%); /* IE10+ */
background: linear-gradient(top, #494949 1%,#333333 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
}
#enviar:hover {background: #494949;}
Feito isso, vá a aba Layout do seu painel e clique em Adicionar um gadget.
Escolha a opção “HTML/JavaScript” e cole o código abaixo:
<center>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nome-do-seu-feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"><input style="display: initial;" id="campo-de-texto" class="campo-de-texto" name="email" type="text" /><input value="NOME-DO-SEU-FEED" name="uri" type="hidden" /><input name="loc" value="pt_BR" type="hidden" /><input id="enviar" class="mais" style="width: 90px;margin-top: 1px;font-size: 15px;" value="ASSINE" type="submit" /></form>
<br />
<a href="URL-FACEBOOK" target="_blank"><img src="http://1.bp.blogspot.com/-e9MZzuwVltU/TwSczsoU5JI/AAAAAAAABpc/m504oDTO-j8/s1600/Facebook.png" border="0" /></a>
<a href="URL-TWITTER" target="_blank"><img src="http://2.bp.blogspot.com/-Tv0TvquX2rM/TwScyyBc5mI/AAAAAAAABpU/cwY45l8pAQ4/s1600/Twitter.png" border="0" /></a>
<a href="URL-GOOGLE-PLUS" target="_blank"><img src="https://lh5.googleusercontent.com/-Y5Ivl2DFt0Q/AAAAAAAAAAI/AAAAAAAAABY/1ryPr7OSL0o/s48-c-k/photo.jpg" border="0" /></a>
<a href="URL-YOUTUBE" target="_blank"><img src="http://2.bp.blogspot.com/-11mruhOIp-0/Tx8Zq0RDbBI/AAAAAAAABtg/60QvnzPYptM/s1600/YouTube.png" border="0" /></a>
<a href="URL-CONTATO" target="_blank"><img src="http://i39.tinypic.com/4dpnk.png" border="0" /></a></center>
Bom, seu widget já esta no blog. Agora você precisa alterar os trechos abaixo pelos seus links, desta forma:
- Troque nome-do-seu-feed por apenas o nome dele! (duas vezes)
- Troque URL-FACEBOOK pelo link da página no Facebook do seu blog.
- Troque URL-TWITTER pelo link do perfil de seu blog no Twitter.
- Troque URL-GOOGLE-PLUS pelo link da página de seu blog no Google Plus.
- Troque URL-YOUTUBE pelo link do canal de seu blog no You Tube.
- Troque URL-CONTATO pelo link da página de contato do seu blog.
É isso, espero que tenham gostado… Até mais pessoal!
Muito bom o post !
Oi eu uso o modelo Minima e eu não acho essa parte ”]]>” no meio do HTML…Eu não procurei bem ou não tem lá mesmo?? E se tem teria como vc me dizer onde está? Porque eu realmente não estou achando.. /:
Oi, desculpe, mas tenho outra dúvida, sempre que posto algo no face referente ao meu blog, a imagem que aparece no face não tem nada a ver com o post, muitas vezes pegam de outros posts ou nada…
se puderem me ajudar, por que ja tentei de tudo que conheço e não consigo configurar essa situação.
Obrigada
Isso é do próprio facebook.
Oi pessoal,
eu acompanho o blog de vocês e acho um trabalho ótimo.
Estou criando negócios na internet, e gostaria de saber se podem me ajudar em como colocar um rss para assinarem a cada final de post, se for possível ne
Agradeço desde já!
PS: trabalho com WP, mas, me adapto bem a códigos html
Não tem nada a ver com o assunto do post, mas no blog de teste que
foi citado tem uma barra na parte de cima do blog, fiquei super interessada, tem algum tutorial sobre como colocar ?
Danny,
Dá uma procurada no indice aqui do MB, no item “Criar e instalar menus”, tem uma lista de tutoriais com diversos menus, é só ver se algum deles te agrada.
O demo do wiget, não tá funcionando. O.o
oie o meu blog e template que eu criei é o feed não aceita codigos xmls
tem como por contadores nas redes, procurei muito por um que mostra os icones com contadores, mais não achei, se não me engano era do sem nome. mais muito bom esse tutorial. =D
Deve ser este tutorial aqui:
Script Contador Twitter+Feed+Posts+Comentários
Esse mesmo, muito obrigado. amo seu blog.
OIEE e se eu não tiver tipo o google plus,oq eu faço??????
Apenas retire a linha abaixo:
<a href=”URL-GOOGLE-PLUS” target=”_blank”><img src=”https://lh5.googleusercontent.com/-Y5Ivl2DFt0Q/AAAAAAAAAAI/AAAAAAAAABY/1ryPr7OSL0o/s48-c-k/photo.jpg” border=”0″ /></a>
😉
Widget caixa assinar feed e redes sociais simples.
Denis meu amigo nem o seu demo esta funcionando,
Troque URL-CONTATO pelo link da página de contato do seu blog.
Eu pergunto como fazer?
– Informe o que digitar em assinar.
grato.
José, o widget está funcionando perfeitamente, porém ele não está ligado à nenhum feed.
Em assinar não é obrigado alterar, lá é o texto que aparece no botão do campo de texto.
Att.
Denis Gomez
ameiiii obrigada
Olá Denis! Parabéns pelo primeiro post!
Gostaria de pedir que fizessem um tutorial dos contadores de redes sociais como o atual do Mundo Blogger. Sei que já tem um ou mais posts com um tutorial desse tipo de widget, porém, o que eu estava querendo mesmo era com o widget do Google Plus, pois não achei-o em nenhum outro blog/site ainda.
Obrigado!
Guto, obrigado pelos parabéns! 🙂
Isso não é dificil de fazer, acho que até semana que vem eu já faço um tutorial desse. É que já tenho dois temas para fazer e vou tentar resolver o problema do Lucas!
UAU. Esse widget é incrível. Mas eu quero pedir um tutorial, se possível, é que eu tentei mudar o template do meu blog e o outro não tinha a opção de Jump Break. Então eu deixei o antigo, mas o antigo não tem colunas nas laterais, apenas na área do rodapé e eu quero colocar uma coluna lateral para que os widgets fiquem mais acessíveis. Será que tem como me ajudarem?
Obrigado Lucas! Quanto ao pedido, vou ver se já tem algo aqui no MB, se não tiver eu vejo se consigo fazer isso e faço um tutorial!
Muito obrigado Denis! 🙂
Muito legal essa caixa. Você sabe se existe algum plugin no WordPress com esse mesmo serviço?
Roberto… Eu não sei, pois eu faço as coisas para Blogger por enquanto. Preciso aprender muito sobre WP ainda :/
Obrigado pelo comentário 🙂
Roberto:
Se o seu tema tiver opção para adicionar widgets na barra lateral, é só vc adicionar o widget de tipo “texto” e incluir este código lá. O código Css, vc inclui no arquivo css do seu tema. Nem precisa de plugin
Muito bom este gadget! Estou animado para começar aqui no MB!
Lol…primeiro post publicado pelo Denis Gomez 🙂
Rsrs, com muito sacrifício mas foi! 🙂