Một số hiệu ứng cho ảnh trong Blogger (cập nhật)


Như các bạn đều biết, để 1 bài đăng thật sự hiệu quả, gây sự chú ý của người đọc thì hình ảnh minh họa là không thể thiếu. Vì thế, hôm nay mình xin hướng dẫn cách tạo 1 số hiệu ứng lạ mắt cho ảnh minh họa, góp phần làm sinh động cho bài viết.

1. Tạo hiệu ứng thay đổi ảnh khi rê chuột (Rollover Image)
Để tạo được hiệu ứng này, thì hầu hết các trang hướng dẫn về ngôn ngữ HTML luôn đòi hòi phải cài thêm Javascript/ CSS cho Blog thì mới thực hiện được.
Tuy nhiên, để tránh rắc rối , dài dòng khi phải thêm những dòng code Javascript đó, thì Blogger Divya Sai đã hướng dẫn 1 thủ thuật HTML hết sức đơn giản, bạn chỉ việc chèn code dưới đây vào bài đăng theo như sau :
<a href="Đường Link của bạn"><img onmouseover="this.src='Hình ảnh thay thế'" onmouseout="this.src='Hình ảnh ban đầu'" src="Hình ảnh ban đầu" ></a>
Xem demo

2. Tạo viền tròn cho ảnh
Thủ thuật này sẽ giúp bạn tạo đường viền tròn cho bức ảnh, thay vì 4 góc vuông góc thường thấy mà không cần dùng tới Photoshop để chỉnh sửa. Tất cả việc bạn cần làm là upload ảnh từ PC hay copy link ảnh trên website (hỗ trợ định dạng JPG, PNG, GIF và BMP) và để Roundpic hoàn tất giùm bạn.
Xem demo


Image:
hay URL:

3. Tạo bóng mờ cho ảnh
Với trang web Dropshadowz , bạn có thể tạo thêm bóng mờ cho các bức ảnh minh họa của mình mà không hề tốn chút công sức nào. Bạn chỉ việc chọn File ảnh từ PC hay từ URL, rồi chỉnh sửa kích cỡ và màu nền cho ảnh , cuối cùng nhấn Generate Drop Shawdow để hoàn tất (hỗ trợ định dạng jpg, gif, png với dung lượng tối đa 300KB). Thanks bạn vuluganck đã chia sẻ thông tin cho mình :D
Xem demo

4. Tạo hiệu ứng phản chiếu cho ảnh
Có lẽ hiệu ứng reflect (phản chiếu) cho ảnh cũng không quá xa lạ đối với bạn, khi đây là 1 trong những hiệu ứng được sử dụng rộng rãi ở các trang web/blog . Photoshop có thể giúp bạn làm điều này, nhưng thật cầu kì và không cần thiết khi bạn đã có Reflectz . Cũng tương tự thủ thuật tạo bóng mờ, bạn chỉ việc upload hình hay chọn URL của ảnh , thiết lập độ dài của ảnh phản chiếu (Reflection Size) và độ mờ (Transparency) , cuối cùng nhấn Generate Image Reflection để hoàn tất.
Xem demo


Cập nhật vào 25/4 : Trên đây là 4 thủ thuật để tạo hiệu ứng cho ảnh minh họa. Hy vọng các bạn sẽ hài lòng, mình sẽ cố gắng cập nhật thêm các thủ thuật khác cho các bạn trong thời gian tới. Thân !

21 Nhận xét on "Một số hiệu ứng cho ảnh trong Blogger (cập nhật)"

vuluganck on 24 April 2009 at 15:19 said...
This comment has been removed by the author.
vuluganck on 24 April 2009 at 15:23 said...
This comment has been removed by the author.
vuluganck on 24 April 2009 at 15:24 said...

Và đây là hiệu ứng shadow cho ảnh : Herevà đây là demo của shadow ảnh ( trông cũng cực kì đẹp) : Here, bạn đính thêm cái này vào entry này luôn để share cho mọi người , sưu tập phải đủ , để kiếm thêm vài effect nữa.

Khi nào bạn thành công cái menu iQuery thì nói mình biết và chỉ mình làm nhé bạn.

NAD on 24 April 2009 at 22:08 said...

Hay, mình sẽ áp dụng vào một số widget có ảnh ở blog. Thanks :D

NAD on 26 April 2009 at 02:51 said...

Hình như có javascript nào là cho ảnh đổ bóng trên site thì phải :D

vuluganck on 26 April 2009 at 09:19 said...

