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

/
PieceMaker 2
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 Noct 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 widget HTML/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ằng Notepad, 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 edit piecemaker.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ên Blogger, hy vọng trong tương lai sẽ có nhiều designer sử dụng Flash 3D này trên Blogspot.
Add a Comment

28 comments

một thủ thuật mới làm đẹp blog, giờ wp có gì thì blogspot có cái ấy :D + ưu điểm của blogspot nữa :-> hehe

2/13/2011 comment-delete

Cũng có nhiều thứ của WP mà không thể bắt chước trên Blogspot :((

2/13/2011 comment-delete

Cái này làm đẹp blog lên rất nhiều.

2/13/2011 comment-delete

Thủ thuật này là dành cho vip luôn rồi! Ông Noct này thiệt dễ phục ghê!

2/13/2011 comment-delete

Thêm cái này có làm chậm Blog không Noct? Mình chỉ sợ cái này làm giảm tốc độ load của Blog.

2/13/2011 comment-delete

Bất cứ cái gì thêm vào cũng làm chậm blog cả :D , chủ yếu là chậm nhiều hay ít thôi. Hôm trước tớ có test trên chính blog này rồi đấy.

Để đảm bảo tốc độ cho toàn blog thì chỉ nên đặt cái flash này ở trang chủ thôi.

2/13/2011 comment-delete

hiệu ứng này đẹp wá! cảm ơn nha :)

3/20/2011 comment-delete

Saoo mình up lên dropbox rồi mà không thể lấy link trực tiếp dạng piecemaker.xml được nhỉ, chỉ có đuôi piecemaker.xml.w=hshghsu thôi. Bạn giúp mình với

4/06/2011 comment-delete

Bạn đã đọc kĩ hướng dẫn chưa ? Nếu vẫn chưa làm được thì có thể xem ảnh này nhé.

4/06/2011 comment-delete

Bài này có một trang nước ngoài viết y hệt hay sao đó

5/04/2011 comment-delete

Ý bạn là họ copy của tôi hay ngược lại ?

5/04/2011 comment-delete

Noct là người giới thiệu tiện ích này. Bạn ý có công lớn. Chứ có phải copy gì đâu

5/04/2011 comment-delete

Bạn ơi, sao mình làm theo hướng dẫn mà ko thấy hiện gì hết nhỉ?

Bạn copy y nguyên đoạn mã trong bài xem có chạy không ? Nếu nó vẫn hoạt động thì chỉ có thể là do bạn làm sai hoặc thiếu sót gì đó.

5/06/2011 comment-delete

vẫn ko chạy anh ạ, nó báo thế này nè anh: Put your alternative Non Flash content here

Ok! Mình đã test thành công! Mà bạn có thể hướng dẫn mình làm thế nào để nó xuất hiện cố định ở trang chủ ko?

Tham khảo lệnh <b:if trong bài khung thông báo cho blog.

5/06/2011 comment-delete

Em chào bác, bác có thể xem giúp em được không ạ.
Em đã làm nhưng blog http://www.xusu.tk của em vẫn hiện cái flash trong bài viết của bác ạ.
Đậy là 4 file và link, bác xem giúp em nhá.
Em cảm ơn bác nhiều!

http://www.mediafire.com/?nspsu3b826b19ve

1/12/2012 comment-delete

@Hội XuSu bạn đã đọc hướng dẫn ở trên chưa ?

1/14/2012 comment-delete

err doesn't work..

3/22/2012 comment-delete

Em đã thử slider này.
Rất tuyệt, tuy nhiên có một vài lưu ý thế này.
Đã thử qua các host imageshack, upanh, photobucket thì silder này ko nhận hiển thị, nhưng nếu ảnh được up từ drop box thì lại hiển thị.
Các link đều là direct ko hiểu sao lại vậy.

Admin xem có cách khắc phục ko ạ, nếu vậy thì hơi tù.
Và còn 1 chút này nữa là admin xem có thể resize ảnh cho vừa với khung ko ạ, resize tự động ạ, vì nếu để ảnh khác kích thước cho vào nhìn rất xâu ạ.

5/25/2012 comment-delete

Sao mình làm theo hướng dẫn nhưng chỉ toàn là trang trắng

8/28/2012 comment-delete

oh trời sao mà file SWF nó ko chạy thế này ai chỉ giúp với @@

10/05/2012 comment-delete

bạn giúp mình được ko? hiện tại mình ko tài nào chỉnh được nội dung và màu sắc của flash 3D này tren blog được. Mình mới mày mò làm ah. Cảm ơn bạn nhiều.

12/29/2012 comment-delete

http://nghiadtkt.blogspot.com/ blog của mình, bạn chỉ mình cái.

12/29/2012 comment-delete

bạn chỉ cho mình được ko, mình đưa vào blog được nhưng chẳng hiệu chỉnh được gì cả. Rãnh chỉ mình cái, thanks bạn trước, ^^

12/29/2012 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License