Lançado em agosto de 1999, o Blogger foi uma das primeiras ferramentas dedicadas a publicação de blogs e é conhecido por popularizar o formato. O Blogger foi criado pelo Pyra Labs e, em 2003, foi comprado pelo Google. Mais tarde as funções especiais que tinham de ser pagas para se ter acesso a elas,tornaram-se grátis pela mão do Google. O Google meteu mãos à obra e em 9 de maio de 2004, o Blogger foi relançado com um novo visual em colaboração com as empresas de webdesign Adaptive Path e Stopdesign, adicionando novos templates, página própria para posts, comentários, e postagem por e-mail.

No mesmo ano, o Google comprou a Picasa e o seu utilitário de compartilhamento de fotos Hello, que foi integrado ao Blogger, permitindo aos usuários postarem as suas fotos nos seus blogs. Em agosto de 2009, em comemoração ao 10º aniversário do Blogger, foram adicionados novos recursos ao sistema, como o “Jump Break”, que serve para a página inicial dos blogs exibirem apenas um trecho das postagens – para fazer isso antes, era necessária edição de código HTML. Em fevereiro de 2010, foram adicionados a funcionalidade Páginas Estáticas e o Gadget de Páginas, semelhante ao do WordPress, facilitando a postagem para os criadores e leitores. Foi aqui que se denotou que WordPress já estava a tomar a liderança no que toca às plataformas de blogagem, muito por culpa da sua enorme versatilidade e flexibilidade. Para si que é um utilizador do Blogger e gostaria de aprender alguns truques para alterar e melhorar o seu blog, deixamos-lhe neste artigo alguns Truques e Dicas para Blogger. Estes truques deverão funcionar em todos os templates para blogger.

Considere ler alguns dos nossos artigos com compilações de fantásticos templates para Blogger:

1. ADICIONAR UM BOTÃO DE VOLTAR AO TOPO

Para adicionar um botão de voltar ao topo ao seu Blogger você poderia fazer isso criando HTML, mas preferimos ir por outro método e utilizar javascript. Este botão vai melhorar a usabilidade do seu blog, permitindo aos visitantes voltar para o topo da página instantaneamente. Para inserir esse botão, siga os passos abaixo:

  1. Clique em Design
    Blogger
  2. Depois clique em “Adicionar uma miniaplicação”
    blogger
  3. Na janela que se abre, clique em HTML/Javascript
    blogger
  4. De seguida insira o código na janela. Optámos por introduzir um nome para a miniaplicação, mas pode deixar em branco:
    blogger 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" >
    /***********************************************
    * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Project Page at http://www.dynamicdrive.com for full source code
    ***********************************************/
    var scrolltotop={
        //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
        //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
        setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
        controlHTML: '<img src="http://img684.imageshack.us/img684/6617/hbarrowup.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
        controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
        anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
        state: {isvisible:false, shouldvisible:false},
        scrollup:function(){
            if (!this.cssfixedsupport) //if control is positioned using JavaScript
                this.$control.css({opacity:0}) //hide control immediately after clicking it
            var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
            if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
                dest=jQuery('#'+dest).offset().top
            else
                dest=0
            this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
        },
        keepfixed:function(){
            var $window=jQuery(window)
            var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
            var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
            this.$control.css({left:controlx+'px', top:controly+'px'})
        },
        togglecontrol:function(){
            var scrolltop=jQuery(window).scrollTop()
            if (!this.cssfixedsupport)
                this.keepfixed()
            this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
            if (this.state.shouldvisible && !this.state.isvisible){
                this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
                this.state.isvisible=true
            }
            else if (this.state.shouldvisible==false && this.state.isvisible){
                this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
                this.state.isvisible=false
            }
        }, 
    
        init:function(){
            jQuery(document).ready(function($){
                var mainobj=scrolltotop
                var iebrws=document.all
                mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
                mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
                mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                    .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                    .attr({title:'Voltar ao Topo'})
                    .click(function(){mainobj.scrollup(); return false})
                    .appendTo('body')
                if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                    mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
                mainobj.togglecontrol()
                $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                    mainobj.scrollup()
                    return false
                })
                $(window).bind('scroll resize', function(e){
                    mainobj.togglecontrol()
                })
            })
        }
    }
    scrolltotop.init()
    </script>
  5. E este é o resultado:
    Blogger

2. ADICIONAR BARRA FLUTUANTE PARA AS REDES SOCIAIS

