Dùng Pinterest widget cho Blogger để tạo gallery ảnh chuyên nghiệp

Chúng ta trở lại với MXH Pinterest đang nóng. Hôm nay HHV sẽ hướng dẫn các bạn dùng Pinterest widget cho Blogger để tạo một gallery ảnh chuyên nghiệp. Trước giờ tạo gallery ảnh thường phức tạp và phải làm thủ công. Việc tạo gallerry bằng Pinterest widget cho Blogger rất đơn giản, dễ dàng và hơn nữa tạo sự kết nối rất tốt cho giữ blog của bạn và tài khoản Pinterest. Tuy nhiên cũng xin nói thêm rằng Pinterest widget này còn dành cho cả những website thông thường chứ không riêng gì Blogger/Blogspot.

Xin mời xem phần demo trước khi bắt tay vào việc nhé

1. Code

Hãy tạo một html widget ở sidebar và chép toàn bộ đoạn code dưới này vào để bộ sưu tập ảnh này hiện trên blog. Hoặc cũng có thể làm giống HHV, tạo một trang gallery ảnh riêng bằng cách tạo một trang tĩnh, chuyển sang chế độ chỉnh sửa html rồi dán đoạn code này vào.

<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/
 **/
(function($){
 var current = null; 
 $.fn.rssfeed = function(url, options) { 
  // Set plugin defaults
  var defaults = {
   limit: 6,
   titletag: 'h4',
   content: true,
   snippet: true,
   showerror: true,
   errormsg: '',
   key: null
  };  
  var options = $.extend(defaults, options); 
  // Functions
  return this.each(function(i, e) {
   var $e = $(e);
   // Add feed class to user div
   if (!$e.hasClass('rssFeed')) $e.addClass('rssFeed');
   // Check for valid url
   if(url == null) return false;
   // Create Google Feed API address
   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;
   // Send request
   $.getJSON(api, function(data){
    // Check for error
    if (data.responseStatus == 200) {
     // Process the feeds
     _callback(e, data.responseData.feed, options);
    } else {
     // Handle error if required
     if (options.showerror)
      if (options.errormsg != '') {
       var msg = options.errormsg;
      } else {
       var msg = data.responseDetails;
      };
      $(e).html('<div class="rssError"><p>'+ msg +'</p></div>');
    };
   });    
  });
 };
 // Callback function to create HTML result
 var _callback = function(e, feeds, options) {
  if (!feeds) {
   return false;
  }
  var html = ''; 
  var row = 'odd'; 
  // Add body
  html += '<div class="rssBody">' +
   '<ul>';
  // Add feeds
  for (var i=0; i<feeds.entries.length; i++) {
   // Get individual feed
   var entry = feeds.entries[i];
   // Add feed row
   html += '<li class="rssRow '+row+'">' + 
    '<'+ options.titletag +'><a href="'+ entry.link +'" title="View this feed at '+ feeds.title +'">'+ entry.title +'</a></'+ options.titletag +'>'
   if (options.date) html += '<div>'+ pubDate +'</div>'
   if (options.content) {
    // Use feed snippet if available and optioned
    if (options.snippet && entry.contentSnippet != '') {
     var content = entry.contentSnippet;
    } else {
     var content = entry.content;
    }
    html += '<p><a href="'+entry.link+'" title="'+ entry.title +' " target="_blank">'+ content +'</a></p>'
   }
   html += '</li>';
   // Alternate row classes
   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);
  });
});          
 };
})(jQuery);
</script>
<style type="text/css">
body {
 margin: 0px;
}
.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;
        overflow: hidden;
        padding: 6px;
        float: left;
        z-index: 1;
}
.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">
$(document).ready(function () {
 $('#pinterest').rssfeed('http://www.pinterest.com/YOUR-USER-NAME/feed.rss', {
  limit: 6,
  snippet: false,
  header: false,
  date: false
 });
});
</script>
<a href="http://www.pinterest.com/YOUR-USER-NAME" rel="nofollow"><img style="border:0px; padding:0px" src="http://passets-cdn.pinterest.com/images/about/follow-on-pinterest-button.png"/></a>
<div id="pinterest"></div>

2. Hiệu chỉnh code

a. Đổi tên tài khoản

Bạn tìm đến dòng

http://www.pinterest.com/YOUR-USER-NAME/feed.rss

thay thế YOUR-USER-NAME bằng username tài khoản của bạn. VD.

http://www.pinterest.com/honghoavi/feed.rss

Trong trường hợp bạn chỉ muốn “show một số hàng” nhất định trong một board nào đó thì dùng

http://www.pinterest.com/YOUR-USER-NAME/YOUR-BOARD-NAME/rss

b. Thay đổi Logo Pinterest và đường dẫn.

Bạn tìm đến dòng code ở hàng cuối cùng.

<a href="http://www.pinterest.com/YOUR-USER-NAME" rel="nofollow"><img style="border:0px; padding:0px" src="http://passets-cdn.pinterest.com/images/about/follow-on-pinterest-button.png"/></a>

Thay YOUR-USER-NAME bằng username tài khoản Pinterest. Thay http://passets-cdn.pinterest.com/images/about/follow-on-pinterest-button.png bằng logo mình thích. Click chuột phải và chọn Copy image URL để lấy link

  

  

c. Số ảnh, kích thước ảnh và hiệu ứng hover

Mặc định số ảnh widget hiển thị là 6. Bạn đọc có thể tùy chỉnh số ảnh được hiển thị tùy theo kích thước của gallery, tuy nhiên nếu số ảnh quá lớn thì blog sẽ tải rất chậm chạp. Bạn tìm đến đoạn đoạn code limit: 6, và chỉnh lại thông số. Có cả thảy 2 đoạn code như vậy bạn phải sửa cả 2 đồng nhất.

Đoạn code sau quy định kích thước từng bức ảnh trong Gallery ảnh. Hãy chỉnh sửa các thông số width, height và padding theo ý thích

.rssBody li {
        position: relative;
        color: transparent;
        width: 100px;
        height: 100px;
        overflow: hidden;
        padding: 6px;
        float: left;
        z-index: 1;
}

Đoạn code sau quy định hiệu ứng hover. Số đầu biểu thị cho tọa độ x, và số sau là tọa độ y của bức ảnh sau khi phóng lớn. Thật khó để giải thích trong vài dòng do vậy bạn cứ việc thay đổi thử sai làm sao cho phù hợp với blog mình. Lưu ý phải sửa cùng lúc cả 5 dòng code.

.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); 
}

3. Kết luận

Pinterest widget sẽ tự động lấy ảnh từ tài khoản Pinterest để cập nhật vì vậy bạn hãy Pin thường xuyên để tạo nét tươi mới cho Blog của mình. HHV nghĩ rằng widget này thực sự đáng giá dành cho những bạn yêu thích hình ảnh.

Cá nhân HHV thích Pinterest vì nó bảo đảm được 3 tiêu chí:

• Lưu trữ hình ảnh
• Tạo bộ sưu tập cá nhân
• Chia sẻ bộ sưu tập với mọi người

Giờ đây khi có Gallery ảnh từ Pinterest sự chia sẻ của bạn không còn giới hạn nữa, bạn có thể nhúng gallery ảnh này vào vào bất kỳ đâu và tuyệt hơn nữa là nó tự động cập nhật theo từng bước chân của bạn.

Hồng Hòa Vi

Cập nhật

Pinterest gallery widget này cần dùng đến thư viện jquery nên bạn cần chèn thư viện này vào blog. Jquery có rất nhiều ứng dụng nên việc chèn vào là cần thiết. Nếu blog bạn đã có thì bỏ qua bước này.

Tìm đến thẻ </head> và chèn vào ngay trước nó đoạn code

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Thanks Marie for her awesome job!