Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Tạo tựa đề cho thẻ pre

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi TrollVL, 3/6/14.

Lượt xem: 6,193

  1. TrollVL Thành viên cấp 2

    Bài viết này mình sẽ hướng dẫn các bạn cách tạo tựa đề cho thẻ pre giúp cho việc chia sẻ code rõ ràng hơn. Ví dụ bạn muốn chia sẻ HTML thì thẻ pre đó sẽ có tựa đề là HTML cũng với màu tương ứng, tương tự đối với CSS hay Javascript.
    [​IMG]
    Demo
    Thêm đoạn CSS sau vào trước thẻ ]]></b: skin> trong template
    Code:
    pre[data-codetype]:before {
    content:attr(data-codetype);
    display:block;
    margin:-11px -13px 10px -54px;
    padding:8px 12px;
    font-family:Arial,Sans-serif;
    font-size:14px;
    text-transform:uppercase;
    background-color:#41749f;
    color:white
    }
    pre[data-codetype="
    	
    CSS"]:before{background-color:#5fbbba}
    pre[data-codetype="HTML"]:before{background-color:#4fc1eb}
    pre[data-codetype="JavaScript"]:before{background-color:#ff6c60}
    pre[data-codetype="JQuery"]:before{background-color:#99c262}
    Các bạn có thể tùy ý chỉnh sửa màu sắc, thêm bớt tựa đề nếu muốn cho thẻ pre 
    Thực hiện khi viết bài
    Mặc định bạn sử dụng thẻ <pre> như bình thường. Nhưng nếu muốn thêm các tựa đề cho đoạn code bạn viết theo cấu trúc sau:
    Code:
    <pre data-codetype="
    	
    CSS"Code 
    	
    CSS</pre>
    <pre data-codetype="HTML">Code HTML</pre>
    <pre data-codetype="JavaScript">Code JavaScript</pre>
    <pre data-codetype="JQuery">Code JQuery</pre>
    Chúc thành công, các bạn có thể tham khảo thêm các bài viết thú vị khác liên quan đến blogspot tại www.trollvl.com . Cảm ơn!

    ...
  2. RungRinhinfo

    RungRinhinfo Thành viên cấp 1

    cám ơn bác đã chia sẻ

Ủng hộ diễn đàn