Tạo khung chứa code có thanh kéo khi đoạn code dài

Tạo khung chứa code đẹp cho blog website, khi các bạn viết bài trên blog chia sẻ một tài liệu nào đó liên quan tới code thì việc bạn chèn code vào blog thật sự khó khăn, khi các bạn chèn code như vậy thì bình thường sẽ không có thanh kéo, có khi lại làm dối bài đăng của các bạn vì thế trong bài viết này tôi sẽ hướng dẫn các bạn thủ thuật tạo khung chưa code cho blogger cực kỳ đẹp

Khung chứa code cho blogger

Khi các bạn muốn chia sẻ một đoạn code hoặc một đoạn văn bài dài nào đó thì các bạn không thể cứ viết tràn la ra blog được mà bạn cần phải đóng khung đoạn văn bản đó lại, để đóng khung văn bản chứa code trên blogger thì không phải tự nhiên mà code được các bạn cần phải thông qua một số thủ thuật tôi chia sẻ dưới đây nhé
Tao khung chua code cho blogspot

Đóng khung và tạo thanh kéo đoạn văn bản chứa code cho blogger

Bạn có một đoạn văn bản khá dài, một đoạn code khá dài, và bạn muốn chia sẻ nó lên bài đăng trên blog của bạn, nhưng chèn vào bình thường thì rất dối mắt vì đoạn văn bản code kia khá dài, và thường thì code sẽ tự động nhận lấy html vì thế sẽ không hiển thị hoàn thiện được. vì thế bạn cần đóng khung nó lại và tạo cho văn bản đó một thanh trượt để không bị tràn lan ra ngoài blogger

Cách tạo khung chứa code cho blogspot

Sau đây tôi sẽ hướng dẫn mọi người cách tạo khung chứa code và chứa cho đoạn văn bản dài
Các bạn làm theo các bước tôi hướng dẫn bên dưới nhé

1. Cài đặt : Để tạo được khung chứa code như vậy . các bạn vào mẫu > chỉnh sửa html . Nhấn Tổ hợp phím Ctrl F để tìm thẻ đóng ]]></b:skin>

/* Codebox by topchiase.net */
pre,code{margin:15px;padding:10px;background:#333;color:#eee;border:4px solid #48d;font:13px monospace;overflow:auto;display:block;max-height:300px}

2 .Cách sử dụng khi post bài đăng
Để hiện thị được khung chứa đoạn văn bản hoặc code thì khi post bai đăng các bạn chuyển sang chế độ soạn thảo html và soạn theo sau :
<pre>Code đã được mã hóa</pre>
<code>Code đã được mã hóa</code>
Chúc các bạn thành công
=> Bài viết liên quan

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công