Tạo Khung Chứa Code Đơn Giản Cho Blogger.

- Chắc hẳn các bạn đến với blog thì có tỉ lệ 70% là chia sẽ thủ thuật blogger. Và quan trọng nếu một bài viết có chứa mã code thì rất dễ làm bài viết trở nên xấu và không được chuẩn, đặc biệt là với bạn đọc.

- Nên tại bài viết này mình sẽ hướng dẫn các bạn cách tạo khung chứa code khá đơn giản nhưng được cái làm cho bạn đọc cảm thấy thoải mái và nhẹ mắt hơn. Điều đó có thể làm cho bài viết chúng ta nhanh lên top hơn.

Tạo Khung Chứa Code Chuẩn Seo Cho Blogger

Các Bước Thực Hiện:

Bước 1: Đăng nhập Blogger

Bước 2: Truy cập chủ đề => Chỉnh sửa HTML

Bước 3: Chèn đoạn code bên dưới vào trước thẻ ]]></b:skin>

.post blockquote,.post pre{font-size:16px;background:#fafafa;color:#23282d;border-radius:3px;box-sizing:border-box;padding:10px;margin:5px 0;overflow:auto;word-wrap:normal;position:relative;height:100%;max-height:350px;white-space:pre-wrap;border:1px solid #ccc;font-family:inherit}
blockquote::-webkit-scrollbar {width: 8px; height:8px}
::-webkit-scrollbar-track {background:#FFF}
::-webkit-scrollbar-thumb {background-image: linear-gradient( 135deg, #FDEB71 20%, #F8D800 100%);border-radius:50px}
::-webkit-scrollbar-thumb:window-inactive {background:#fff}
blockquote mark,code mark,blockquote code mark {background-color:#f39c12!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
blockquote:hover:before{transform:scaleY(1);opacity:1;visibility:visible;transition:all .5s}
.post blockquote,.post pre,.post code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}

Bước 4: Lưu lại. 

Cách Sử Dụng:

Bạn bôi đen đoạn cần cho vào khung chứa rồi làm theo ảnh.

Ảnh Minh Họa

- Nghĩa là khi bôi đen xong các bạn click vào icon trích dẫn thì nó sẽ tự động tạo ra khung chứa code cho bạn.

Vậy là xong rồi. Chúc các bạn thành công.