As redes sociais são amplamente utilizadas em blogs de todo o mundo, e por isso não podíamos deixar passar em branco este truque. Com as dicas que lhe vamos indicar abaixo, poderá criar uma barra flutuante no topo do seu blog com os ícones das redes sociais para os seus visitantes partilharem os seus conteúdos. Siga os passos abaixo para completar esta dica:

  1. Clique em Design e de seguida em Editar HTML
    Blogger
  2. Dentro do código, procure pela tag </head> e insira o seguinte código antes da tag:
    <script type="text/javascript">
    var addthis_config = {
        bar_show_below : 150
    }
    </script>
    <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

    blogger

  3. De seguida procure a tag </body> e insira o seguinte código antes da tag:
  4. <div class="addthis_bar addthis_bar_medium">
        <label>Partilhar esta página:</label>
        <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
            <span><a class="addthis_button_preferred_1"></a></span>
            <span><a class="addthis_button_preferred_2"></a></span>
            <span><a class="addthis_button_preferred_3"></a></span>
            <span><a class="addthis_button_preferred_4"></a></span>
            <span><a class="addthis_button_compact"></a></span>
            <span><a class="addthis_counter addthis_bubble_style"></a></span>
        </div>
    </div>

    blogger

  5. De notar que a barra apenas aparecerá quando o visitante fizer scroll na página, e este será o resultado:
    Blogger

3. ADICIONAR UM POPUP JQUERY PARA FANBOX DO FACEBOOK

