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.
Transparent
Để 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.
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.
Transparent
Trước khi áp dụng hiệu ứng Hình nền trong suốt
Transparent
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 opacitymoz-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. 

Bài viết cùng chủ đề



0 nhận xét

Nội Quy Comment

Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
Các bài comment phải nghiêm túc,không spam.
Nội dung comment phải liên quan tới chủ đề.
Hãy để lại địa chỉ của bạn để mình dễ dàng comment lại.
Có thể sử dụng các thẻ HTML như: chữ đậm,nghiêng,link liên kết.
Có thể sử dụng các biểu tượng cảm xúc trong yahoo.




Thống kê trong ngày