Gadget menu de ícones sociais para Blog
Autor: Julio | Publicado: 2010-12-08T13:58:00-08:00

Nossa Avaliação: Plataforma:DicasDescrição:Nunca é demais pensar em formas de disponibilizar seus contatos em redes-sociais para ajudar na fidelização de seu público leitor. Os ícones em forma de menu são importantes para compor o layout do blog, são visualmente agradáveis e as pessoas os reconhecem facilmente. Vou mostrar como montar um menu bem simples e prático para qualquer blog, um gadget muito elegante.Como adicionar o Gadget em seu blog.Parte 1: Adicionando o CSS.A primeira coisa a fazer é instalar o código que faz tudo funcionar. Para isso, abra o painel do Blogger, clique no menu "Layout" (Design) ~> "Editar HTML" e procure pela seguinte linha no código fonte:]]>Imediatamente ANTES disso, cole o seguinte trecho, sem mudar nada:/* subscribe widget */.subscribe_icons {     width:286px;     height:auto;     margin:0px auto; } .subscribe_icons li {     display:inline;     float:left;     margin:0px 2px 5px 2px;     width:52px;     text-align:center;     font-size:11px; } .subscribe_icons a {     display:block;     padding:40px 0px 2px;     -webkit-transition:all .2s ease-out;     -moz-transition:all .2s ease-out;     color:#444 !important; } .subscribe_icons a:hover {     color:#369 !important;     text-decoration:none;     -moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35);     -webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); } .subscribe_icons .subscribe_buzz a {     background:url(http://img684.imageshack.us/img684/4727/iconbuzzronydesignbomde.png) center top no-repeat; } .subscribe_icons .subscribe_twitter a {     background:url(http://img841.imageshack.us/img841/9508/icontwitterronydesignbo.png) center top no-repeat; } .subscribe_icons .subscribe_facebook a {     background:url(http://img21.imageshack.us/img21/5981/iconfacebookronydesignb.png) center top no-repeat; } .subscribe_icons .subscribe_rss a {     background:url(http://img203.imageshack.us/img203/544/iconrssronydesignbomdes.png) center top no-repeat; } .subscribe_icons .subscribe_email a {     background:url(http://img521.imageshack.us/img521/5460/iconemailronydesignbomd.png) center top no-repeat; }Salve o modelo.Isso não mudará nada em seu blog e não afetará nada. Serve para serem chamados pelo código HTML do menu que vamos criar. Então esse é o próximo passo.Passo 2: Adicionando o Gadget na Sidebar.agora vamos adicionar o gadget na barra lateral do seu blog. Do mesmo modo que você adiciona qualquer outro é assim que faremos aqui. Abra o menu "Layout" (Design) ~> "Elementos da página" e clique em "Adicionar uma gadget". Então escolha a opção "HTML/Javascript". Se não sabe todo esse passo, veja o seguinte tutorial: Onde Colar o Código HTML no BloggerDentro desse elemento cole o seguinte trecho fazendo apenas as mudanças indicadas:  LINK_PERFIL_GOOGLE_BUZZ" rel="nofollow" target="_blank">Buzz  SEU_NICK" rel="nofollow" target="_blank">Twitter  LINK_PERFIL_FACEBOOK" rel="nofollow" target="_blank">Facebook  URL_ASSINAR_FEED" rel="nofollow" target="_blank">FEED  URL_PAGINA_CONTATO_do_BLOG" rel="nofollow" target="_blank">ContatoOnde está marcado de vermelho, coloque suas informações para o funcionamento dos links. Salve e mova o gadget para onde for mais conveniente. Recomendo o início da sidebar, perto do mecanismo de pesquisa do seu blog.Depois disso é só abrir seu blog e ver funcionando.