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: 349

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

Thơ chế vợ mình và người ta fa...

Tại bài này các bạn sẽ được xem những màn đối thơ vô cùng bá đạo và hài hước từ các ông chồng bà vợ, liệu bạn có muốn tham gia vào cuộc đối thơ này click xem tình hình ra sao nhé. :D
Đàn ông ở độ tuổi 30 nên làm g...

Đàn ông ở độ tuổi 30 nên làm g...

Bước vào tuổi 30, phái mạnh cần kiểm tra huyết áp thường xuyên, từ bỏ bia rượu và ăn ít đồ béo để bảo vệ sức khỏe. Đàn ông làm bố trước tuổi 25 dễ tổn thọ / 5 lời khuyên khi tập thể hình cho đàn ông trên 30 tuổi

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.

Ai làm
0
16-10-2017

Dưới đây là lá thư của một người đàn ông ngoài 40 gửi cho cô nhân tình bé nhỏ mới 23 tuổi của anh ta. Họ đã hạnh phúc bên nhau trong suốt 2 năm liền. Thế nhưng, kết cục lại khiến người ta sững sờ..

WYSIWYG Web Builder 10.3.3 + C...
0
01-07-2017

WYSIWYG Web Builder có nghĩa là What-You-See-Is-What-You-Get Chương trình sẽ tự tạo ra các mã HTML tương ứng với các hành động bạn làm, và có thể kéo và thả bất cứ vật thể nào đến mọi nơi trong trang web bạn thích.

Download HDD Low Level Format ...
0
04-07-2017

HDD Low Level Format Tool ứng dụng hỗ trợ định dạng cấp thấp cho ổ cứng hay các thiết bị gắn ngoài như ổ đĩa cứng SATA, IDE hay SCSI, tương thích với những ổ cứng có kích thước vô cùng lớn.

Hướng dẫn tạo sitemap miễn phí...
0
21-10-2017

Có rất nhiều cách và phần mềm hỗ trợ việc tạo một sitemap cho một website mới, mình xin chỉ 1 cách tạo trực tiếp trên mạng rất hiệu quả và rất nhiều chuyên gia SEO đã sử dụng.

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