Home » , , » Công cụ tạo khung chứa code

Công cụ tạo khung chứa code


1_Công cụ tạo Css cho khung chứa code thêm Gradient Background





Code Frame Dimensions
TTP © 2014
Height: px (pixels) /***khi vượt quá chiều cao sẽ xuất hiện scrollbar**/
Width: Percent Pixels
Styles
Background Color: #   [ More Colors...]
Gradient Background: Thêm Gradient vào background
Text Size:
Text Style & Weight: Italic Bold
Text Color: #   [ More Colors...]
Text Alignment:
Font Family:
Padding:
Border Width:
Border Style:
Border Color: #   [ More Colors...]
Border Radius:
Add:Border-Left solid #   [ More Colors...]
Contents Code here( only for Demo):
Text on Code Frame:

Generated code:

Copy and paste Css code into'style'tag.

Khi chọn màu trong color_picker các bạn phải click vào để submit

2_Thêm tag cho khung chứa code:



Ảnh Demo

_Nếu muốn thêm tag cho khung chứa code như ảnh trên ta thêm <css> vào thẻ style:
Css
pre[rel] {
    padding-top: 15px;
}
pre[rel]:before {
    content: attr(rel);
    font: normal 12px/22px Arial, Sans-Serif;
    color: white;
    background-color: #369;
    padding: 0 10px;
    margin: 0 8px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
/*Thay đổi màu cho thuộc tính REL**/
pre[rel="HTML"]:before{background-color:#336699}
pre[rel="CSS"]:before{background-color:#9999DD}
pre[rel="Javascript"]:before{background-color:#963}

Và trong thẻ body ta dùng cấu trúc như bên dưới:
Html
<pre rel="Html"><code>
   Nội dung code
Nhập nội dung code đã được  mã hóa  ở đây
</code></pre>

Html có thể thay thế bằng: Css , Javascript tùy nội dung code.
Hoặc bạn có thể dùng Công cụ  mã hóa và thêm "rel" tag
Bạn có thể test thử trên Test Html Editor
Link to this page:

0 nhận xét:

Đăng nhận xét



Thanks for following my blog

Bạn có thể chèn trực tiếp một số thẻ HTML đưa vào comment như:
Chữ in đậm : <b> Nội_dung_chữ_in_đậm </b>
  Chữ in nghiêng : <i> Nội_dung_chữ_in_nghiêng </i>
Chèn code : <i rel='pre'> Nội_dung_code_đã_mã_hóa </i>
  Chèn link liên kết : <a href = ' Link '> Tên_link </a>
Dùng link ảnh chèn trực tiếp vào comment
  Don't spam link here. Pls

Mã Hóa

Ngày

 
Support : Hổ trợ | Your Link | Your Link
Copyright © 2013. ProShow Producer - All Rights Reserved
Template Created by Creating Website Published byMas Template
Proudly powered by Blogger