Tạo khung chứa Code đẹp và được đáo cho Blogspot

Có lẽ không cần phải nói nhiều, đọc tiêu đề bài viết thì bạn đã biết rõ thủ thuật này là gì rồi. Đây là thủ thuật tạo khung chứa code cho blogger/blogspot. Được thiết kế hoàn toàn bằng CSS.

Demo ngay tại bài viết này.


Demo khung chứa Code


Các bước thực hiện

Bước 1: Đăng nhập vào trang quản lý Blogger
Bước 2: Chèn đoạn code dưới đây vào trên thẻ ]]></b:skin> trong template

.post blockquote{
margin:10px 0!important;
border:2px solid #FE6D4C!important;
border-left:none!important;
overflow: auto !important;
text-align: left !important;
max-height: 250px !important;
background: #ddd url(https://3.bp.blogspot.com/-wNBcugNuQY0/V6QmAweq1tI/AAAAAAAAAJA/oqtqcT-wJ-EzPjla6Q3UKVn6C8KmDat7gCLcB/s1600/blockquote-thuthuatblog247.jpg) !important;
background-repeat: no-repeat !important;
padding: 15px 20px 15px 35px !important;
color: #555 !important;}
blockquote::-webkit-scrollbar {width: 0}
blockquote::-webkit-scrollbar-track {-webkit-box-shadow:none;background:none}
blockquote::-webkit-scrollbar-thumb {background:none;border-radius: 0}
blockquote::-webkit-scrollbar-thumb:hover {background:none}

Bạn có thể thay link ảnh màu đỏ theo ý bạn!

Bước 3: 
Sau đó các bạn chép đoạn Javascript sau rồi dán vào trước thẻ </body>


<script type='text/javascript'>//<![CDATA[//Pre Auto Selection$('i[rel="pre"]').replaceWith(function() { return $('<pre><code>' + $(this).html() + '</code></pre>');});var pres = document.querySelectorAll('pre,kbd,blockquote');for (var i = 0; i < pres.length; i++) { pres[i].addEventListener("dblclick", function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false);}//]]></script>

Mục đích là khi chúng ta Click đúp chuột lên đó nó sẽ tự động bôi đen hết toàn bộ code trong khung đó

Bước 4: Lưu template và enjoy!



Cách sử dụng

Bước 1: Tô đen đoạn code cần cho vào khung
Bước 2: Chọn biểu tượng trích dẫn trong giao diện viết bài của blogger.



Bước 3: Enjoy!

No comments:

- Bạn hãy bình luận bằng tiếng việt có dấu hoặc tiếng anh và viết rõ ràng đầy đủ. Hãy tỏ ra là người lịch sự, có văn hóa khi bình luận nhé.
- Chèn Link bằng thẻ: <a href="Link muốn chèn" rel="nofollow">Tên muốn hiển thị</a>.
- Tạo chữ: <b>Đậm</b><i>Ngiêng</i>.
- Xin chân thành cảm ơn!.