Chào bạn , bạn biết host nào tốt nhất cho việc up file .swf ko ? Mình tìm wai ko thấy

boyproDX on 26 April 2009 at 12:27 said...

@NAD : Cái js mà bạn NAD nói có phải là mấy chữ kí trong các diễn đàn phải ko nhỉ :/ (hình như là tạo bóng của ảnh trên mặt nước). Nhưng mà dùng js vậy thì nó load lâu hơn so với ảnh không :)

@vuluganck : Mình search Google thì thấy có mấy trang sau, bạn test thử nhé megaswf.com, swfupload.com, swfcabin.com, spamtheweb.com/ul ...

vuluganck on 26 April 2009 at 21:03 said...

Thanks! Dĩ nhiên mình đã search những web đó rồi mới hỏi bạn.
Sao bạn lại ko đổi template nhìn cho hấp dẫn hơn tí nhỉ?
Mình đang thực hiện việc tách code hoàn chỉnh cái gọi là hiệu ứng "góc trang sách" , cái này dùng dể chuyển site hay là site phụ link tới site chính thì hay biết mấy.
Ai muốn xem thử thì vào Zenplate rồi xem góc trên phải màn hình.
Thủ thuật có 1 ko 2 cho blogspot, chỉ mới có trên wordpress.
Boyprodx mà giúp mình hoàn chỉnh code thì tốt quá.

vuluganck on 26 April 2009 at 21:13 said...

À dx ơi hình như đa số jquery ko hoạt động dc trên nền blogspot. Mình thấy là vậy , test nhiều lần rồi, crash hết

boyproDX on 26 April 2009 at 22:27 said...

@vuluganck : À, cái trang up .swf được đánh giá cao là spamtheweb.com/ul đó bạn. Bạn thử dùng 1 thời gian xem thế nào. Template thì có lẽ từ từ sẽ đổi sau :). Còn cái hiệu ứng của bạn, mình nhớ đó là banner dạng Flash tên là Peelbanner, mình chèn vào Blog thì ok.
Chà, jQuery ko dùng được à, vậy thì chuyến này Blogger ta không có gì hấp dẫn rồi :|

lecongtienlkvn on 6 May 2009 at 03:27 said...

Đẹp, Thanks nhìu

ktsduy on 1 August 2009 at 08:00 said...

Mình nhờ bạn giúp mình đoạn code làm xuất hiện 1 cái ảnh và khi nhấn vào cái ảnh đó thì liên kết với 1 link nào đó. Và 1 đoạn code tạo 1 button làm việc tương tự. Cám ơn!

boyproDX on 1 August 2009 at 11:07 said...

@ktsduy : Bạn xem hình này và sửa lại code theo ý mình nhé :D

KTSduy on 3 August 2009 at 11:03 said...

Cám ơn bạn!

KTSduy on 3 August 2009 at 14:21 said...

Cái button hình như bạn lộn rồi mình làm theo thì nó ra 1 ô nhập liệu.
Mình thử sửa sumit thành button
Thì nó ra được cái button nhưng kích vào nó cũng như không vậy.

boyproDX on 3 August 2009 at 18:21 said...

@KTSduy : Mình đã kiểm tra lại code, thấy không có vấn đề gì mà :| . Bạn xem demo trong screenshot mình chụp lại nhé : http://img2.pict.com/2b/43/5d/1399359/0/button.png

Phạm Quốc Duy on 3 August 2009 at 19:05 said...

Ok mình gỏ nhầm 1 chử . Cám ơn bạn đã nhiệt tình giúp. À sẳn quảng cáo tí: bạn có cần gì về autolisp cho acad thì nói mình nhé.

Phạm Quốc Duy on 12 August 2009 at 10:52 said...

Mình muốn lồng 1 cái ảnh bên dưới đoạn văn bản thì làm như nào vậy bạn!

boyproDX on 12 August 2009 at 14:45 said...

@Phạm Quốc Duy : Dùng thẻ img src="Link ảnh"/ (nhớ mở - đóng thẻ lại) để chèn ảnh vào. Bạn có thể nghiên cứu thêm bảng soạn thảo của BLoggger, nó có đầy đủ các chức năng cơ bản đấy.

Phạm Quốc Duy on 13 August 2009 at 09:58 said...

Cái bạn nói là chèn ảnh vào bài viết. mình muốn viết đoạn văn bản lên cái ảnh luôn ấy bạn! Đại khái gần giống như cách tạo khung cho code nhưng mình muốn mỗi bài mỗi ảnh khác nhau tùy theo nội dung.

Anonymous said...

fsdfsd:D

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3