sábado, 19 de noviembre de 2016

Gadget posts - artículos recientes de una etiqueta específica en Blogger


Este Gadget es el mismo de aquí, sólo recuerda que es para una etiqueta específica
¡Un post más! Este post será breve, hace unos meses atrás publiqué un Gadget de artículos recientes muy pero muy elegante para el blog a tal punto que muchos quedaron enamorados de él. Bueno, decidé traer el mismo, pero, esta vez no aplicará para las entradas del blog en general, solamente FUNCIONA PARA UNA ETIQUETA ESPECÍFICA en tu blog de blogger.


UN DEMO PARA LA ETIQUETA BLOGGER DE BLOGGIN RED

Muy bien, como vemos el demo bastante bien su funcionamiento trabaja en función sólo de la etiqueta BLOGGER de mi blog, ahora bien vamos a ver como lo puedes implementar tú:

EXPLICACIÓN (MUCHA ATENCIÓN)

Como dije varias veces ya había hecho un post sobre este gadget de posts recientes pero que tomaba los artículos generales de cualquier etiqueta, ahora este post es tal y como lo plantea este lector del blog:


1. Lo primero a realizar será usar el código del gadget de artículos recientes del post original es decir lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('http://4.bp.blogspot.com/-0E2ZARxMyAo/UZwiR3XjlvI/AAAAAAAAKDc/3Z8WjltqbCQ/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "Últimos artículos",       // Titulo del gadget
    numposts    = 14,      // Numero de posts a mostrar
    numchar     = 200,      // Numero de caracteres a mostrar
    rcFadeSpeed = 600,      // Velocidad
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // Defecto imagen si el post no tiene
    blogURL     = "http://tublogaqui.blogspot.com/";       // URL de tu blog
</script>
<script src="https://dl.dropboxusercontent.com/s/hcbnv2siy92dws4/recentpostetiqueta.js" type="text/javascript"></script>

2. Lo que está en naranja es donde irá la dirección de tu blog, No explicaré nada más respecto a la personalización ya que en el post anterior porfundicé en ello, ahora, lo que ves en el código en azul al final es el SCRIPT encargado de controlar todo, tendremos que modificarlo el código del script lo copiamos y es el siguiente:

// ESTO ES EL CÓDIGO JAVASCRIPT PARA QUE EL GADGET FUNCIONE
// By http://www.allbloggertricks.com and http://bloggersviet.blogspot.com

$(function() {
    $('div.rp-item img').hide();
    $('div.rp-child').removeClass('hidden');
   
    var winWidth = $(window).width(),
    winHeight     = $(window).height(),
    ttWidth         = $('div.rp-child').outerWidth(),
    ttHeight     = $('div.rp-child').outerHeight(),
    thumbWidth   = $('div.rp-item').outerWidth(),
    thumbHeight  = $('div.rp-item').outerHeight();


    $('div.rp-item').css('position', 'static').mouseenter(function() {
        $('div.rp-child', this).filter(':not(:animated)').fadeIn(rcFadeSpeed);
    }).mousemove(function(e) {   
        var top  = e.pageY+20,
            left = e.pageX+20;
           
            if (top + ttHeight > winHeight) {
                top = winHeight - ttHeight - 40;
            }           
            if (left + ttWidth > winWidth) {
                left = winWidth - ttWidth - 40;
            }   

        $('div.rp-child', this).css({top:top, left:left});

    }).mouseleave(function() {
        $('div.rp-child', this).hide();
    });
});

function showrecentposts(json) {
    var entry = json.feed.entry;
    for (var i = 0; i < numposts; i++) {
        var posturl; 
        for (var j=0; j < entry[i].link.length; j++) {
            if (entry[i].link[j].rel == 'alternate') {
                posturl = entry[i].link[j].href;
                break;
            }
        }
       
        if ("content" in entry[i]) {
            var postcontent = entry[i].content.$t;
        } else if ("summary" in entry[i]) {
            var postcontent = entry[i].summary.$t;
        } else {
            var postcontent = "";
        }

        var re = /<\S[^>]*>/g;
        postcontent = postcontent.replace(re, "");
        if (postcontent.length > numchar) {
            postcontent = postcontent.substring(0,numchar) + '...';
        }

        var poststitle = entry[i].title.$t;

            if ("media$thumbnail" in entry[i]) {
                postimg = entry[i].media$thumbnail.url
            } else {
                postimg = pBlank
            }
       
        document.write('<div class="rp-item"><a href="' + posturl + '"><img src="' + postimg + '" alt="thumb" /></a>');
        document.write('<div class="rp-child hidden"><h4>' + poststitle + '</h4>');
        document.write(postcontent + '</div>');
        document.write('</div>');
    }
}
document.write('<div id="post-gallery"><h2>' + rpTitle + '</h2><sc' + 'ript src="' + blogURL + '/feeds/posts/summary/-/NOMBREETIQUETA?max-results=' + numposts + '&orderby=published&alt=json-in-script&callback=showrecentposts"></sc' + 'ript><div style="clear:both;"></div></div>');

var i = 0, int=0;
$(window).bind("load", function() {
    var int = setInterval("doThis(i)",400);
});

function doThis() {
    var imgs = $('div.rp-item img').length;
    if (i >= imgs) {clearInterval(int);}
    $('div.rp-item img:hidden').eq(0).fadeIn(400);
    i++;
}

3. Una vez lo copiamos abrimos un bloc de notas de nuestro PC, pegamos el código, y si nos fijamos la parte con letras verdes fondo azul, donde dice "NOMBREETIQUETA" lo reemplazaremos justo por la etiqueta que queremos que salga solita en el gadget, no más, no le haremos nada más a ese código JavaScript.

4. Una vez lo hemos hecho guardamos el código como "recentetiqueta.js" importante al guardarlo debemos ponerle la extensión .js para que lo detecte como un código de JavaScript algo así: 


Para verificar que todo quedó bien ve al lugar donde guardaste el archivo y debe salirte algo así:

  
5. ¡Listo! sólo queda subirlo a un servidor o nube que nos lo ponga como una Url de Javascript para trabajarlo como código, usaremos dropbox para subir nuestro .js creado en este post (click aquí) explico en detalle como hacerlo, no te preocupes que noes complejo para nada. 

Al final debe quedarte una URL similar a esta:
https://dl.dropboxusercontent.com/s/hcbnv2siy92dws4/recentpostetiqueta.js 

6. Una vez obtienes la URL de tu script que tiene la orden de que etiqueta debe filtrar únicamente, vamos al primer código el del paso 1 ¿Lo recuerdas? más arriba, ahí justo al final el fragmento en azul reemplaza todo ese link (.js) de ese script por el tuyo, cuando lo hagas copialo en donde desees en tu blog guarda los cambios y mira la magia.

Por fin, un buen gadget que te filtra por una etiqueta lo que muestra. 

Es todo en este post,

Hasta la próxima BloggeRs, 

0 comentarios:

Publicar un comentario

SÍGUENOS EN: