Adicionar Widget Compartilhamento social Debaixo dos post do Blogger

bookmarking Compartilhamento nas rede social são as maneiras mais fáceis para aumentar o tráfego em seu blog e ganhar mais leitores. hoje temos compartilhado partilha muitos tipos sociais e widgets bookmarking mas este é um pouco diferente de todos eles, pois cada botão tem um botão diferente background.Contém um botão Tweet Twitter , facebook como botão e botão Google+ .

A instalação do widget é bem fácil você só tem que adicionar um código no seu template.

Demonstração no final do poste

Então vamos La

1. Entre no painel do blogger -> Modelo -> Editar HTML-> Expandir modelos de widgets

2. Faça o Backup seu modelo (sempre é bom prevenir)

3. Em seguida, Crtl + F Pesquise:

<div class='post-footer-line post-footer-line-1'/>

4. Agora Adicione o código abaixo encima dele.

<b:if cond='data:blog.pageType == "item"'>

<style>

.promote_post_bg {

    height: 103px;

    background: url(https://lh3.googleusercontent.com/-AK_TNwyWxJw/T8XDa2Q6TpI/AAAAAAAAB04/UCczorSYj0s/s1600/helperblogger.com-sharing-widget.png) 0 -7px no-repeat;

    width: 500px;

    margin-left: 65px;

}

.promote_twitter {

    width: 130px;

    height: 38px;

    float: left;

    margin: 0 39px 0 0;

    padding: 65px 0 0 13px;

    text-align: center;

}

.promote_facebook {

    width: 115px;

    height: 40px;

    float: left;

    margin: 0 39px 0 0;

    padding: 63px 0 0 28px;

    text-align: center;

}

.promote_google {

    width: 65px;

    height: 40px;

    float: left;

    margin: 0 39px 0 0;

    padding: 65px 0 0 28px;

    text-align: center;

}

</style>

    <div class='promote_post_bg'>

        <div class='promote_twitter'>

            <a class='twitter-share-button' data-via='helperblogger' href='https://twitter.com/share'>Tweet</a>

            <script>

                !

                function (d, s, id) {

                    var js, fjs = d.getElementsByTagName(s)[0];

                    if (!d.getElementById(id)) {

                        js = d.createElement(s);

                        js.id = id;

                        js.src = "//platform.twitter.com/widgets.js";

                        fjs.parentNode.insertBefore(js, fjs);

                    }

                }(document, "script", "twitter-wjs");

            </script>

        </div>

        <div class='promote_facebook'>

       <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'

                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>

            <div>

                <b:if cond='data:post.isFirstPost'>

                    <script>

                        (function (d) {

                            var js, id = 'facebook-jssdk';

                            if (d.getElementById(id)) {

                                return;

                            }

                            js = d.createElement('script');

                            js.id = id;

                            js.async = true;

                            js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";

                            d.getElementsByTagName('head')[0].appendChild(js);

                        }(document));

                    </script>

                </b:if>

                            </div>

        </div>

        <div class='promote_google'>

            <g:plusone annotation="none" size='medium'></g:plusone>

            <script type='text/javascript'>

                (function () {

                    var po = document.createElement('script');

                    po.type = 'text/javascript';

                    po.async = true;

                    po.src = 'https://apis.google.com/js/plusone.js';

                    var s = document.getElementsByTagName('script')[0];

                    s.parentNode.insertBefore(po, s);

                })();

            </script>

        </div>

    </div>

</b:if>

5. Clique em Visualizar verifique se esta tudo certo, clique em Salvar modelo.

Pronto esta feito,Demonstração Logo abaixo...

Tweet