Tutorial blogger: Personaliza el pie de las entradas (con entradas relacionadas)

8 jul 2019 •




¡Hola! Como bien dice el título de este post, hoy he querido compartir una forma para personalizar el pie de las entradas de blogger, incluyendo el gadget de entradas relacionadas. He diseñado un estilo, que luce así:
(DEMO)

 Para esto, uilizaremos la fuente de iconos web llamada Font Awesome de la que seguro habrán oido antes. Si no la conocían y no la tienen instalada, recomiendo que lo hagan desde ya, solamente debemos poner después de <head> el código siguiente:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet'/>


También debemos poner en la plantilla el script que nos generará las entradas relacionadas, así que antes de </head> debemos poner el código siguiente:

    <script type='text/javascript'>
      //<![CDATA[
      // Post relacionados
var classicMode = false ;var summary = 40;var indent = 3;imgr = new Array();imgr[0] = "http://i.imgur.com/TdxRZn5.png";showRandomImg = true;aBold = true;summaryPost = 170;
      summaryTitle = 25;numposts1 = 6;numposts2 = 8;var classicMode = false ;var summary = 50;var indent = 3;var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();var thumburl = new Array();function related_results_labels_thumbs(json) {
        for (var i = 0; i < json.feed.entry.length; i++) {var entry = json.feed.entry[i];relatedTitles[relatedTitlesNum] = entry.title.$t;try
        {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
                                                          catch (error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined')thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://i.imgur.com/TdxRZn5.png";}}
                                                          if(relatedTitles[relatedTitlesNum].length>40) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 50)+"...";
                                                          for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href;
                                                                                                                                              relatedTitlesNum++;}}}}function removeRelatedDuplicates_thumbs() {var tmp = new Array(0);var tmp2 = new Array(0);var tmp3 = new Array(0);
                                                                                                                                                                                                                for(var i = 0; i < relatedUrls.length; i++) {if(!contains_thumbs(tmp, relatedUrls[i])) {tmp.length += 1;tmp[tmp.length - 1] =relatedUrls[i];tmp2.length += 1;tmp3.length += 1;tmp2[tmp2.length - 1] = relatedTitles[i];tmp3[tmp3.length - 1] = thumburl[i];}}
                                                                                                                                                                                                                relatedTitles = tmp2;relatedUrls = tmp;thumburl=tmp3;}function contains_thumbs(a, e) {for(var j = 0; j < a.length; j++) if (a[j]==e) return true;return false;}function printRelatedLabels_thumbs(current) {for(var i = 0; i < relatedUrls.length; i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--;}}var r = Math.floor((relatedTitles.length - 1) * Math.random());var i = 0;while (i < relatedTitles.length && i < 20 && i<maxresults) {tmb = thumburl[r].replace('s72-c/','s300-c/');document.write('<span class="item-related"><a href="' + relatedUrls[r] + '"><img width="100%" height="50" src="'+tmb+'"/></a><br/><a id="titl2" href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></span>');i++;if (r < relatedTitles.length - 1) {r++;} else {r=0;}} relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length);}
      //]]>
    </script>

Guardamos la plantilla y listo. Una vez que tengamos instalada la fuente de iconos web, vamos a PLANTILLA → EDITAR HTML y buscamos (CTRL + F simultáneamente) el código <b:includable id='post' var='post'>. Un poco más abajo está <div class='post-footer'> que es el código que vamos a utilizar, más o menos así:



Pues bien, sencillamente vamos a reemplazar el código buscado, su contenido y su etiqueta de cierre  </div> por el código siguiente. Para esto, contraeremos la etiqueta y su contenido desde el número que hay en la columna de la izquierda. Hay que tener en cuenta que debe lucir más o menos así antes de reemplazarlo, con tres puntitos que representan el contenido entre la etiqueta de apertura y de cierre, y en la columna de la izquierda en número debe tener una flechita que indica que el código está contraído:



