Slide do Pinterest no blog

Para quem tem conta no site de compartilhamento de imagens Pinterest e possui também um blog, pode ser interessante ter em seu blog um widget de slides de imagens do Pinterest. Fácil de instalar e com um layout bonito, pode aumentar seus seguidores no site.  Depois de uma busca, encontrei o blog Code it Pretty que desenvolveu e compartilhou o código.




Clique em Layout

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código, colocando o seu nick de usuário do Pinterest no local indicado.

<style>
#pinterest-wid {
margin: 10px 20px;
padding: 3px 6px;
}


.rssFeed a {
color: #444;
text-decoration: none;
        text-display: none;
}
.rssBody ul {
list-style: none;
}
.rssBody ul, .rssRow, .rssRow h4, .rssRow p {
margin: 0;
padding: 0;
}

.rssBody li {
        position: relative;
        color: transparent;
        width: 100px;
        height: 100px;
        margin:3px 3px;
        overflow: hidden;
        padding: 6px;
        float: left;
        z-index: 1;
        border-top: none !important;
}



.rssBody li:hover {
font-size: 1px;
overflow: visible;
z-index: 1000;
-ms-transform: translate(-60px,-10px);
-webkit-transform: translate(-60px,-10px);
-o-transform: translate(-60px,-10px);
-moz-transform: translate(-60px,-10px);
transform: translate(-60px, -10px);
}

/* end hover image effect */

.rssRow {
padding: 3px;
}
.rssRow h4 {
display: none;
}
.rssRow div {
color: #666;
margin: 0.2em 0 0.4em 0;
}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
 * Plugin: jquery.zRSSFeed
 *
 * Version: 1.0.1
 * (c) Copyright 2010, Zazar Ltd
 *
 * Description: jQuery plugin for display of RSS feeds via Google Feed API
 * (Based on original plugin jGFeed by jQuery HowTo)
 *
 * Modified by Richard Mackney (originally for Instagram images, see https://gist.github.com/865838)
 * Modified further by Marie Mosley for a Pinterest "gadget" for Blogger.
 * Tutorial for use with Blogspot at: http://www.codeitpretty.com/2012/03/pinterest-gadget-for-blogger.html
 **/
;(function($) {
(function($){

$.fn.rssfeed = function(url, options) {
var defaults = {
limit: 9,
content: true,
key: null
};
var options = $.extend(defaults, options);
return this.each(function(i, e) {
var $e = $(e);
if (!$e.hasClass('rssFeed')) $e.addClass('rssFeed');
if(url == null) return false;
            var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + url;
if (options.limit != null) api += "&num=" + options.limit;
if (options.key != null) api += "&key=" + options.key;
            $.getJSON(api, function(data){
if (data.responseStatus == 200) {
               _callback(e, data.responseData.feed, options);
}
});
});
};



var _callback = function(e, feeds, options) {
if (!feeds) {
return false;
}
var html = '';
var row = 'odd';
html += '<div class="rssBody">' +
'<ul>';
for (var i=0; i<feeds.entries.length; i++) {
var entry = feeds.entries[i];
html += '<li class="rssRow '+row+'">'
if (options.content) {
var content = entry.content;
html += '<a href="'+entry.link+'">'+ content +'</a>'
}
html += '</li>';
         
if (row == 'odd') {
row = 'even';
} else {
row = 'odd';
}
}
html += '</ul>' +
'</div>'


$(e).html(html);

//correct href for images so they point to Pinterest
$(function() {
  $('.rssFeed a').each(function() {
    var href = $(this).attr('href');
    $(this).attr('href', 'http://www.pinterest.com' + href);
    $('.rssFeed img').attr('nopin','nopin');
  });
});

         
};
})(jQuery);
})(jQuery);
</script>
<div id="pinterest-wid">
<script type="text/javascript">
;(function($) {
$(document).ready(function () {
$('#pinterest').rssfeed('http://www.pinterest.com/SEU NICK NO PINTEREST/feed.rss', {
limit: 9,
snippet: false,
header: false,
date: false
});
});
})(jQuery);
</script>

<!-- <a href=""><img src=""><br />Latest Pins</a> -->
<div id="pinterest"></div></div>