Tùy biến khung code đơn giản cho blog

Are you sure?

You want to turn off ads.

Bài thứ 3 trong series học web lần này mình muốn giới thiệu với các bạn là cách để tùy biến khung code đơn giản. Hiểu nôm na là như này: bạn thường thấy khung chứa code của blog sẽ chỉ có 1 form nguyên dạng như vậy và không thể phân biệt được đâu là HTML, đâu là CSS cũng như Javascript, Jquery. Chính vì thế, mình sẽ tạo ra sự khác biệt đó bằng cách đặt class hay id riêng cho chúng, viết css và chèn vào cú pháp hiển thị khung code thôi là được. Giờ thì bắt đầu nhé.
Tùy biến khung code đơn giản cho blog

Cách thực hiện

Bước 1: Truy cập blogger.com - Chủ đề - Chỉnh sửa HTML.
Bước 2: Xóa toàn bộ CSS của khung code cũ đi và thay bằng đoạn mới sau:
code,pre { display:inline-block; position:relative; background:#2a2a2a; max-height:400px; /* Set chiều cao tối đa để hiển thị thanh cuộn */ font-size:14px; color:#e8e8e8; text-align:left; overflow:auto; /* Hiển thị thanh cuộn dọc khi quá 400px */ border:1px solid #d3d6db; margin:8px 0; padding:10px; white-space:pre-line; /* Văn bản sẽ tự động bao lại khi cần thiết, và xuống hàng */ width:97%; padding-top:40px; font-family:'Roboto',sans-serif; } code:after { /* Thêm thuộc tính after cho khung code, hiểu nôm na là chèn chữ hay kí tự gì đó trang trí */ content:"Code For You"; /* Ở trường hợp này là chữ hiển thị trên đầu mỗi khung code nha */ font-family:'Roboto',sans-serif; color:#fff; position:absolute; /*Set thuộc tính position là absolute cho nó đính trên vị trí cần chỉnh, cái này mình không rõ phải diễn đạt ra sao cho các bạn hiểu rõ được nữa nhưng nếu biết CSS cơ bản thì sẽ hiểu đc thôi*/ top:0; /* Điều chỉnh after lên trên cùng khung code */ left:0; transition:all .3s; /* Hiệu ứng làm mượt, hãy thêm tiền tố -moz-, -o-, -webkit-... để giúp chạy trên nhiều trình duyệt */ width:100%; text-align:center; border-bottom:1px dashed #ddd; padding:3px 0; font-size:16px; letter-spacing:1px; /* Khoảng cách giữa các kí tự */ background:#4a4a4a; } /* Set chữ cho từng class riêng biệt */ code.html-pc:after { content:"HTML"; background:#47aae4; } code.css-pc:after { content:"CSS"; background:#45a25d; } code.js-pc:after { content:"Javascript"; background:#4ba2a7; } code.jquery-pc:after { content:"Jquery"; background:#97ab28; }
Bước 3: Lưu template lại.

Cách dùng

Ta vẫn viết bài như bình thường, đến phần chèn code thì bấm chuyển qua tab HTML để chèn cú pháp (lưu ý hãy mã hóa code trước khi chèn nhé không là nó sẽ chạy code của bạn chứ không hiển thị đâu, để mã hóa kí tự hãy sử dụng công cụ mã hóa này), hãy lựa chọn 1 trong 4 cú pháp sau đây:
<code class='html-pc'>Nhập code mã hóa tại đây...</code> <code class='css-pc'>Nhập code mã hóa tại đây...</code> <code class='js-pc'>Nhập code mã hóa tại đây...</code> <code class='jquery-pc'>Nhập code mã hóa tại đây...</code>

Lời kết

Về cơ bản thì tùy biến một khung code ở mức độ đơn giản nó chỉ có vậy thôi. Mắt thẩm mĩ của mình cũng không được tốt ở 1 số khoản nên nếu bạn đã hiểu cách tùy biến bằng CSS rồi thì hãy chỉnh sửa code đến khi hài lòng nhé.
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    13 nhận xét:

    1. cái temp hiện tại của tui bây h là code bỏ vào khung ko cần mã hóa luôn @@

      Trả lờiXóa
      Trả lời
      1. Ô bỏ bên tab Viết hay tab HTML?

        Xóa
      2. Bỏ bên tab luôn, xong click blockquote là vẫn đc, temp lúc trước thì ko đc phải mã hóa.

        Xóa
      3. K ý t hỏi là bên tab nào ấy ô? Vì nếu để code ở tab Viết thì nó sẽ tự mã hóa cho ô, còn chuyển qua tab HTML mới paste code vào thì mình mới cần mã hóa nó.

        Xóa
      4. tui là pass code trực tiếp ý - trực tiếp bên phần viết

        Xóa
      5. Ừ thế đúng r mà ô, paste trực tiếp bên phần Viết thì nó sẽ tự mã hóa cho ô khi ô xuất bài đăng đó. Còn post bên HTML thì mới phải mã hóa.

        Xóa
    2. logo giống Pop music thế nhỉ :V :V

      Trả lờiXóa
      Trả lời
      1. T có biết pop music là gì đâu ô @@ đăng stt nhờ mn làm cho cái logo rồi t check mess thấy cái này đẹp nhất nên t lấy :v

        Xóa
      2. ai v a. cho e nhờ ké :3

        Xóa
      3. Duy đó e, a có ghi trên đó là ai làm đc thì a tặng temp twitter thì thấy logo của duy ok nên a nhờ, tuy chỗ kia vẫn hơi có xíu xíu k hợp nhưng ksao :))

        Xóa
    3. hay , thủ thuật rất hữu ích

      Trả lờiXóa
    4. đẹp đó nhưng hơi khó hiểu với làm sao nó ra được màu trắng vậy ad

      Trả lờiXóa
      Trả lời
      1. Màu trắng thì đổi background cho nó thôi.

        Xóa

    Nhận bài viết mới