free web
free web
free web
Home » Files » Thủ thuật web » 21.Oct.2017, 5:29 PM

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.
Hướng dẫn tạo và chèn khung chứa co

Đ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="/js/khung-code-2.1.1jquery.min.js"></script> 
 <script src="/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.


Lưu Ý:
  • Khi bạn để lại bình luận vui lòng không spam, không dùng những từ ngữ thô tục lăng mạ người khác.
  • Các bài viết trên iFox chỉ mang tính chất chia sẻ thông tin tham khảo, các bạn nên cân nhắc kỹ lưỡng trước khi xem hoặc tải nội dung bài viết, cẩn thận lừa đảo và virut.
  • Chúng tôi sẽ không chịu trách nhiệm với các bài viết do thành viên đăng lên trên các kênh của iFox.
  • Nếu trường hợp bạn phát hiện bài viết là hình thức lừa đảo hoặc nội dung bài viết sai thực tế, bạn vui lòng gửi báo cáo tới admin để được giải quyết, chúng tôi sẽ xử lý nghiêm các bài viết vi phạm.
  • iFox Media luôn hướng tới mục tiêu cộng đồng giao lưu vui vẻ, lịch sự, nhiệt tình.
  • Hãy để lại cảm nhận của bạn, chúng tôi vui vẻ đón nhận và sẽ cố gắng phát huy trang web một cách tốt nhất để phục vụ các bạn.
  • Cảm ơn bạn đã quan tâm và ủng hộ iFox Media, chúc bạn một ngày làm việc hiệu quả!
Category: Thủ thuật web | Added by: Bom_cute36 | Tags: Javasript, Khung text, css, code
Số tin nhắn: 0
avatar