Gadget:Flickr Feeds para Blogger

el
Flickr Feeds es un Gadget que actualizara tus fotos automaticamente cuando las subas a tu cuenta en Flickr de forma automatica se mostraran en el gadget que aparece en blogger.
Flickr Feeds para Blogger con Jquery
  • * Ve a Plantilla y luego das click en Edicion de HTML.
  • * Luego busca la etiqueta </head> y pega lo siguiente encima de ella.
<link href="http://dl.dropbox.com/u/53097108/ihojosestudios/example/flickr-feeds/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://dl.dropbox.com/u/53097108/ihojosestudios/example/flickr-feeds/colorbox.css" rel="stylesheet" type="text/css" media="screen" /><!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"/>
<script type='text/javascript' src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/flickr-feeds/jquery.colorbox-min.js"/>
<script type='text/javascript' src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/flickr-feeds/jquery.cycle.all.min.js"/>
<script type='text/javascript' src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/flickr-feeds/jflickrfeed.min.js"/> 
  • * Descarga este archivo setup.js y edita lo siguiente.
$(document).ready(function(){

    $('#basicuse').jflickrfeed({
        limit: 14,
        qstrings: {
            id: '62017751@N02'
        },
        itemTemplate: '<li><a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a></li>'
    });
   
    $('#cbox').jflickrfeed({
        limit: 14,
        qstrings: {
            id: '62017751@N02'
        },
        itemTemplate: '<li>'+
                        '<a rel="colorbox" href="{{image}}" title="{{title}}">' +
                            '<img src="{{image_s}}" alt="{{title}}" />' +
                        '</a>' +
                      '</li>'
    }, function(data) {
        $('#cbox a').colorbox();
    });
   
    $('#cycle').jflickrfeed({
        limit: 14,
        qstrings: {
            id: '62017751@N02'
        },
        itemTemplate: '<li><img src="{{image}}" alt="{{title}}" /><div>{{title}}</div></li>'
    }, function(data) {
        $('#cycle div').hide();
        $('#cycle').cycle({
            timeout: 5000
        });
        $('#cycle li').hover(function(){
            $(this).children('div').show();
        },function(){
            $(this).children('div').hide();
        });
    });
   
    $('#nocallback').jflickrfeed({
        limit: 4,
        qstrings: {
            id: '62017751@N02'
        },
        useTemplate: false,
        itemCallback: function(item){
            $(this).append("<li><img src='" + item.image_m + "' alt=''/></li>");
        }
    });

});
  • * La parte de Purpura es donde pondras el numero maximo de fotos a mostrar y lo que esta en rojo es la ID del usuario.
  • * Para saber tu ID de usuario ve a este sitio idgettr.com y pones tu nombre de usuario donde lo indica.
http://www.flickr.com/photos/username/
ejemplo:
http://www.flickr.com/photos/iho_jose/
Das click en Find y aparecera tu ID de usuario, ejemplo
id: 62017751@N02
  • * Luego de editar el documento, subelo y ponlo antes de </head>. para subir el archivo puedes utilizar sites.google.com o dropbox.com.
    • * Guardas los cambios y luego ve a Diseño.
    • * y añade nuevo Gadget HTML/Javascript y puedes agregar cualquiera de estos. 
    __________________________________________________________________________


    Vistas en Miniatura

      <ul id="basicuse" class="fthumbs"></ul>
      __________________________________________________________________________


      Ciclo, diapositivas

        <ul id="cycle"></ul>
        __________________________________________________________________________


        Fotos medianas de vista previa

          <ul id="nocallback" class="fthumbs"></ul>

          Fuente | gethifi.com