Chèn khung chứa code vào bài viết blogspot

CNTTLS | Khung chứa code đẹp cho Blog, Làm thế nào để chèn khung chứa code (mã) đa màu sắc vào trong bài viết Blogspot

Chèn khung chứa code vào bài viết blogspot
Thủ thuật hỗ trợ [chèn code vào bài viết trên blogspot]. Khung chứa code hoạt động tương tự như blokquote, nhưng sự khác biệt là tính năng blockqoute thường chỉ là một màu và dùng cho các lưu ý và ghi chú trong Blog.
Còn đối với khung chứa code mình giới thiệu dưới đây hiển thị các dòng mã đa màu sắc trong một bài viết blog. Vậy làm thế nào để tạo một khung chứa code (mã) trong bài đăng Blogspot.

Cách chèn khung chứa code vào bài viết blogspot

1. Đăng nhập vào [Blogger]

2. Chọn Chủ đềChỉnh sửa HTML

3. Thêm mã CSS

Bước 1: Tìm dòng </head>

- Thêm vào trước nó đoạn code sau:
[<style type='text/css'>
/* Khung chua code */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>]
Bước 2: Tìm dòng </body>

- Thêm vào trước nó đoạn code sau:
[<script type='text/javascript'>
//<![CDATA[
// Khung chua code
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>]
Bước 3: Lưu Chủ đề
4. Sử dụng code cho bài viết.
[<pre><code>__DÁN CODE CỦA BẠN VÀO ĐÂY__</code></pre>]
  • [message]
    • Lưu ý: 
      • Code phải được mã hóa trước khi sử dụng 

Cách mã hóa code

1. Thủ công:

 Thay thế &  thành &amp;
 Thay thế '  thành &#039;
 Thay thế "  thành &quot;
 Thay thế <  thành &lt;
 Thay thế >  thành &gt;

* Mẹo thay nhanh: Paste code vào notepad

> Nhấn tổ hợp 2 phím Ctr+H
> Dòng đầu tiên gõ: < | Dòng thứ 2 gõ: &lt;
> Replace All.
> Tiếp tục Nhấn tổ hợp 2 phím Ctr+H
> Dòng đầu tiên gõ: > | Dòng thứ 2 gõ: &gt;
> Replace All.

2. Dùng web mã hóa:

- Truy cập trang: [Mã hóa code]
- Paste code cần mã hóa ô > Nhấn Convert > Lấy code đã mã hóa ở ô trên.
Chúc các bạn thành công !

BÌNH LUẬN

BLOGGER: 1
  1. Nếu kiếm không được head thì mình làm sao đây ạ ?

    Trả lờiXóa

Tên

After Effects,1,Blogger,33,blogspot,9,CNTT,30,Code Blog,1,Facebook,3,Google,2,Google Drive,1,Kỹ năng Bootstrap,1,Kỹ năng Dreamweaver,1,Kỹ năng Excel,7,Kỹ năng Google Driver,1,Kỹ năng IELTS,6,Kỹ năng Illustrator,1,Kỹ năng lập trình,1,Kỹ năng lập trình hướng đối tượng Typescript,1,Kỹ năng Lumion 3D,1,Kỹ năng nói tiếng Anh,1,Kỹ năng Powerpoint,1,Kỹ năng thiết kế,1,Kỹ năng TOEIC,1,Kỹ năng Unity3D,1,Kỹ năng Word,1,Kỹ năng xin việc - viết CV,1,Microsoft 365,1,Microsoft Excel,4,Microsoft Powerpoint,1,Microsoft Word,2,SEO,1,Seo Blogger,6,SEO Blogspot,1,tao-blogspot-chuyen-nghiep,1,Template Blogger,6,Template Blogspot,1,Template MagOne,1,Template Wordpress,1,Thủ thuật Blogger,27,Thủ thuật Blogspot,1,Thủ thuật máy tính,1,Thủ thuật Wordpress,1,Tin học văn phòng,9,VIDEO KHÓA HỌC,6,Webmaster,2,Windows,2,Wordpress,2,Youtube,1,
ltr
item
Chia sẻ kiến thức - Thủ thuật máy tính: Chèn khung chứa code vào bài viết blogspot
Chèn khung chứa code vào bài viết blogspot
CNTTLS | Khung chứa code đẹp cho Blog, Làm thế nào để chèn khung chứa code (mã) đa màu sắc vào trong bài viết Blogspot
https://2.bp.blogspot.com/-r3Ix2Ft2jqg/W7Y1Zvlq9CI/AAAAAAAAAmg/YlDgXm_uLt8Z03_Rw63IrKZ_e-bhuaHUwCLcBGAs/s1600/chen-khung-chua-code-vao-bai-viet-blogspot.gif
https://2.bp.blogspot.com/-r3Ix2Ft2jqg/W7Y1Zvlq9CI/AAAAAAAAAmg/YlDgXm_uLt8Z03_Rw63IrKZ_e-bhuaHUwCLcBGAs/s72-c/chen-khung-chua-code-vao-bai-viet-blogspot.gif
Chia sẻ kiến thức - Thủ thuật máy tính
https://blog.vinhls.com/2018/10/chen-khung-chua-code-vao-bai-viet-blogspot.html
https://blog.vinhls.com/
https://blog.vinhls.com/
https://blog.vinhls.com/2018/10/chen-khung-chua-code-vao-bai-viet-blogspot.html
true
987137131202951109
UTF-8
Đã tải tất cả bài viết Không tìm thấy bài viết nào Xem tất cả Đọc thêm Trả lời Không trả lời Xóa Bởi Home PAGES POSTS Xem tất cả ĐỀ XUẤT CHO BẠN LABEL ARCHIVE SEARCH TẤT CẢ NHỮNG BÀI VIẾT Không tìm thấy bất kỳ bài viết phù hợp với yêu cầu của bạn Trở lại trang chủ Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec vừa xong 1 phút trước $$1$$ minutes ago 1 giờ trước $$1$$ hours ago Hôm qua $$1$$ days ago $$1$$ weeks ago nhiều hơn 5 tuần trước Người theo dõi Theo dõi THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Sao chép tất cả mã Chọn tất cả mã Tất cả các mã đã được sao chép vào clipboard của bạn Không thể sao chép mã / văn bản, vui lòng nhấn [CTRL] + [C] (hoặc CMD + C với Mac) để sao chép Mục lục