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 

WIDGET BARRA DE COMPARTILHAMENTO EXPANSÍVEL COM JQUERY

Olá Pessoal, hoje vou ensinar a vocês como adicionar em seu blog um linda barra de compartilhamento  com efeito mouse hover. Essa barra é simplesmente incrível e tem visual bem bacana e contém botões de compartilhamento para as principais redes sociais. Oferecer botões de compartilhamento para seus leitores é extremamente importante pois pode ajudar a aumentar o numero de visitas. O código é de fácil instalação em seu blog, basta seguir o tutorial com atenção.

Demonstração

Primeiramente você deve adicionar um código no Html do seu blog, para isso acesse o Painel do Blogger, clique na guia Modelo e em Editar Html e procure pela tag </head>e cole o código a seguir acima dessa tag.

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Vá em modelo ► Fazer backup/Restaurar ► Fazer download do modelo completo.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;pt-BR&#39;} </script>Clique em visualizar para ver se esta tudo ok e salve. 

Agora vá na guia Layout e clique em Adicionar Gadget do tipo Html/JavaScript e cole o código a seguir sem fazer alteração nenhuma e salve.

<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".pbslidebox").hover(function () {
            jQuery(this).stop().animate({
                left: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                left: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .pbslidebox {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqHK4mEhPqrfDCN5JfGjSze-QC0sVRa8919WFM8A0rMbnug1vF6fC1H3FTcah1xzBFJ0RGvC5oyqvPQ1HpeJ_5FVt1JAT5MuGXS_qgOYX1a79xL1Fn2KIom8OorCbrBpUcWxHatSHrMj7E/s102/barra-compartilhamento-expans%25C3%25ADvel.png") no-repeat scroll right top transparent !important;
        display: block;
        float: left;
        height: auto;
        padding: 0 45px 0 0px;
        width: 65px;
        z-index: 99999;
        position:fixed;
        left:-70px;
        top:20%;
    }
    .pbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:left;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:left;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#fff;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="pbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/pt_BR/all.js#xfbml=1">
               
            </script>
            <script type="text/javascript">
                (function () {
                    var s = document.createElement('SCRIPT'),
                        s1 = document.getElementsByTagName('SCRIPT')[0];
                    s.type = 'text/javascript';
                    s.async = true;
                    s.src = 'http://widgets.digg.com/buttons.js';
                    s1.parentNode.insertBefore(s, s1);
                })();
            </script>
            <!-- Medium Button -->
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
            <div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
            <div class='floatbutton' id='stumbleupon'>
                <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
            </div>
            <div class='floatbutton' id='digg'>
                <a class="DiggThisButton DiggMedium"></a>
            </div>
            <div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">
                <a href="http://www.personalizaroblogger.com.br/2012/09/widget-barra-de-compartilhamento.html" title="Barra de compartilhamento expansível no blog!"><span class="getfloat">Add esse Widget</span></a>
            </div>
        </div>
    </div>
</div>

 

O que achou deste widget? Tem alguma sugestão ou dúvida? 
Comente e diga-nos sua opinião.

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.

MENU MULTI LEVEL COM CSS3

Hoje eu estou compartilhando outro grande exemplo de CSS3, no tutorial de hoje quero compartilhar um menu multi-level que funciona com CSS3 puro sem qualquer imagem incluída no menu. Como funciona com CSS3 puro, ele não afeta a velocidade de carregamento do seu blog, em comparação com menus jQuery e outros menus que funcionam com script.

Anteriormente, eu compartilhei um menu horizontal com CSS3, mas um dos meus fiéis leitores me pediu para criar uma menu multi-level que funciona com CSS3 puro, é por isso que eu estou compartilhando este menu hoje.

Este menu foi desenvolvido por Rethnaraj Rambabu do bloggermint eu fiz alguns ajustes CSS para funcionar bem com o blogger. Agora vamos ao menu multi-level e aprender como instalá-lo no blogger. Veja o demo primeiro do menu clicando no botão verde abaixo.

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.

BOTÕES DE COMPARTILHAMENTO COM EFEITO HOVER

Os botões de compartilhamento (Social sharing / bookmarking) tem a finalidade de facilitar a divulgação em redes sociais, como: Twitter,Orkut, Facebook etc. e são, com certeza, um recurso extremamente indispensável em qualquer blog.

Quando você adiciona tais botões no seu blog, você possibilita ao seu leitor divulgar os artigos que achou interessante com os amigos e contatos de redes sociais.

E isso, pode trazer novos visitantes para o seu blog.

Quero compartilhar com vocês botões de compartilhamento com efeito hover muito legal com CSS3.

Gadget do Flickr para Blogs

Como colocar Flickr no Blog | Blogger ou WordPress.ORG

Uma das mais populares redes sociais para compartilhamento de fotos e imagens é o Flickr. Mesmo com o Instagram bem popular (em celulares), para quem quer compartilhar arquivos mais densos e ir além das fotos cotidianas, o Flickr ainda é a melhor opção. Você pode compartilhar imagens da sua conta do Flickr em um ótimo gadget/widget (elemento de página) na barra lateral (sidebar) do seu Blog no Blogger ou no WordPress.ORG.