Display Pinterest images in a "gadget" for Blogspot/Blogger blogs

Pinterest Gadget for Blogger

<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: 6,
			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>


<style type="text/css">
.rssFeed a {
color: #444;
text-decoration: 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;
        overflow: hidden;
        padding: 6px;
        float: left;
        z-index: 1;
        border-top: none !important;
}

/* This part of the style shows the full photo when the thumbnail is hovered. If you'd prefer not to use this, remove .rssBody li:hover, its curly braces, and everything inside its curly braces. This was designed for a left sidebar on Blogger. For a right sidebar, play with the translate numbers until the enlarged photo moves the way you want it to. */

.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 type="text/javascript">

/** use your own Pinterest username in the rssfeed url. To display your latest photos from all boards, use http://www.pinterest.com/USER-NAME-HERE/feed.rss to show a specific board, use http://www.pinterest.com/USER-NAME-HERE/BOARD-NAME-HERE/rss **/

;(function($) {

$(document).ready(function () {
$('#pinterest').rssfeed('http://www.pinterest.com/YOUR-USER-NAME/feed.rss', {
limit: 6,
snippet: false,
header: false,
date: false
});
});
})(jQuery);
</script>
<!-- Optional logo and gadget title. To use, uncomment it and add in your own Pinterest url, then place your own image link in the quotation marks after img src. -->

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