Adicionar widget Cartão de Visita do LinkedIn no blog

O LinkedIn é uma das maiores redes sociais do momento com mais de 150 milhões de cadastrados e é com soberania o maior site de relacionamento para profissionais do mundo. No Brasil o site já conta com cerca de 6,8 milhões de usuários, sendo o 4º país com maior número de usuários.

Vamos ver agora como adicionar o Cartão de Visita e o Plugin para perfis do LinkedIn no blog.
Usando o vCard ou Plugin para perfil você dará ao seu leitor uma maneira intuitiva e prática para ele aprender mais sobre você ou até mesmo fornecer um contexto social profissional para o conteúdo do seu blog ou site.

Colocando o widget Cartão de Visita

Para colocar este modelo na  sidebar (lateral) do seu blog, basta copiar e colar o seguinte código, modificando apenas o que for indicado. Para isso, adicione um gadget do tipo “HTML/JavaScrit” se você usa o Blogger ou caso use o WordPress, dentro de um widget do tipo “Texto”:

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="LinkPerfilPúblico" data-format="inline"></script>

Para adicionar o Cartão de Visita sem mostrar as conexões em comum, coloque o seguinte código:

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="LinkPerfilPúblico" data-format="inline" data-related="false"></script>

Colocando o widget Plugin do Perfil

Este Plugin é o ícone do LinkedIn mais o seu nome de usuário. O código tem 3 opções diferentes de uso:

1. Efeito hover: Quando passa o mouse em cima do nome, o script gera o Cartão de Visita.
2. Efeito click: Quando clica no nome, o script gera o Cartão de Visita.
3. Efeito hover ou click sem mostrar conexões.

• Efeito hover

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="LinkPerfilPúblico" data-format="hover" data-text="USUÁRIO"></script>

• Efeito click

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="LinkPerfilPúblico" data-format="click" data-text="USUÁRIO"></script>

• Sem mostrar conexões

Adicione o código data-related=”false” APÓS data-text=”USUÁRIO”

Como achar o Link do meu Perfil Público?

Basta ter feito login no LinkedIn e acessar www.linkedin.com/profile/edit. Após isso, veja o tópico “Perfil público“, copie o link e substitua no código por “LinkPerfilPúblico.” Salve e veja como ficou 

Widgets com ícones para redes sociais

A última moda em blogs, são os ícones para as redes sociais. O principal objetivo é incentivar os visitantes a seguirem no Twitter, Orkut, Facebook e a assinarem os feeds do blog.  

Pra ajudá-los, criei dois gadgets baseados em CSS, super simples de serem implementados no Blogger.

Recomendo fortemente que as imagens dos ícones sejam enviadas para a conta do Picasa de vocês e que as URLs dessas imagens sejam substituídas.

Widget 1 – Twitter, Feeds e Facebook

Vá no HTML do template, dê um Crtl+F com o teclado e procure por ]]></b:skin> . 

Cole antes dessa tag o seguinte código:

/* SOCIAL MEDIA 

----------------------------------------------- */ 

#socialmedia{background:#F6F8F8;border:1px solid #DBE2E0;padding:10px 5px 15px 10px; margin: 5px;} 

#socialmedia:hover{border:1px solid #90C2D7;} 

#socialmedia a{color:#666666;text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif} 

#socialmedia a:hover{color:#3c88b2;text-decoration:underline} 

#socialmedia img{vertical-align:middle;margin-right:5px;}

Salve o template. Vá nos elementos de página e clique em adicionar gadget. Escolha HTML/javascript e cole este outro código: 

<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BEKq7aTI/AAAAAAAAEUw/Lb9JMwUAiZ8/socialconnecttwitter.png' style='width: 32px; height: 32px; float:left;'/> 

<a href='URL DO TWITTER'>Siga no Twitter</a> 

</div> 

<div id='socialmedia'><img alt='' src='https://lh5.googleusercontent.com/_mcq01yDJ2uY/TW630L9WcaI/AAAAAAAAEUM/iLypEEa1b5Y/socialconnectrss.png' style='width: 32px; height: 32px; float:left;'/> 

