Tạo hình nền “Transparent Background” trong suốt cho Blog

[VnPressNet] - Để tạo ra một hình nền trong suốt “transparent background” bằng cách sử dụng code của Mandarin Designs.

Để áp dụng chúng, trước hết bạn cần phải có một hình nền (background) cho blog của mình, vấn đề này đã được anh3ngơ đã giới thiệu cho các bạn cách thực hiện tại Tạo ảnh nền background cho blogger.

Bạn có thể xem mẫu minh hoạn hiệu ứng hình nền trong suốt “transparent background” tại demo blog.

Để thực hiện việc tạo hiệu ứng trên bạn cần:

(1) Đăng nhập vào Blogger.com

(2) Vào Layout –> Edit HTML và click chọn vào Expand Widget Templates

(3) Cuộn chuột (Scroll down) xuống phần code(Outer, main, sidebar) của Blog muốn thực hiện nền trong suốt để chèn code Transparent.

Để tìm hiểu thêm về cơ cấu các phần của mẫu Blog template bạn đọc thêm tại: Cơ cấu tổ chức của mẫu Blogger Template

Code thực hiện để tạo background trong suốt với màu nền là màu bạc 'silver' :

background-color: silver;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;

Để chèn code vào Outer-wrapper: nội dung này bao trùm toàn bộ mẫu blog (Body giống như là phần bên ngoài mẫu blog). Nói chung, bạn thiết kế một wrapper để chứa nhiều các block nhỏ trong đó. Các block chung hầu hết chứa trong Outer-wrapper là các Header, Content, và Footer.

Bạn tìm (find) tới #outer-wrapper { và chèn mã trên vào như sau:

#outer-wrapper {
background-color: silver;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
width: 1024px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Khi đó hình nền trong suốt sẽ xuất hiện như hình minh họa dưới.

Trước khi áp dụng hiệu ứng Hình nền trong suốt

Sau khi áp dụng

Ngoài ra bạn cũng có thể áp dụng chúng cho

sidebar-wrapper 
header-wrapper
footer-wrapper

Chú ý : Các phần(sections) trong blog của bạn có thể có tên khác nhau tùy thuộc vào từng mẫu template. Tuy nhiên về cơ bản các thành phần đều tưng ứng, sau khi ứng dụng cho các phần bạn hãy click vào Preview button để xe trước công việc đã thực hiện trước khi save để tiếp tục áp dụng cho các phần khác.

Bạn có thể thay đổi giá trị 'silver' trong mã code trên thành các màu khác như 'blue', 'red' để tạo hiệu ứng màu nền trong suốt khác.

Ngoài ra để phù hợp với mẫu template của blog bạn có thể thay đổi giá trị về mức độ đạm nhạt của độ trong suốt gọi là Opacity bằng cách thay đổi các giá trị '0.85' (cho opacity và moz-opacity) bằng bất kỳ giá trị nào nằm trong khoảng từ 0 tới 1; và thay đổi giá trị '85' cho filter: alpha(opacity=85)  với các số từ 1 tới 100. 


anh3ngơ: Have Fun! – Chúc các bạn thành công.

Thủ thuật trên tham khảo từ nguồn tiếng anh: how-to-change-background-opacity transparent

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.