Cursos 24 Horas - Cursos 100% Online com Certificado

Artigos Relacionados por Categoria no Blogger

4 Comentários Autor : Notícia e blog 04 abril 2010
Artigos Relacionados

Artigos relacionados são links que são exibidos no final das postagens, e que tem alguma relação com o artigo. Este hack se baseia nos marcadores para gerar os links, por isso é importante que todas as postagens tenha (labels ou tags) para que ele possa funcionar. O diferencial deste hack é que ele cria links dividos por categoria, o que facilita o leitor a clicar no conteúdo de seu gosto, trazendo assim mais navegabilidade ao seu blog, veja como fazer:

Inserindo o código no template

Vamos começar inserindo e configurando, o javascript que vai gerar todo o conteúdo da lista;
1) Acesse o painel do Blogger (blogger.com)
2) Vá em "Layout"-> "Editar HTML" -> Marque "Expandir Modelos de Widgets"
3) Procure pelo seguinte utilizando as teclas CTRL e F:<div class='post-footer-line post-footer-line-3'>Abaixo do código anterior insira o seguinte:<b:if cond='data:blog.pageType == &quot;item&quot;'>
         <div class='similiar'>

             <!-- *****************Artigos Relacionados Por Categoria****************** -->

             <!--
             -->

             <div class='widget-content'>
             <p/><h3>Artigos Relacionados Por Categoria</h3>

             <div id='data2007'/><br/><br/>
                 <script type='text/javascript'>

                 var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
                 var maxNumberOfPostsPerLabel = 5;
                 var maxNumberOfLabels = 10;

                 function listEntries10(json) {
                   var ul = document.createElement(&#39;ul&#39;);
                   var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
                                  json.feed.entry.length : maxNumberOfPostsPerLabel;
                   for (var i = 0; i &lt; maxPosts; i++) {
                     var entry = json.feed.entry[i];
                     var alturl;

                     for (var k = 0; k &lt; entry.link.length; k++) {
                       if (entry.link[k].rel == &#39;alternate&#39;) {
                         alturl = entry.link[k].href;
                         break;
                       }
                     }
                     var li = document.createElement(&#39;li&#39;);
                     var a = document.createElement(&#39;a&#39;);
                     a.href = alturl;

                     if(a.href!=top.location.href.replace(/\?.*/,'').replace(/\#.*/,'')) {
                         var txt = document.createTextNode(entry.title.$t);
                         a.appendChild(txt);
                         li.appendChild(a);
                         ul.appendChild(li);
                     }
                   }
                   for (var l = 0; l &lt; json.feed.link.length; l++) {
                     if (json.feed.link[l].rel == &#39;alternate&#39;) {
                       var raw = json.feed.link[l].href;
                       var label = raw.substr(homeUrl3.length+13);
                       var k;
                       for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
                       var txt = document.createTextNode(label);
                       var h = document.createElement(&#39;b&#39;);
                       h.appendChild(txt);
                       var div1 = document.createElement(&#39;div&#39;);
                        div1.appendChild(h);
                       div1.appendChild(ul);
                       document.getElementById(&#39;data2007&#39;).appendChild(div1);
                     }
                   }
                 }
                 function search10(query, label) {

                 var script = document.createElement(&#39;script&#39;);
                 script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
                  + label +
                 &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
                 script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
                 document.documentElement.firstChild.appendChild(script);
                 }

                 var labelArray = new Array();
                 var numLabel = 0;

                 <b:loop values='data:posts' var='post'>
                   <b:loop values='data:post.labels' var='label'>
                     textLabel = &quot;<data:label.name/>&quot;;
                     var test = 0;
                     for (var i = 0; i &lt; labelArray.length; i++)
                     if (labelArray[i] == textLabel) test = 1;
                     if (test == 0) {
                        labelArray.push(textLabel);
                        var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
                               labelArray.length : maxNumberOfLabels;
                        if (numLabel &lt; maxLabels) {
                           search10(homeUrl3, textLabel);
                           numLabel++;
                        }
                     }
                   </b:loop>
                 </b:loop>
                 </script>
             </div>

         </div>

</b:if>
Obs: O número em laranja referece ao número de postagens que será exibido por marcador. E o número em vermelho é o número de marcadores que será exibido.
4)Salve as alterações e visualize.

Fonte: Webupd8

    4 Comentários

    Mário Augusto disse...
    19 de abril de 2010 22:01 #

    Como evitar caracteres estranhos quando a tag possui um acento. Ex Notícia aparece assim : Not%C3%ADcias

    Um abraço

    Mário

    Dr Queiroz de paiva neto disse...
    23 de julho de 2010 23:15 #

    Como evitar esses bug tipo : Hist%C3%B3ria = História
    Isso sempre aparece quando tem um acento na palavra.
    como consertar isso ?

    Grato.

    Louis Kasumi disse...
    20 de maio de 2012 20:35 #

    @Dr Queiroz de paiva neto

    ACREDITO SE UTILIZAR NO HTML UMA META DO TIPO "UNICODE" RESOLVA ISSO, EXEMPLO:

    meta http-equiv="Content-Type" content="text/html; charset=utf-8"

    meta name="keywords" content="moodle, Português Brasileiro: Unicode UTF-8"


    SERÁ QUE NAO ?

    Louis Kasumi disse...
    20 de maio de 2012 20:39 #

    SÓ UMA PERGUNTA. TEM COMO ORGANIZAR ESSES LINKS PRA NÃO ESCORREGAR TANTO PRA BAIXO OCUPANDO TODO ESSE ESPAÇO ? OU SEJA, ORDENAR PRA FIVAR MAIS JUSTO, TALVEZ NA HOTIZONTAL... O QUE VC ACHA ?

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.