<a href='URL DOS FEEDS'>Assine os feeds</a> 

</div> 

<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BI34MoHI/AAAAAAAAEU0/GuFjmmcm87w/socialconnectfacebook.png' style='width: 32px; height: 32px; float:left;'/> 

<a href='URL DO FACEBOOK'>Curta no Facebook</a> 

</div>

• Em URL DO TWITTER, escreva o endereço do seu Twitter
• Em URL DO FEED, coloque o endereço dos feeds do blog
• Em URL DO FACEBOOK, coloque o endereço do seu perfil ou da página de fãs

Widegt 2 - Feeds, Twitter, YouTube, Orkut e Facebook

   

No painel do Blogger, clique em design > adicionar gadget>HTML/javascript.

Cole o código abaixo, fazendo as respectivas alterações (em vermelho)

<div style="margin: 5px; padding: 10px;"><a

href="ENDEREÇO DO FEED"><img

style="border: 0px solid ; width: 48px; height: 48px; float: left;"

alt=""

src="http://lh5.ggpht.com/_dAGEULh1_1g/THwD-xP5n9I/AAAAAAAAEBk/1DE1CA0UtCA/rss.png"></a><a

href="ENDEREÇO DO TWITTER"><img

style="border: 0px solid ; padding-left: 5px; width: 48px; height: 48px;"

alt=""

src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-5SoTTI/AAAAAAAAEBo/Yh2jRrtkOeo/twitter.png"></a><a

href="ENDEREÇO DO YOUTUBE"><img

style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"

alt=""

src="http://lh3.ggpht.com/_dAGEULh1_1g/THwD-4XjHKI/AAAAAAAAEBs/waG0ImvEsQI/youtube.png"></a><a

href="ENDEREÇO DO ORKUT"><img

style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"

alt=""

src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-3vEZVI/AAAAAAAAEBg/jq-RSB5gXBc/orkut.png"></a><a

href="ENDEREÇO DO FACEBOOK"><img

style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"

alt=""

src="http://lh6.ggpht.com/_dAGEULh1_1g/THwD-vZ7bDI/AAAAAAAAEBc/4fHoPnWmq8M/facebook.png"></a><br></div>

 

Tem coisas no Blogger que são simplesmente inexplicáveis. Até outro dia, bastava colar a URL da imagem no local indicado e pronto. Atualmente, notei que as imagens hospedadas no Picasa Web não estavam aparecendo mais. Depois de muita investigação, descobri que – sabe-se lá porque – o Blogger estava mudando as URLs por conta própria. A solução é ainda mais bizarra rs Depois de colar o código no gadget HTML/Javascrip, é preciso clicar em “Formato Rich Text” para que as imagens funcionem. Prefiro nem comentar.

Como colocar busca do Google no Blogger

Muitos usuários do Blogger vêm se queixando que a caixa de busca padrão – gadget “caixa de pesquisa” – não é eficiente, pois não mostra todas as postagens. Esse problema já é antigo e, infelizmente, ainda não foi resolvido. 

No lugar do gadget “caixa de pesquisa”, é possível usarmos outras opções de caixa de busca do Google:

1. Caixa de busca do Google Adsense;
2. Caixa de busca personalizada do Google;

Como colocar a busca do Google AdSense

A caixa de busca do AdSense é, de longe, a mais eficiente e ainda pode render uma graninha. Para colocá-la em seu blog, é preciso ser um editor cadastrado.  

1. Clique na aba “configurações do AdSense”
2. Escolha a opção “AdSense para pesquisas”
3. Em “tipo de pesquisa”, escolha “apenas os sites que eu selecionar”
4. Em “sites selecionados”, digite o endereço do seu blog
5. Clique em “continuar” e configure o tamanho da caixa
6. Clique em “continuar” e copie o código
7. No Blogger, cole no gadget HTML/Javascript

Como colocar a busca personalizada do Google

A caixa de busca personalizada do Google também é muito boa.

