Thêm 1 cách tạo hiệu ứng zoom cho ảnh trong Blogger


Như các bạn đã biết, vừa qua mình mới giới thiệu cách tạo hiệu ứng zoom cho ảnh trong Blogger với FancyZoom. Tuy nhiên, nhận thấy FancyZoom còn nhiều khuyết điểm nên hôm nay, mình sẽ giới thiệu 1 cách mới để tạo hiệu ứng zoom cho ảnh nhờ mã Lightbox. Mời các bạn xem qua :
  1. Đầu tiên, các bạn đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng mẫu tiện ích)
  2. Thêm đoạn code bên dưới vào ngay bên trên thẻ </head>
    <link href='http://boyprodx.110mb.com/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
    <script src='http://boyprodx.110mb.com/prototype.js' type='text/javascript'/>
    <script src='http://boyprodx.110mb.com/scriptaculous.js?load=effects,builder' type='text/javascript'/>
    <script src='http://boyprodx.110mb.com/lightbox.js' type='text/javascript'/>
  3. Save lại template .
Vậy là bạn đã thiết lập được tính năng zoom cho Blogger rồi đấy. Thủ thuật này tuy dùng nhiều file .js hơn thủ thuật cũ, nhưng do không thay đổi thẻ <body> nên sẽ load nhanh hơn và mượt mà hơn thủ thuật cũ. Và tất nhiên, để dùng được tính năng zoom thì bạn không dùng thẻ <img src="Link hình" /> để chèn hình nữa, mà phải dùng code sau :
<a href="Link hình" rel="lightbox" title="Tên của ảnh"><img src="Link hình" width="Chiều dài thumbnail" height="Chiều cao thumbnail" /></a>
chẳng hạn như :
<a href="http://img24.imageshack.us/img24/1162/banner2009sa2.jpg" rel="lightbox" title="Banner Blog tin học"><img src="http://img24.imageshack.us/img24/1162/banner2009sa2.jpg" width="300" height="100" /></a>

P/s : Mình đã giới thiệu xong thủ thuật tạo hiệu ứng zoom cho ảnh bằng Lightbox rồi. Bạn có thể xem thử hiệu ứng tại đây . Nếu bạn có thắc mắc, ý kiến, hãy gửi comment cho mình nhé. Mình sẽ trả lời trong thời gian nhanh nhất. Thân chào !

19 Nhận xét on "Thêm 1 cách tạo hiệu ứng zoom cho ảnh trong Blogger"

NAD on 17 April 2009 at 01:25 said...

Bóc tem thủ thuật mới :D

docaocuong on 17 April 2009 at 12:22 said...

còn cách nào mà khi mình post tự nó thu lại như Vbulletin ko anh? cách này cực quá.

Em soạn sẵn trên email rồi bắn một phát qua blogspot ko àh

Benjami Tennyson on 17 April 2009 at 18:27 said...

@docaocuong : Hix, mình đành chịu thôi. Tại vì đây ko phải là chức năng chính thức của Blogger mà do ta tự can thiệp vào mã nguồn, nên phải thực hiện theo 1 quy tắc nhất định.
Nếu có cách nào khác hay và tiện lợi hơn thì mình sẽ giới thiệu liền cho mọi người, bạn yên tâm nhé :D

vuluganck on 18 April 2009 at 05:19 said...

Xin hỏi bạn biết cách thay đổi khung cho comment dc ko? Mặc định của khung comment của Google xấu quá , mình muốn làm kiểu cách cho từng ô của mỗi comment cho đẹp ko thì nhìn vô chẳng biết là comment của ai.
Cám ơn bạn nhé

Ngankvn ® on 18 April 2009 at 17:00 said...

Những hiệu ứng cho ảnh này luôn phải chờ blog Load xong nhỉ ???

Ít nhất thì khi blog chưa load xong mà click vào hình thì nó phải mở ở tab mới , đằng này nó thay thế trang đang xem bằng bức hình đó....

Có khắc Phục đc ko BloyProDX ??? Nghĩa là khi blog chưa load xong thì click vào hình vẫn có hiệu ứng hoặc sẽ mở ảnh ra ở tab mới ???

Benjami Tennyson on 19 April 2009 at 12:53 said...

@vuluganck : Mình chỉ biết thay đổi độ dài , rộng của khung comment à, chứ thay đổi giao diện của khung comment thì ... vượt quá khả năng của mình :D

@Ngankvn ® : Ngân chèn thêm target=blank vào mã a href là nó sẽ nhảy sang tab (hoặc windows) khác khi chưa load xong file javascript.

vuluganck on 20 April 2009 at 05:26 said...

Thế mình hỏi bạn tất cả luôn 1 thể :
1-Bạn biết làm khung "Link to this post embemed" phía dưới bài viết ko bạn? có sẵn link cho visitors copy giống như youtube ấy.
2-Bỗng nhiên cả tuần nay alexa của mình bị tụt 1 cách trầm trọng ko hiểu vì sao , mình vẫn đặt alexa rank widget trên blog mình!
3-Mình nhờ bạn nếu có " multiple tabs" hay gọi cách khác là "tab views" nào đẹp thì bạn share cho mình nhé ! trên mạng toàn là "tab views" xấu òm ko hợp với nhiều blog.
Cám ơn bạn

Benjami Tennyson on 21 April 2009 at 13:46 said...

