Thủ thuật tạo hiệu ứng mờ cho ảnh trong Blogger

Friday, 4 December 2009

Hiệu ứng mờ là thủ thuật để khi bạn rê hoặc chỉ chuột tới bức ảnh đã bị hiệu ứng làm mờ thì sẽ hiện ra hình ảnh với màu sắc nguyên thuỷ, hay nói chính xác là hiển thị bức ảnh gốc.

Tưởng chừng rất phức tạp, tuy nhiên khi tham khảo thủ thuật này của Rohman tại http://www.blogspottutorial.com, phatrien@so thấy rất đơn giản, chỉ cần vài thao tác đơn giản bạn có thể thực hiện hiệu ứng này cho blog của mình.

Thủ thuật đối với Hình ảnh và Icon:
>> Thêm Emotions vào form comment của BlogSpot
>> Tạo hiệu ứng hover cho hình ảnh sinh động
>> Thêm hình ảnh Icon ở Trước hoặc sau tiêu đề bài viết

Bạn có thể xem ví dụ mẫu dưới để hình dung ra thủ thuật này.

Các bước thực hiện như sau:
Bước thứ 1^st

Truy cập vào blogger bằng ID của bạn.
Click vào Layout
Click Edit HTML tab và click Download Full Template để sao lưu lại mẫu Blog của bạn (đề phòng trưởng hợp cần phục hồi mẫu Template cũ).
Tìm tới đoạn mã ]].></b:skin>, Copy đoạn mã dưới và Paste nó phía trên ]].></b:skin>

.linkopacity img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .linkopacityxtra:hover img { filter:alpha(opacity=1.1); -moz-opacity: 1.1; opacity: 1.1; border:0; }
Lưu lại mẫu template

Bước thứ 2^nd

Mỗi khi muốn thực hiện hiệu ứng mờ cho bất kỳ bức ảnh nào, bạn hãy sử dụng đoạn code dưới:
<a href="URL target" class="linkopacity"><img src="Image URL source"></a>
Trong đó :
URL target là Địa chỉ đích tới. Nếu không có bạn điền #nogo
Image URL source là địa chỉ bức ảnh nguồn (gốc, nguyên thuỷ).

Rất mong sự góp ý của các bạn. Nếu các bạn thấy các sản phẩm quảng cáo trong weblog này phù hợp với nhu cầu mua sắm của cá nhân, hãy click để xem chi tiết sản phẩm của chợ điện tử.