1. Acesse http://www.google.com/cse/
2. Faça login com sua senha do Google
3. Clique em “criar mecanismo de busca personalizado”
4. Preencha todos os campos
5. Em “site a pesquisar”, digite o endereço do seu blog
6. Clique em avançar e escolha um modelo
7. Copie o código
8. No Blogger, cole no gadget HTML/Javascript

Inserindo Tradutor no Blogger

Olá blogueiros,

Sabemos que a internet é um ambiente totalmente globalizado, e com isso, muitas das coisas que postamos pode ser visualizada por milhares de pessoas de qualquer lugar do mundo. Mas às vezes, outras pessoas de outros países com idioma diferente do nosso (português), não tem como fazer a leitura do conteúdo do blog. E foi pensando nisso que hoje resolvi deixar algumas dicas de como inserir um Tradutor em seus blogs. Estão prontos?

Para fazer isso, existem vários tipos de tradutores que podemos inserir. Vejam 2 deles:

1º Google Tradutor:

Este é um tradutor simples fornecido pelo Google para sites, e pode ser facilmente manuseado. Veja na imagem:

Visite (http://translate.google.com.br/translate_tools) para ir ao site e inserir o gatget.

Depois de inserido no blog, ficará assim:

2º Tradutor bandeirinhas:

Esse tradutor também é excelente para blogs, pois ele tem uma visualização bem mais dinâmica dos idiomas através das  bandeirinhas contidas nele. Vejam na imagem:

Para obter o código HTML desse tradutor, clique no link abaixo, e copie o todo o código hospedado no Google Docs:

Código HTML - Tradutor com bandeiras

Para inserir esse código HTML, é preciso acessar o Painel (www.blogger.com), procure por Layout> Adicione o gatget HTML/JavaScript e cole o código fornecido.

Espero que tenham gostado,

Abraço,

Gadget Redes Sociais no blog

Um Gadgets de Redes Sociais é a maneira mais fácil de fazer com que seus leitores encontre você em outros meios de contato, ou até mesmo acompanhar as maiores novidades que acontece em seu blog.  Já pensou em colocar as redes sociais que você participa em seu blog? É fácil!

1 - Acesse o painel do Blogger;
2 - Clique na guia "Layout" e em seguida "Adicionar um gadget".
3 - Adicione o gadget "HTML/JavaScript" e insira o código informado abaixo:

<a href='LINK DO PERFIL DO ORKUT OU COMUNIDADE' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Orkut'><img alt='Orkut' src='http://icons.iconarchive.com/icons/danleech/simple/48/orkut-icon.png'style='border:0; width:45px; height:45px;'/></a>     <a href='LINK DO TWITTER' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Twitter'><img alt='Twitter' src='http://icons.iconarchive.com/icons/danleech/simple/48/twitter-icon.png' style='border:0; width:45px; height:45px;'/></a>     <a href='LINK DO FACEBOOK' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Facebook'><img alt='Facebook' src='http://icons.iconarchive.com/icons/danleech/simple/48/facebook-icon.png'style='border:0; width:45px; height:45px;'/></a> <a href='LINK DO GOOGLE+' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Google +'><img alt='Google +' src='http://icons.iconarchive.com/icons/danleech/simple/48/google-plus-icon.png' style='border:0; width:45px; height:45px;'/></a>   

Adicione o link de sua rede social em: LINK DO PERFIL DO ORKUT OU COMUNIDADE, LINK DO TWITTER, LINK DO FACEBOOK e LINK DO GOOGLE+

Link destacado em Verde - Caso você queira mudar a imagem. Existe vários sites de icon, eu conheço o http://www.iconarchive.com/

Prontinho! Agora todos podem te achar facilmente nas redes sociais! :)

BOTÕES SHARETHIS COMPARTILHAR POST NAS REDES SOCIAIS

Botões de compartilhar posts nas redes sociais é uma das coisas mais importante para aumentar o tráfego em seu blog. Ao adicionar esses botões de compartilhar posts nas redes sociais em cada postagem do seu blog aumentará a beleza de suas postagens. Hoje eu vou lhe ensinar como adicionar esses botões de compartilhar posts nas redes sociais em cada postagem do seu blog. Estes botões de compartilhar posts nas redes sociais inclui facebook share, Twitter tweet, com o botão Delicious. A instalação deste widget é extremamente fácil de modo que você pode adicioná-lo facilmente.

