Tạo hiệu ứng zoom cho ảnh trong Blogger


Thông thường , khi vào các forum, các bạn đều gặp qua chức năng zoom ảnh mỗi khi người viết đăng tải ảnh có kích thước khá lớn. Chức năng này giúp người đọc nhanh chóng phóng to, thu nhỏ được hình ảnh một cách dễ dàng. Thủ thuật này khá hay, và mình sẽ giới thiệu cách tạo hiệu ứng zoom này cho Blogger nhờ file JS có tên FancyZoom. 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>
<script src='http://boyprodx.110mb.com/ZoomImage.js' type='text/javascript'/>
<script src='http://boyprodx.110mb.com/ZoomImageinHTML.js' type='text/javascript'/>
3. Sau đó, kéo xuống khoảng dưới, xóa thẻ <body> và thay thế bằng code
<body onload="setupZoom()">
4. Save lại template .

Vậy là bạn đã thiết lập được tính năng zoom cho Blogger rồi đấy. Tuy nhiên, để dùng được tính năng này, thì kể từ giờ , 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"><img src="Link hình" width="300" height="200" border="0" /></a>
Lưu ý :
Link hình phải có đuôi mở rộng như .jpg , .png, .gif ...
Width : độ dài thumbnail của ảnh.
Height : chiều cao thumbnail của ảnh.

Ví dụ như :<a href="http://i259.photobucket.com/albums/hh283/boy_proDX/Banner_New_2009.png"><img src="http://i259.photobucket.com/albums/hh283/boy_proDX/Banner_New_2009.png" height="200" width="300" border="0" /></a>

P/s : Mình đã giới thiệu xong thủ thuật tạo hiệu ứng zoom cho ảnh rồi. 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 !

27 Nhận xét on "Tạo hiệu ứng zoom cho ảnh trong Blogger"

Anonymous said...

thủ thuật rất hay, theo mình cái height là ko cần thiết, vì cứ cho width bao là nó tự kéo size về cho phù hợp à.
Cho mình hỏi khi load blog chứa ảnh thumbnail như vậy thì có tăng tốc độ duyệt trang ko, có giảm dung lượng ảnh tí nào ko?

Benjami Tennyson on 9 April 2009 at 22:59 said...

Cái này mình cũng ko dám chắc lắm, bởi vì khó mà đo chính xác được tốc độ load của trang được . Và dung lượng của ảnh vẫn giữ nguyên, ko hề giảm (mình xem properties thì thấy vậy)

DOREMON on 10 April 2009 at 00:44 said...

rất hay!!thanks nhé

vuluganck on 10 April 2009 at 05:53 said...

đây là điều mà mình đã nhờ boyprodx làm , cám ơn bạn nhiều!

vuluganck on 10 April 2009 at 05:58 said...

hồi đó mình biết dc có code dùng để disable right click trên blogger để giảm thiểu chuyện copy image, và mình vừa mới có dc 1 đoạn code cho blogger dùng để disable high light text trong blogger để tránh bị copy bài viết , nhưng khổ nỗi là nó ko cho copy code luôn , nên khó khăn đối với người đọc , ko biết bạn có thể sửa lại đoạn code sao cho disable highlight nhưng vẫn highlight dc code ko bạn ?

Cám ơn nhiều nhé , nếu bạn cần code thì nói mình

Benjami Tennyson on 10 April 2009 at 10:37 said...

@DOREMON : Hì, ko có chi ^^!

@vuluganck : Mình chưa dùng code disable bao giờ, nên không rành về cái này lắm :D .
Nhưng theo mình nghĩ, việc disable-click vẫn ko hoàn toàn hiệu quả . Chẳng hạn bạn dùng Firefox, trong Options, bạn bỏ chọn Enable Javascript, thì đảm bảo disable-click sẽ vô hiệu. Chính vì thế, tốt nhất thì khi viết bài, bạn nên đóng dấu (watermark) các hình ảnh minh họa để giữ bản quyền (Hướng dẫn water-mark tại đâyđây).
Ngoài ra, vấn đề bản quyền cũng còn tùy thuộc vào ý thức của người đọc, nên khó có thể xử lý việc này lắm :D

NAD on 10 April 2009 at 12:01 said...

Hay quá nhưng mà để sử dụng thì hơi lằng nhằng nhỉ :D. Thanks

vuluganck on 10 April 2009 at 16:43 said...

mình thấy cách làm zoom hình này thủ công quá bạn nhỉ? mình có hàng ngàn tấm hình về phong cảnh độ phân giải cao , và giờ phải add lại từng code 1 thì quả là...đuối ! mà cái code của bạn có vẻ load chậm đó bạn , phải đợi 1 lúc lâu sau code mới họat động và hình mới dc zoom

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

@NAD : Hì, tại vì đây là hướng dẫn chính thức của tác giả FancyZoom mà, mình phải làm theo thôi :D ! Tuy lằng nhằng nhưng cũng đơn giản, ko phức tạp ^^!

@vuluganck : Vì đây ko phải chức năng chính thức của Blogger nên mình phải chỉnh lại cho hợp lý là điều tất nhiên rồi ^^! Phải chịu khó thôi :P
Nếu bạn có host riêng dành cho Blog và file .js , thì đảm bảo sẽ chạy nhanh. Mình xài host free nên đành chịu thôi :D

vuluganck on 11 April 2009 at 18:33 said...

thế bạn dùng host nào free thế bạn ? mình chưa biết cách host script! à tiện thể bạn có thể lấy dc slide code của trang web này ko ?

xưa address nó là , cahayabiru.blogspot.com
đó là bạn mình người indo , english tốt, giao tiếp dễ hiểu, giờ blog đó đã chuyển thành cahayabiru.com cung cấp các mẫu template slide vô cùng đẹp(1 số template free, bạn dow về và xem slide thế nào.)
Mình nhiều lần xin code slide nhưng tách code script và CSS vẫn chưa thành công.
Nhờ bạn nếu down template về và tách dùm xem dc ko ? tiện thể bạn show code chia sẻ cho mọi người.
Cám ơn nhé

vuluganck on 11 April 2009 at 18:38 said...

à mình xin nói luôn kinh nghiệm Biru , trước khi chuyển domain sang cahayabiru.com cách đây vài tuần, chỉ trong vòng 1 tháng rưỡi , google page rank của cahayabiru.blogspot.com là 4 trong khi số bài viết chưa đến 30.

Kinh! Mình van xin bật mí mà ko chịu ! Ai kết thân với Biru dc chắc blog sẽ tốt.

Ngankvn ® on 12 April 2009 at 14:58 said...

Cái phần Body của mình do chèn Emo nên nó đã đc sửa lại thành body onload repalce rồi , bây giờ muốn áp dụng cái này thì tính năng emoticon trong blog ko còn nữa hả ?? Có các nào thực hiện đc cả hai ko ?

NAD on 12 April 2009 at 17:45 said...

Mình cũng giống NgânKVN đó. K0 biết phải làm sao?

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

@vuluganck : Cái slide-code để từ từ mình nghiên cứu nhe bạn. Dạo này bận quá.
Còn PR của cahayabiru cao thế thì chắc chắn có bí quyết rồi , mà đã gọi là bí quyết thì làm sao chia sẻ được. Thế thì mình cũng bó tay thôi :D.

@Ngankvn & NAD : Mình ko dám chắc nữa, bạn thử áp dụng theo 2 hướng sau đây xem sao :
1. Thử thay đoạn body luôn, rồi kiểm tra emo có hoạt động hay không.
2. Thay thẻ body thành body onload='setupZoom();replaceText()' (mở , đóng lại thẻ dùm nhé :D) .

Cái cách 2 thì mình coi template của Ngân rồi chèn thêm vào template đang xài hiệu ứng zoom ảnh của mình, thấy tốc độ không mượt bằng trước. Có thể tại thẻ body chèn nhiều quá nên gây ra tình trạng như vậy. Để mình thử 1 cách zoom ảnh khác xem có tốt hơn ko, nếu được thì viết thành bài mới luôn. Thủ thuật này còn hạn chế :(

Hoàng Gia Lâm on 13 April 2009 at 08:24 said...

Thủ thuật hay quá nhưng anh bít cách làm tương tự với video trong blog không anh nó như thế này này http://i672.photobucket.com/albums/vv89/lampv270189/Untitled.jpg giúp em vơi nha. Vì blog của em hễ nhúng video vào là bị lỗi.

NAD on 13 April 2009 at 10:24 said...

Lại còn zoom cả video nữa à :D

Hoàng Gia Lâm on 13 April 2009 at 10:44 said...

xem cái ảnh mình gửi đi. hình như nó không gọi là zoom mà gọi là gì ý, không nhớ rõ tên nữa hihi. nhưng nó thú vị mà ảnh đây

http://i672.photobucket.com/albums/vv89/lampv270189/Untitled.jpg

Benjami Tennyson on 13 April 2009 at 19:18 said...

Cái này mới à, để mình nghiên cứu xem có làm đc ko :D

Hoàng Gia Lâm on 14 April 2009 at 11:07 said...

đã được chưa anh
chờ lâu quá. àh anh có thể chỉ em cách up file*.js lên host nào để nó chạy không. em đau đầu với nó quá, em có up lên thegioihostfree.com nhưng không sử dụng được, chả hiểu sao nữa hay là tìm ko đúng mã url. tại tìm mãi không ra mà

Hoàng Gia Lâm on 14 April 2009 at 11:10 said...

àh đây là nick của em là lampv270189@yahoo.com
có gì anh chỉ bảo em với nha. Anh xem thử tiện ích lightbox video ở trang này nha
http://videobox-lb.sourceforge.net
nó có hướng dẫ làm nhưng em thử không được. Mong là anh tìm ra nguyên nhân để có thêm một tiện ích thú vị cho dân blogger hihi

Benjami Tennyson on 14 April 2009 at 19:43 said...

@Hoàng Gia Lâm : Hì, bạn thông cảm, mấy tuần này đang bận liên miên. Còn web để up file .js thì bạn nên dùng www.javascripthost.com , đây là trang chuyên dụng để up các file javascript (hoặc dùng 110mb.com như mình).
Nhân tiện cám ơn bạn đã cung cấp cho mình thông tin, mình sẽ cố gắng viết thủ thuật sớm cho bạn . Thân ^^!

Hoàng Gia Lâm on 15 April 2009 at 11:19 said...

Cám ơn anh về 2 host web nha. anh cố gắng tìm hiểu về thủ thuật linghtbox đó làm sao để dùng được cho cả video và ảnh trên cùng một blog nha. thanks. Àh mà không hiểu sao thủ thuật chèn biểu tượng emoticon, em làm giống như anh hướng đẫn nhưng vẫn không thành công, tuy là nó không báo lỗi HTML. như thế nghĩa là sao.

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

Emoticons nào thế bạn, mà chèn trong bài viết hay comment? Blogger ko báo lỗi mà dùng ko được thì có thể là do file .js

Hoàng Gia Lâm on 16 April 2009 at 00:13 said...

là emoticon khỉ và hành ý. thủ nhiều rùi. thấy bên blog anh Ngân rất nhiều Emoticon mà em làm không được em dùng file*.js của anh mà anh thử xem lại giúp em đi. thanks

Benjami Tennyson on 16 April 2009 at 00:56 said...

Ok, mình đã tích hợp emoticons Yoyo & Người củ hành thành 1 file .js duy nhất tại đây (50 emo yoyo & 50 emo củ hành). Bạn thay link đó vào code javascript ở cuối template nhé !

Rover2310 on 24 May 2009 at 20:17 said...

Ban oi, sao minh vao blog cua minh bang IE thi lai ko hien scroll bar, con vao bang mozilla lai dc.

boyproDX on 26 May 2009 at 23:29 said...

@Rover2310 : Ủa , mình vào bằng IE bình thường mà, có bị gì đâu bạn :-/

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