Para angariar mais fans no Facebook você poderá adicionar um simples popup ao seu blog. Este popup é bastante simples, construído em jQuery com um aspecto limpo e elegante que irá atrair a atenção dos visitantes. Para concluir esta dica, basta seguir os passos abaixo:

  1. Clique em Design
    Blogger
  2. Depois clique em “Adicionar uma miniaplicação”
    blogger
  3. Na janela que se abre, clique em HTML/Javascript
    blogger
  4. Adicione o seguinte código, substituíndo “escolacriatividade” pelo nome da sua pagina de fans
    <style>
    /*
        ColorBox Core Style:
        The following CSS is consistent between example themes and should not be altered.
    */
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    
    /*
        User Style:
        Change the following styles to modify the appearance of ColorBox.  They are
        ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:url(http://4.bp.blogspot.com/-8n5B05PTdFc/T1eJ4l1t1jI/AAAAAAAABBQ/wjOQPxrTcsI/s1600/overlay.png) repeat 0 0;}
    #colorbox{}
        #cboxTopLeft{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -101px 0;}
        #cboxTopRight{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -130px 0;}
        #cboxBottomLeft{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -101px -29px;}
        #cboxBottomRight{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -130px -29px;}
        #cboxMiddleLeft{width:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) left top repeat-y;}
        #cboxMiddleRight{width:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) right top repeat-y;}
        #cboxTopCenter{height:21px; background:url(http://2.bp.blogspot.com/-atBzpahc3J4/T1eJ0xcvm9I/AAAAAAAABA0/xCYZwJH9iX8/s1600/border.png) 0 0 repeat-x;}
        #cboxBottomCenter{height:21px; background:url(http://2.bp.blogspot.com/-atBzpahc3J4/T1eJ0xcvm9I/AAAAAAAABA0/xCYZwJH9iX8/s1600/border.png) 0 -29px repeat-x;}
        #cboxContent{background:#fff; overflow:hidden;}
            .cboxIframe{background:#fff;}
            #cboxError{padding:50px; border:1px solid #ccc;}
            #cboxLoadedContent{margin-bottom:28px;}
            #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
            #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
            #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
            #cboxPrevious{position:absolute; bottom:0; left:0; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
            #cboxPrevious:hover{background-position:-75px -25px;}
            #cboxNext{position:absolute; bottom:0; left:27px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
            #cboxNext:hover{background-position:-50px -25px;}
            #cboxLoadingOverlay{background:url(https://lh5.googleusercontent.com/-YD26J93vHAU/T1eJ23YKUYI/AAAAAAAABBE/I20XOWqx8Cs/h120/loading.gif) no-repeat center center;}
            #cboxLoadingGraphic{background:url(https://lh5.googleusercontent.com/-YD26J93vHAU/T1eJ23YKUYI/AAAAAAAABBE/I20XOWqx8Cs/h120/loading.gif) no-repeat center center;}
            #cboxClose{position:absolute; bottom:0; right:0; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
            #cboxClose:hover{background-position:-25px -25px;}
    
    /*
      The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
      when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
      See: http://jacklmoore.com/notes/ie-transparency-problems/
    */
    .cboxIE #cboxTopLeft,
    .cboxIE #cboxTopCenter,
    .cboxIE #cboxTopRight,
    .cboxIE #cboxBottomLeft,
    .cboxIE #cboxBottomCenter,
    .cboxIE #cboxBottomRight,
    .cboxIE #cboxMiddleLeft,
    .cboxIE #cboxMiddleRight {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
    }
    
    /*
      The following provides PNG transparency support for IE6
      Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
    */
    .cboxIE6 #cboxTopLeft{background:url(http://4.bp.blogspot.com/-qXR5VW86tTU/T1eK26OlLJI/AAAAAAAABCI/15OgyJGAxgc/s1600/borderTopLeft.png);}
    .cboxIE6 #cboxTopCenter{background:url(http://3.bp.blogspot.com/-M37w9fBpYc0/T1eK1xVuXMI/AAAAAAAABCA/dj23BHXxP94/s1600/borderTopCenter.png);}
    .cboxIE6 #cboxTopRight{background:url(http://1.bp.blogspot.com/-RhmmNbYthgQ/T1eK3_yFbYI/AAAAAAAABCQ/OOA2WRKRIpI/s1600/borderTopRight.png);}
    .cboxIE6 #cboxBottomLeft{background:url(http://1.bp.blogspot.com/-RhmmNbYthgQ/T1eK3_yFbYI/AAAAAAAABCQ/OOA2WRKRIpI/s1600/borderTopRight.png);}
    .cboxIE6 #cboxBottomCenter{background:url(http://4.bp.blogspot.com/-9_GvfznJpmA/T1eKxznvIqI/AAAAAAAABBc/QCxpXpZRRKc/s1600/borderBottomCenter.png);}
    .cboxIE6 #cboxBottomRight{background:url(http://2.bp.blogspot.com/-JMn5kVlrREs/T1eKzLJQp1I/AAAAAAAABBo/sKxAQECScTs/s1600/borderBottomRight.png);}
    .cboxIE6 #cboxMiddleLeft{background:url(http://2.bp.blogspot.com/-GdZVtHqHzAY/T1eK0LfvVAI/AAAAAAAABBw/NItg_Pispb0/s1600/borderMiddleLeft.png);}
    .cboxIE6 #cboxMiddleRight{background:url(http://3.bp.blogspot.com/-Inz4vd6RVTo/T1eK1JG3aWI/AAAAAAAABB4/mqn1hczMewg/s1600/borderMiddleRight.png);}
    
    .cboxIE6 #cboxTopLeft,
    .cboxIE6 #cboxTopCenter,
    .cboxIE6 #cboxTopRight,
    .cboxIE6 #cboxBottomLeft,
    .cboxIE6 #cboxBottomCenter,
    .cboxIE6 #cboxBottomRight,
    .cboxIE6 #cboxMiddleLeft,
    .cboxIE6 #cboxMiddleRight {
        _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
    }
    
    /*-----------------------------------------------------------------------------------*/
    /* Facebook Likebox popup For Blogger By Helper Blogger
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
    text-decoration:none;
    }
    
    .box-tagline {
    color: #999;
    margin: 0;
    text-align: center;
    }
    #subs-container {
    padding: 35px 0 30px 0;
    position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }
    </style>
    
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
    <script src="http://helperblogger.webs.com/files/jquery.colorbox.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    if (document.cookie.indexOf('visited=true') == -1) {
    var fifteenDays = 1000*60*60*24*1;
    var expires = new Date((new Date()).valueOf() + fifteenDays);
    document.cookie = "visited=true;expires=" + expires.toUTCString();
    $.colorbox({width:"400px", inline:true, href:"#subscribe"});
    }
    });
    </script>
    <!-- This contains the hidden content for inline calls -->
    
    <div style='display:none'>
    <div id='subscribe' style='padding:10px; background:#fff;'>
    <center><img src="http://4.bp.blogspot.com/-yKl984YHtNc/Tz5eFcKawQI/AAAAAAAAClc/tRhcONEeG9k/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
    <center>
    
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fescolacriatividade&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=308510492508305" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe></center></div>
    </div>
  5. Pode alterar a duração do cookie na linha 122 alterando o número 1 para o número de dias que pretende que o cookie tenha validade.
  6. Este é o resultado final:
    Blogger

4. ADICIONAR WIDGET DE REDES SOCIAIS COM CONTADOR

Tal como acontece em muitos dos blogs WordPress existentes, você poderá criar um widget com um contador de redes sociais. O colega e amigo Vitor Carvalho da Escola WordPress criou recentemente um plugin do género para o WordPress, que poderá encontrar em Download Grátis: Plugin/Widget contador de Mídias Sociais (Segunda Edição). Para você ter algo idêntico (idêntico pois não puxa os dados automaticamente, trata-se apenas de um elemento representativo e de estética) no seu Blogger, basta seguir as indicações que lhe vamos dar abaixo:

  1. Clique em Design
    Blogger
  2. Depois clique em “Adicionar uma miniaplicação”
    blogger
  3. Na janela que se abre, clique em HTML/Javascript
    blogger
  4. De seguida adicione o seguinte código, alterando os links das redes sociais nas linhas 71, 77 e 83:
    <style>
    .rss-hb {
        background: url(http://1.bp.blogspot.com/-6P9c5xiGqPU/T17Et5uLpmI/AAAAAAAAALo/QvZiuuXH5WQ/s1600/rss+sepia.png) no-repeat;
        height: 64px;
        padding: 0px 20px 0px 80px;
        margin-top: 5px;
    }
    
    .rss-hb:hover {
        background: url(http://3.bp.blogspot.com/-kpl0WCXu29o/T17fxYYxDKI/AAAAAAAAAMA/VStK_Nn5ZhQ/s1600/rss.png) no-repeat;
    }
    
    .twitter-hb {
        background: url(http://4.bp.blogspot.com/-O3HOVJkubI8/T17FOcKcXEI/AAAAAAAAALw/zGnWePejV74/s1600/twitter.png) no-repeat;
        height: 64px;
        padding: 0px 20px 0px 80px;
        margin-top: 10px;
    }
    
    .twitter-hb:hover {
        background: url(http://4.bp.blogspot.com/-Zt75oQY-Zyw/T17f2RNz4LI/AAAAAAAAAMI/tMRUAvrCSZE/s1600/twitter.png) no-repeat;
    }
    
    .facebook-hb {
        background: url(http://3.bp.blogspot.com/-zKnfvx3p4tw/T17EsygOsMI/AAAAAAAAALg/WHYxobQI9no/s1600/fb+sepia.png) no-repeat;
        height: 64px;
        padding: 0px 20px 0px 80px;
        margin-top: 10px;
    }
    
    .facebook-hb:hover {
        background: url(http://4.bp.blogspot.com/-eNuumn4W2Z0/T17CYTzSlfI/AAAAAAAAALY/XgljKIs181w/s1600/facebook-logo.png) no-repeat;
    }
    
    .follower-rss, .follower-twitter, .follower-facebook {
        font-family: Georgia,  sans-serif, Times;
        font-size: 1.5em;
        font-style: italic;
        color: #D3C5B1;
        padding-top: 05px;
        text-shadow: 1px 1px #B2A99D;
    }
    
    .follower-rss a, .follower-twitter a, .follower-facebook a {
        color: #AA9C89;
    }
    
    .follower-rss span {
        font-size: 2.2em;
        font-weight: bold;
        font-style: italic;
    }
    
    .follower-twitter span {
        font-size: 1.9em;
        font-weight: bold;
        font-style: italic;
    }
    
    .follower-facebook span {
        font-size: 1.9em;
        font-weight: bold;
        font-style: italic;
    }
    
    </style>
    
    <div class='rss-hb'>
        <div class='follower-rss'>
            <span>
                <a href='http://feeds.feedburner.com/pontobit'>1752</a>
            </span>Assinantes</div>
    </div>
    <div class='twitter-hb'>
        <div class='follower-twitter'>
            <span>
                <a href='http://twitter.com/#!/escolacriativ' rel="nofollow">1211</a>
            </span>Seguidores</div>
    </div>
    <div class='facebook-hb'>
        <div class='follower-facebook'>
            <span>
                <a href='http://www.facebook.com/escolacriatividade'>4535</a>
            </span>Fãs</div>
    </div>
  5. E este é o resultado final:
    Blogger

5. ADICIONAR O BOTÃO PIN IT DO PINTEREST (COM CONTADOR)

Pinterest é uma rede social de partilha de fotos. Assemelha-se a um quadro de notas onde os utilizadores podem partilhar e gerir as suas imagens temáticas, de qualquer tema que lhes interesse. Cada utilizador pode compartilhar suas imagens, partilhar as de outros utilizadores e colocá-las em suas coleções, além de poder comentar e realizar outras acções disponibilizadas pelo site. Para adicionar este widget ao seu Blogger, siga as indicações abaxo:

  1. Clique em Design e de seguida em Editar HTML
    Blogger
  2. Dentro do código, procure pelo código <div class=’post-footer’> e por baixo adicione um dos seguintes códigos:
    Se quiser o icone horizontal: 

    <script type='text/javascript'>
    (function() {
        window.PinIt = window.PinIt || { loaded:false };
        if (window.PinIt.loaded) return;
        window.PinIt.loaded = true;
        function async_load(){
            var s = document.createElement(&quot;script&quot;);
            s.type = &quot;text/javascript&quot;;
            s.async = true;
            if (window.location.protocol == &quot;https:&quot;)
                s.src = &quot;https://assets.pinterest.com/js/pinit.js&quot;;
            else
                s.src = &quot;http://assets.pinterest.com/js/pinit.js&quot;;
            var x = document.getElementsByTagName(&quot;script&quot;)[0];
            x.parentNode.insertBefore(s, x);
        }
        if (window.attachEvent)
            window.attachEvent(&quot;onload&quot;, async_load);
        else
            window.addEventListener(&quot;load&quot;, async_load, false);
    })();
    </script>
    <!-- Pinterest button Start -->
    <div style='text-align:left;padding:5px 5px 5px 0;'>
    <a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
    </div>
    <!-- Pinterest button End -->

    Se quiser o ícone vertical:

    <script type='text/javascript'>
    (function() {
        window.PinIt = window.PinIt || { loaded:false };
        if (window.PinIt.loaded) return;
        window.PinIt.loaded = true;
        function async_load(){
            var s = document.createElement(&quot;script&quot;);
            s.type = &quot;text/javascript&quot;;
            s.async = true;
            if (window.location.protocol == &quot;https:&quot;)
                s.src = &quot;https://assets.pinterest.com/js/pinit.js&quot;;
            else
                s.src = &quot;http://assets.pinterest.com/js/pinit.js&quot;;
            var x = document.getElementsByTagName(&quot;script&quot;)[0];
            x.parentNode.insertBefore(s, x);
        }
        if (window.attachEvent)
            window.attachEvent(&quot;onload&quot;, async_load);
        else
            window.addEventListener(&quot;load&quot;, async_load, false);
    })();
    </script>
    <!-- Pinterest button Start -->
    <div style='text-align:left;padding:5px 5px 5px 0;'>
    <a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
    </div>
    <!-- Pinterest button End -->

    Se quiser o ícone sem o contador:

    <script type='text/javascript'>
    (function() {
        window.PinIt = window.PinIt || { loaded:false };
        if (window.PinIt.loaded) return;
        window.PinIt.loaded = true;
        function async_load(){
            var s = document.createElement(&quot;script&quot;);
            s.type = &quot;text/javascript&quot;;
            s.async = true;
            if (window.location.protocol == &quot;https:&quot;)
                s.src = &quot;https://assets.pinterest.com/js/pinit.js&quot;;
            else
                s.src = &quot;http://assets.pinterest.com/js/pinit.js&quot;;
            var x = document.getElementsByTagName(&quot;script&quot;)[0];
            x.parentNode.insertBefore(s, x);
        }
        if (window.attachEvent)
            window.attachEvent(&quot;onload&quot;, async_load);
        else
            window.addEventListener(&quot;load&quot;, async_load, false);
    })();
    </script>
    <!-- Pinterest button Start -->
    <div style='text-align:left;padding:5px 5px 5px 0;'>
    <a class='pin-it-button' count-layout='none' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
    </div>
    <!-- Pinterest button End -->

Não perca o próximo artigo com mais truques e dicas para Blogger!

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Adelson (Gerenciando Blog)
    14 de abril de 2012

    Olá, Diogo!

    Sou usuário e fã do Blogger há mais de 3 anos. Diferente de muitos, considero-o uma ótima plataforma não apenas para iniciantes e defendo que, quando bem utilizada, ela pode ser utilizada com sucesso inclusive para fins profissionais.

    Gostei muito de sua coletânea de dicas! São funcionalidades interessantes que realmente agregam valor a um blog no Blogger.

    Um abraço e parabéns pelo artigo!



    • Diogo Espinha
      16 de abril de 2012

      Olá Adelson, obrigado pela sua participação neste artigo. Fico extremamente contente por você, uma das pessoas que tenho como referência na blogosfera, ter gostado deste artigo!

      Abraço e obrigado mais uma vez!



  2. Edigley Alexandre
    11 de junho de 2012

    Olá Diogo!

    Na dica 4, o contador não é automático. Falta algum script para essa função.

    Abraço!


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz