Thứ Ba, 28 tháng 5, 2013

Tiện ích 3D Flash Slider cho Blogger : PieceMaker

PieceMaker là một trong hai plugin 3D Image Slider nổi tiếng nhất của Wordpress. Trong khi cu3er chỉ dừng ở phiên bản Beta và bắt đầu thu phí trên phiên bản chính thức thì PieceMaker đã có phiên bản 2 và vẫn hoàn toàn miễn phí. Với mục đích đem đến cho Blogger các tiện ích đẹp nhằm "thay đổi cái nhìn", lần này Thủ thuật blog sẽ hướng dẫn cách áp dụng PieceMaker trên Blogspot.

Download PieceMaker tại đây.


Tiến hành giải nén file vừa tải về, được một thư mục, trong đó chúng ta chỉ quan tâm tới các file sau:

 -  swfobject.js
 -  piecemaker.xml
 -  piecemaker.css
 -  piecemaker.swf

Bạn upload các file này lên DROPBOX. Tiếp theo, log in vào Blogger, tạo một widgetHTML/Javascript rồi paste đoạn code sau:
<script src="http://dl.dropbox.com/u/11103024/scripts/swfobject/swfobject.js" type="text/javascript">
</script>

<center><div id="piecemaker">
Put your alternative Non Flash content here.
</div></center>

<script type="text/javascript">
      var flashvars = {};
      flashvars.cssSource = "http://dl.dropbox.com/u/11103024/piecemaker.css";
    flashvars.xmlSource = "http://dl.dropbox.com/u/11103024/piecemaker.xml"; 
      var params = {};
      params.play = "true";
      params.menu = "false";
      params.scale = "showall";
      params.wmode = "transparent";
      params.allowfullscreen = "true";
      params.allowscriptaccess = "always";
      params.allownetworking = "all";  
      swfobject.embedSWF('http://dl.dropbox.com/u/11103024/piecemaker.swf', 'piecemaker', '940', '300', '10', null, flashvars, params, null);
</script>

Các link màu đỏ chính là các file mà chúng ta vừa upload lên DROPBOX, các giá trị màu xanh là kích cỡ của flash. Save widget.

Để tùy chỉnh Flash thì chúng ta edit file piecemaker.xml trong thư mục Public bằngNotepad, nó sẽ có một đoạn như thế này:
<Image Source=".../piecemaker2.png" Title="Lots of new Features">
   <Text>&lt;h1&gt;New hot Features&lt;/h1&gt;&lt;p&gt;The all new Piecemaker comes with lots of ...&lt;/p&gt;</Text>
    <Hyperlink URL="http://noct-land.blogspot.com" Target="_blank" />
 </Image>

Bạn chỉ việc thay đổi link ảnh, link feature và phần miêu tả cho phù hợp rồi save lại, nó sẽ tự động được cập nhật lên DROPBOX.

Ngoài ra, ta cũng có thể tùy chỉnh các hiệu ứng Slide theo ý thích cũng bằng cách editpiecemaker.xml, chi tiết thì bạn đọc hướng dẫn trên trang chủ chứ mình cũng không thể nói hết ở đây được.

Hiện tại thì mình thấy PieceMaker rất phổ biến bên Wordpress nhưng lại khá khiêm tốn trênBlogger, hy vọng trong tương lai sẽ có nhiều designer sử dụng Flash 3D này trênBlogspot.

Không có nhận xét nào:

Đăng nhận xét