El código:


                                    <div class='pie-entradas'>
                                      <div class='post-footer-line post-footer-line-1'>
                                        <div id='comparte-entrada'>
                                          <a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'>
                                            <i class='fa fa-facebook'/>
                                            <span style='padding-right: 20px;'/>
                                          </a>
                                          <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'>
                                            <i class='fa fa-twitter'/>
                                            <span style='padding-right: 20px;'/>
                                          </a>
                                          <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'>
                                            <i class='fa fa-google-plus'/>
                                            <span style='padding-right: 20px;'/>
                                          </a>
                                        </div>
                                      </div>
                                      <div class='post-footer-line post-footer-line-2'>
                                        <li class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                                          <span itemprop='name'>
                                            <data:post.author/>
                                          </span>
                                          <b:if cond='data:top.showTimestamp'>
                                            <data:top.timestampLabel/>
                                            <b:if cond='data:post.url'>
                                              <meta expr:content='data:post.url.canonical' itemprop='url'/>
                                              <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
                                                <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
                                                  <data:post.timestamp/>
                                                </abbr>
                                              </a>
                                            </b:if>
                                          </b:if>
                                        </li>
                                        <li class='post-labels'>
                                          <b:if cond='data:top.showPostLabels and data:post.labels'>
                                            <data:postLabelsLabel/>
                                            <b:loop values='data:post.labels' var='label'>
                                              <a expr:href='data:label.url' rel='tag'>
                                                <data:label.name/>
                                              </a>
                                              <b:if cond='not data:label.isLast'>
                                                ,
                                              </b:if>
                                            </b:loop>
                                          </b:if>
                                        </li>
                                      </div>
                                      <div class='post-footer-line post-footer-line-3'>
                                        <div id='relacionados'>
                                          <b:if cond='data:blog.pageType == &quot;item&quot;'>
                                            <div class='title-box'>
                                              <titl>
                                                <center>
                                                  &#191;Ya leíste esto?
                                                </center>
                                              </titl>
                                            </div>
                                            <div class='post-related'>
                                              <b:loop values='data:post.labels' var='label'>
                                                <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
                                              </b:loop>
                                              <script type='text/javascript'>
                                                var  defaultnoimage=&quot;http://i.imgur.com/TdxRZn5.png&quot;;
                                                var maxresults=3; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
                                              </script>
                                            </div>
                                          </b:if>
                                        </div>
                                      </div>
                                    </div>
                                    <style type='text/css'>
                                      /* Pie de entradas con entradas relacionadas
                                      ----------------------------------------------- */
                                      .post-footer-line.post-footer-line-1 {
                                        text-align: center; /*alineación íconos de compartir entrada*/
                                        font-size: 13px; /*tamaño de los íconos de compartir entrada*/
                                        padding: 20px;
                                      }
                                      .post-footer-line.post-footer-line-1 a {
                                        color: #222; /*color íconos de compartir entrada*/
                                      }
                                     .post-footer-line.post-footer-line-1 a: hover{
                                        color: #ddd; /*color íconos de compartir entrada al pasar el cursor*/
                                      }
                                      .post-footer-line.post-footer-line-2 {
                                        line-height: 1.8;
                                        margin-top: 10px;
                                        display: table;
                                        width: 100%;
                                        padding: 20px;
                                        border: 1px solid #000000; /*borde de la segunda línea del post-footer*/
                                        box-sizing: border-box;
                                        -moz-box-sizing: border-box;
                                        -webkit-box-sizing: border-box;
                                        list-style: none;
                                      }
                                      li.fn {
                                        width: 50%;
                                        float: left;
                                      }
                                      li.post-labels {
                                        width: 49%;
                                        float: left;
                                        text-align: right;
                                        border-left: 1px solid #222;
                                      }
                                      .title-box {
                                        font: normal 15px arial; /*fuente del título ¿Ya leíste esto?*/
                                        text-transform: uppercase; /*texto en mayúsculas*/
                                        letter-spacing: 3px; /*espacio entre las letras*/
                                        padding: 20px;
                                      }
                                      .post-related {
                                        column-count: 3;
                                      }
                                      #relacionados img {
                                        height: 200px; /*altura de las imágenes de entradas relacionadas*/
                                      }
                                      a#titl2 {
                                        font: 12px arial, sans-serif; /*fuente del título de las entradas relacionadas*/
                                        text-transform: uppercase; /*texto en mayúsculas*/
                                        letter-spacing: 2px; /*espacio entre letras*/
                                      }
                                      /* ------------ Fin pie de entradas ------------- */
                                    </style>


Para cambiar el título que dice ¿Ya leíste esto?, lo pueden hacer en la parte siguiente del código, que encuentran un poco más abajo de <div class='title-box'>:




Está programado para que arroje exactamente 3 resultados, pero si quieren menos o más, pueden modificarlo en la parte que dice var maxresults=3; y más abajo en la parte de estilos, donde dice column-count: 3, remplazando ambas partes por el número de entradas relacionadas que deseen.

Después de esto, sólo resta modificar los estilos conforme a nuestro gusto personal según dice en el código en la parte final que contiene el CSS, y tendremos un pie de entradas más bonito. Y, además, tendremos también una herramienta muy importate como son las Entradas Relacioadas.

Eso es todo, y espero que les sea útil este tutorial. Saludos!

- Jisela
Más sobre

2 comentarios

  1. Mi Universo Literario Writerjulio 08, 2019 8:47 a. m.

    Hellooooooo!
    Ay, la verdad es que hace tiempo que quiero hacer esto :O Ya veremos cuándo me siento a hacerlo <3 MUCHAS GRACIAS POR EL TUTORIAL, ME HA ENCANTADO :) Primero tengo que solucionar unos botones de "compartir esta entrada" abajo del post que por alguna razón dejaron de andar :/ Así que primero tengo que averiguar cómo demonios arreglar eso y luego hacer esto :D ¡GRANDIOSA ENTRADA!
    ¡Un beso! Nos leemos :)
    ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️

    ResponderEliminar
    Respuestas
    1. Jisela Riascosagosto 13, 2019 11:28 a. m.

      Gracias a ti por la visita :D Espero que te sea útil.

      Besos!

      Eliminar

¡Suscríbete! Recibe todos los posts en tu e-mail.

© 2020 • Theme by Jisela R.