LIÊN KẾT CÁC CUỘC THI


tgt

Thống kê trong ngày

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • Trực tuyến trên website

    0 khách và 0 thành viên

    ĐỌC BÁO ĐIỆN TỬ










    WEB HỖ TRỢ CHUYÊN MÔN




    Tài nguyên dạy học

    Hỗ trợ trực tuyến

    • (Trần Trung Sơn)

    Điều tra ý kiến

    Bạn thấy trang web Trần Trung Sơn xây dựng như thế này có được không?
    Đẹp
    Bình thường
    Đơn điệu
    Ý kiến khác

    Đất nước Việt Nam

    Gốc > TRANG TRÍ WEBSITE >

    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.

    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.

    Để 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.

    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. 


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


    Nhắn tin cho tác giả
    Trần Trung Sơn @ 19:01 27/09/2009
    Số lượt xem: 5605
    Số lượt thích: 0 người
    Avatar
    Chào thầy Sơn, chúc thầy những ngày nghỉ cuối tuần vui vẻ! Hôm nay tôi mới ghé thăm nhà thầy, tuyệt vời lắm, cảm ơn thầy!
    Avatar
    hay that
    Avatar

    Ghé thăm thầy chúc thầy đón xuân vui vẻ và hạnh phúc nhé!

    Avatar
    TVM CHÚC CHỦ NHÀ BUỔI TỐI VUI VẺ. RẤT MONG SỚM ĐƯỢC ĐÓN TIẾP CHỦ NHÀ!
     
    Gửi ý kiến