Como adicionar botões Sharethis compartilhar posts nas redes sociais

1. Acesso o Painel do Blogger e navegue até Modelo > Editar HTML

2. Clique em: "Expandir modelos de widgets”

3. Encontre o seguinte código (use CTRL + F para encontrar o código)

<div class='post-footer'>

Se você encontrar 2 códigos iguais, procurar o primeiro e cole o código abaixo logo abaixo/depois.

<!-- Sharing Button Code BEGIN -->
<span class='st_facebook_hcount' displayText='Facebook'></span><span class='st_twitter_hcount' displayText='Tweet'></span><span class='st_delicious_hcount' displayText='Delicious'></span><span class='st_sharethis_hcount' displayText='ShareThis'></span>
<script type="text/javascript">var switchTo5x=false;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'f3e22f37-f1d3-41f4-adfe-e9667347c91e'});</script>
<!-- Sharing Button Code END –>

Agora clique em salvar modelo

Prontinho.

Seu status do MSN no Blog

Essa foi uma dica q achei no Dicas para Blog. Lá tem algumas coisas legais.

Eu estava procurando mesmo como disponibilizar para meus visitantes quando estou on-line no MSN. Isso é útil pra quem quer manter um contato mais direto com seus visitantes e quer se colocar à disposição para responder comentários em tempo real. E, claro, é uma boa forma de ter um retorno de seus visitantes mais constantes, um bom contato e uma boa maneira de fazer amigos.

Entre nesse link: http://settings.messenger.live.com/Applications/WebSettings.aspx

Então, a primeira coisa é ter uma conta válida para o Messenger, pois vc será direcionado para o site deles. Lá defina primeiro as Configurações de Web, onde se permite liberar seu status. Feito isso, passe para o próximo passo q é criar o código HTML a ser colado no seu blog.

Essa é a parte legal. Tem algumas opções bem úteis e tudo é bem simples de fazer. O próprio site vai criar o código de acordo com as opções q vc escolher e tudo sendo visualizado na hora, o q garante q vc saberá o resultado antes de aplicar na janela de seu blog. Tem pra todo gosto, desde um simples ícone do bonequinho verde, até a uma caixa de diálogo onde as pessoas (mesmo as q não estão na sua lista) podem  teclar com vc. Vale a pena conferir essa ferramenta. Além, claro, de poder configurar cores e o tamanho adequado para o visual do seu blog.

Depois de criar como vc quer usar o serviço, copie (Ctrl+C) o código e cole (Ctrl+V) num novo Gadget do tipo “HTML/JavaScript” – que é adequado para esse tipo de ferramenta. Clique em “Salvar” e veja como ficou.

ELEGANTE MENU CSS3 LATERAL VERTICAL PARA BLOG

Provavelmente você já viu muitos sites com um menu de navegação vertical fixo para as suas páginas importantes. Neste artigo eu estarei ensinando como colocar um elegante menu css3 lateral vertical para blogs do Blogger.

Este menu vem com 5 ícones. Os 5 ícones contém Home, About us, Arquivo, Marcadores e contato. Mas você pode mudar esses ícones e texto para o que você quiser. 

Veja o exemplo abaixo:



Este menu é feito completamente usando CSS3 com apenas uma imagem e pode ser facilmente instalado. Todo o crédito vai para Tutorialzine.

MENU LAVALAMP COM CSS3 E JQUERY

Eu compartilhei vários menus aqui no blogger e sites até agora. O primeiro foi um Puro CSS3 menu para blogger e o segundo foi Menu horizontal com submenu e caixa de busca e o terceiro foi um Elegante menu css3 lateral vertical para blog e o quarto que foi o Menu multi level com CSS3.

Desta vez eu quero compartilhar com vocês um incrível menu Lavalamp com CSS3 e jQuery; como mencionado no título, ele funciona com CSS3 e jQuery. Você pode usar esse menu em 6 cores mudando apenas uma palavra no código HTML. Este menu foi desenhado por Insidesigns e eu fiz alguns ajustes para funcionar perfeitamente com qualquer blog do blogger.