@vuluganck : Xin trả lời các câu hỏi của bạn :
1. Cái này mình không rõ lắm, để mình hỏi bạn Ngânkvn tý rồi sẽ share cho bạn sau nha ^^!
2. Blog của mình cũng bị tuột mấy lần rồi. Chắc do web khác tăng rank cao quá nên blog của chúng ta bị mất hạng. Mà hình như bạn có 1 blog rank 200k mà :D
3. Search Google cả buổi mà toàn thấy tab với giao diện thông thường ko, cái này chắc phải kiếm template nào có tab views đẹp tí rồi tách code qua để xài :P

vuluganck on 22 April 2009 at 16:30 said...

đúng thế , mình có 1 blog alexa hạng cũng khá, nhưng hiện tại mỗi ngày nó tụt ít nhất là 2k chẳng hiểu sao.
Mình đang nghiên cứu về jQuery để đem vào blogspot, nếu bạn thích thì mình với bạn cùng tìm hiểu nó rồi đem vào blog, ngôn ngữ jQuery này nhanh hơn JavaScript lỗi thời nhiều lắm , load rất nhanh.
hiện tại trang ...stop.net ( trang mà bạn hay viếng thăm :D) có dùng slide rất đẹp sử dụng jQuery , mình làm theo được rồi nhưng đó cũng chưa phải là khó lắm, cái mình quan tâm nhất là về menu ,tab của jQuery.
bạn xem vài ví dụ ở đây nè , thích thì làm chung nhé:

Ví dụ 1Ví dụ 2Ví dụ 3

Ngankvn ® on 22 April 2009 at 17:00 said...

JQuery mình cũng nghe nói tới nhiều , phải nói là "lắm trò hay" :))

Mấy cái Ví dụ vuluganck cho nhìn hay quá , mượt cứ như là Flash ấy :D

Nếu các bạn nghiên cứu và Share cho mọi người thì tốt quá !!!

Benjami Tennyson on 22 April 2009 at 17:04 said...

@vuluganck : jQuery à, mình có 1 blog hay viết về ngôn ngữ này lắm , xem tại đây . Hiện tại thì mình còn bận nhiều việc quá, nên chưa thể cùng bạn tìm hiểu được, nếu được thì bạn gửi mình nick GMail hay Yahoo đều được, có gì chat chit chút :D
P/s : Mình mới nghe tới chứ chưa có cơ hội thử nghiệm, nên còn khá gà về jQuery. Có gì bạn giúp đỡ mình hen :D

Benjami Tennyson on 22 April 2009 at 18:10 said...

@vuluganck : À sẵn bạn gửi mail qua cho mình đi, mình hỏi được cái khung Link to this post embedded cho bạn rồi ^^! .
Thanks bạn Ẹt & Ngân giúp đỡ :D

vuluganck on 23 April 2009 at 05:09 said...

nick yahoo mình là zendersto@yahoo.com
mấy cái jQuery của bạn chỉ là những widget thông thường thôi, ko phải là design blog , cái design khủng khiếp và khó hơn nhiều.
Mấy hôm nay mình cũng đang thi học kì 2 nên cũng bận, cuối tuần này mình sẽ nghiên cứu về nó.
Có gì liên lạc mình nhé.
Bạn cứ gửi cái embemmed code frame cho mình qua mail đó.
Thanks bạn
Cái trang web jQuery của bạn đẹp đấy

vuluganck on 23 April 2009 at 05:12 said...

À đâu cũng có menu , design đấy chứ
Vậy là bạn cũng biết khá nhiều về nó rồi còn gì

vuluganck on 23 April 2009 at 05:14 said...

Ủa té ra trang đó ko phải của bạn àh?Hiểu nhầm rồi , tưởng web đó của bạn , feeder đến chục ngàn người.Chỉ cần giỏi về jQuery đảm bảo chỉ trong 1 tháng blog mình sẽ tăng rank và traffic tăng tột cùng.Cái này blogger ít biết lắm

Benjami Tennyson on 23 April 2009 at 15:08 said...

@vuluganck : Trời, mình làm gì được như vậy :D . Web đó mình vô tình tìm thấy trên mạng thôi !

JEFFERSON LA [JEFFY] on 19 July 2009 at 13:49 said...

Bạn cho mình hỏi . Tại sao mỗi lần mình dùng thủ thuật này là đăng nhập bằng IE thì nó bị lỗi và không đăng nhập được . Chỉ mở dc blog bằng fire fox . Khi mình tháo nó ra thì đăng nhập lại bằng IE thì không có lỗi gì . Mình thích cái light box này lắm . Bạn có thể cho mình biết phải làm sao không ?

boyproDX on 19 July 2009 at 16:22 said...

@JEFFERSON LA [JEFFY]: Cơ bản là do IE quá lỗi thời, không chạy được code trong thủ thuật. Nếu bạn test với IE7 mà thấy hoạt động tốt, thì mình nghĩ bạn nên dùng lun (IE6 đang giảm bớt thị phần :D ).
Nếu sợ mất visitor dùng IE6, bạn hãy thử FancyZoom thay cho Lightbox xem (tác giả code FancyZoom test thành công trên IE6). Chúc bạn thành công ^^!

conkhi_hu on 28 July 2010 at 08:56 said...

cho tui hỏi có hiệu ứng Zoom text ko ?

:)) ;)) ;;) :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