Trang chủ » Bài viết » Thủ thuật web

Hướng dẫn tạo và chèn khung chứa code kèm nút copy vào bài viết
Khung chứa code là thành phần quan trọng và không thể thiếu đối với những blog viết về thủ thuật có bài viết dài chẳng hạn như blog của mình thường sử dụng các đoạn script hay chỉ đơn giản bạn muốn một nội dung nào đó nằm trong khung này cho gọn.
Khung chứa code cho web

Điều đặc biệt trong khung chứa code này có thêm cả nút copy nữa rất thuận tiện, cái này mình thấy rất ít blog áp dụng đa số vẫn sử dụng với nền tảng wordpress hay xenforo còn blogspot thấy rất ít. Hiểu theo cách đơn giản là <pre> và <code>.
Không nói dài dòng nữa mình đi thẳng vào nội dung chính. Trước tiên khi bạn muốn chèn nội dung nào đó bạn cứ soạn thảo bình thường xong mới chuyển qua khung soạn thảo HTML chèn nội dung vào khung.
Dưới đây là hướng dẫn:
#css (trước </b:skin>)
Copy
 
.codeHeader {
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
border-bottom: 0;
text-align: right;
padding: 2px;
}

.copy-text {
font-size: 14px;
cursor: pointer;
color: #707070;
padding: 7px 10px;
border-left: 1px solid #e0e0e0;
}

.copy-text:hover {color:#707070;}
pre.code {
display: block;
background: #f9f9f9;
max-height: 400px;
font-size: 14px;
color: black;
text-align: left;
overflow: auto;
border: 1px solid #d3d6db;
margin: auto;
padding: 16px;
line-height: 21px;
white-space: nowrap;
}


#javascript (trước </head>)
Copy
 
<script src="http://ibox.clan.su/track-bs/js/khung-code-2.1.1jquery.min.js"></script>
<script src="http://ibox.clan.su/track-bs/js/khung-code-clipboard.js"></script>
<script>
$(function(){
new Clipboard('.copy-text');
});

</script>

Nếu javascript không hoạt động thì thay bằng link java này
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/blogthuthuatwin10/jquery/master/clipboard.js"></script>

#html chèn trong bài viết
Copy
 
<div class="codeHeader">
<a class="copy-text" data-clipboard-target="#p1" href="javascript:void(0);"><i class="fa fa-files-o"></i> Copy</a>
<pre class="code" id="p1">
Nội dụng nằm trong khung
</div> </pre>

Nếu muốn chèn đoạn code 2,3, 4... thay p1 bằng p2, p3, p4...
Code khác tùy chỉnh đơn giản không có coppy:
Copy
 
<pre style="background-attachment: initial; background-clip: initial; background-color: #e9e9e9; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 3px dotted rgb(208, 208, 208); font-stretch: inherit; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: justify; vertical-align: baseline; width: auto !important; word-wrap: normal;">
Đây chứa nội dung code
Ví dụ:
&lt;source src="mov_bbb.mp4" type="video/mp4"&gt;
&lt;source src="mov_bbb.ogg" type="video/ogg"&gt;
Lưu ý: &lt; và &gt; là thay cho dấu < >
</pre>

Các bạn chỉnh sao cho phù hợp với web của bạn.

Tag: Khung chen code co chen coppy, khung chua code web moi doc la, tao khung chua code co tich hop coppy, huong dan chen khung chua code vao web, cach chen code vao bai viet, lam sao de chen code vao bai viet, code khung chua code cho web.

Danh mục: Thủ thuật web | Thêm bởi: Văn [19-10-2017] | Thẻ: css, Khung code, javascript Lượt xem: 1514

Đừng quên like nếu bài viết hữu ích nhé!
   
 
Thơ hay về vợ người - vợ ta

Thơ hay về vợ người - vợ ta

Ông chồng nào mà chê vợ già, vợ xấu, không bằng vợ người ta thì các chị em bà vợ cứ cho các ông ý đọc nhé... đọc đi cho biết thế nào kaka...
Nếu bạn hay thức khuya dậy trễ...

Nếu bạn hay thức khuya dậy trễ...

Thức khuya rồi ngủ bù vào ngày hôm sau, kiểu sinh hoạt phản khoa học này sẽ khiến bạn vừa già vừa xấu vừa yếu đi trông thấy.

Kế hoạch đột ngột của tôi trướ...
0
16-10-2017

Sau khi cân nhắc, tôi đã lên kế hoạch chuẩn bị hành trang cho ngày chia tay, tôi lấy cớ lo cho tương lai của 2 con trai, tôi tranh thủ thời cơ để vơ vét tiền chồng.

Làm thế nào để con kiểm s...
0
28-09-2017

Thiếu kỹ năng kiểm soát cảm xúc sẽ dẫn đến nhiều vấn đề nghiêm trọng khi trẻ lớn lên. Dưới đây là 9 cách để bố mẹ giúp kiềm chế hiệu quả những cơn giận giữ, hung hăng của trẻ.

Auto tune evo  6.0.9.2 full cr...
0
04-07-2017

Auto-Tune Evo là một công cụ cho phép người dùng có thể tự điều chỉnh giọng hát và nhạc điệu của mình,giúp cho những bài hát của bạn hay hơn, đặc sắc hơn.

Phần mềm quay phim màn hình má...
0
01-07-2017

Khi nhắc tới thể loại phần mềm này chắc chúng ta không thể quên camtasia. Camtasia là 1 phần mềm quay phim màn hình chuyên dụng, camtasia cho phép quay lại toàn bộ màn hình.

Hướng đẫn định dạng ổ cứng HDD...
0
19-10-2017

Format cấp thấp ổ đĩa cứng có tác dụng loại bỏ được các Bad Sector bị hư, giúp ổ cứng hoạt động ổn định hơn trước nhiều lần. Trong bài này sẽ hướng dẫn các bạn fomat cấp thấp ổ cứng (Low-Level Format).

Tổng bình luận: 0
avatar