Demonstração

Agora vamos ao tutorial e ver como adicionar esse menu Lavalamp com CSS3 e jQuery no blogger.

COMO COLOCAR O BOTÃO DE SUBIR E DESCER NO BLOG

Colocar o botão de Subir e Descer no seu blog facilita o aceso ao conteúdo da página, principalmente quando na página principal há muitas postagens ou quando um tem muitos comentários.

Vamos ver como colocar o botão de Subir e Descer em seu blog. É bem fácil porque é colocado através de um Gadget.

PERSONALIZAR O GADGET LINKWITHIN

LinkWithin é um gadget que mostra as postagens relacionadas com uma imagem em miniatura, e ainda que não é um gadget nada novo, muitos não animam a usá-lo por sua falta de personalização.

Portanto nessa postagem vamos ver…

GADGET DE SUBSCRIÇÃO RSS/FEEDS

Na postagem de hoje, quero lhes apresentar um lindo gadget para subscrição de RSS/Feeds com opção de seguir no Twitter e Facebook. Totalmente personalizável com efeito elegante que muda de cor quando o mouse é posicionado sobre ele.

Veja o exemplo abaixo:

veja aqui o gadget subscrição de RSS/Feeds instalado nesse blog de testes: DEMO

ÍCONES SOCIAIS COM EFEITO DE OPACIDADE

A dica que eu quero compartilhar como vocês hoje são Ícones Sociais; são os chamados"Social Icons" e como o titulo já diz vem com um charmoso efeito de opacidade alcançado através de CSS.

O resultado final será uma bela caixa de Subscrição com efeito de opacidade .

DIVIDIR HEADER EM 2 COLUNAS NO DESIGNER DE MODELO

Dividir o cabeçalho do blog serve para colocar ao lado do título do blog algum gadget como um anuncio, algum banner, uma caixa de busca, etc.
O proceso que veremos é para os templates baseados no template Mínima e para os que são do Designer de modelo do Blogger.

CAIXA DE AVISO PARA BLOG COM OPÇÃO FECHAR

Gostaria de colocar um aviso no seu blog e não sabe como? Hoje eu vou ensinar como colocar uma caixa de aviso no blog. Está caixa de avisos tem muitas utilidades. É um modelo simples feito CSS3 com opção de personalizar o tamanho da caixa, cor de fundo, bordas, fontes e etc.

GADGET TOP COMENTARISTAS COM AVATAR

Este gadget mostra as pessoas que mais comentaram em seu blog. É uma boa solução para aumentar os comentários em nosso blog.

PURO CSS3 MENU PARA BLOGGER

Hoje, eu gostaria de mostrar a você um menu para blogger feito com puro css3 projetado utilizando as mais recentes técnicas de CSS3 e sem o uso de JavaScript ou imagens.

Este menu tem alguns efeitos agradáveis ​​animados, como quando você passa o mouse sobre o menu você verá um efeito batimento cardíaco com animação tipo voando. Este menu é compatível com os mais recentes navegadores modernos é com CSS3 suporte.

Neste tutorial vou mostrar como você pode adicionar este belo menu voador no seu blog, simplesmente seguindo os passos abaixo.

COMENTÁRIOS RECENTES COM ESTILO WINDOWS 8

O Windows 8 foi lançado oficialmente no final de Outubro e virou uma febre. Eu particularmente adorei o Windows 8 pela beleza do colorido e a simplicidade. Devido a essa febre do Windows 8, resolvi compartilhar com vocês um gadget de comentários recentes com estilo Windows 8.

GADGET POSTAGENS POPULARES COLORIDO

Recentemente redesenhei o gadget de postagens populares do meu blog e eu adicionei uma simpática forma de barras de cores, a pedido de um leitor do blog, hoje eu gostaria de compartilhar o truque que eu apliquei.

BOTÕES TRIANGULARES PARA BLOGS

Desta vez eu quero compartilhar com vocês um pacote de botões triangulares; simples e elegantes.