Code - Thủ thuật tạo khung chứa mã Code cho Blogger.

Thứ Bảy, 21 tháng 12, 2013

Đa phần các tiện ích dùng cho Blog đều sử dụng các mã code đặc thù riêng của nó, các mã code này đa số đều phức tạp và dài dòng, do đó nếu bạn thường xuyên chia sẻ các mã code này trên blog thì bạn nên gom nó vào khung chứa code riêng cách biệt với chữ viết trong bài đăng để cho thao tác copy của khách tham quan được thuận tiện hơn và ít nhầm lẫn hơn.Thủ thuật blogger này sẽ giúp bạn làm tốt việc đó.

1- Đăng nhập vào Blogger

2- Vào Mẫu (Template)

3- Chọn Chỉnh sửa HTML (Edit HTML)

4-Bên dưới có rất nhiều mẫu. Chèn đoạn code bạn chọn vào trước thẻ ]]></b:skin>

Mẫu 1

.code { border-radius:20px 0; max-height:250px; min-height:50px; margin : 10px; padding : 10px; clear : both; list-style-type : none; overflow:auto; color:#FFF; text-shadow: 0 -1px 1px #a52676; border:none; background:#de45a6; background: -moz-linear-gradient(top, #e54aac, #f374c5 95%, #d3469f); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e54aac), color-stop(.9, #f374c5), to(#d3469f)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d3469f', EndColorStr='#f374c5'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d3469f', EndColorStr='#f374c5')"; /* IE8 only */ box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9; -webkit-box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9; -moz-box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9; }

Mẫu 2

.code { border-radius:20px 0; max-height:250px; min-height:50px; margin : 10px; padding : 10px; clear : both; list-style-type : none; overflow:auto; background: #E6E6E6; background: -moz-linear-gradient(top, #FFF, #f5f5f5 5%, #e2e2e2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(.03, #f5f5f5), to(#e2e2e2)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2')"; /* IE8 only */ -moz-border-radius: 4px; -webkit-border-radius: 4px; border:1px solid #d0d0d0; border-bottom:1px solid #b5b5b5; color:#5e5e5e; text-shadow: 1px 1px 1px #FFF}

Mẫu 3

.code { border-radius:20px 0; max-height:250px; min-height:50px; margin : 10px; padding : 10px; clear : both; list-style-type : none; overflow:auto; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color:#FFF; text-shadow: 0 1px 1px #0f739d; background: #40addb; background: -moz-linear-gradient(top, #d1edfa, #73cef5 5%, #49acd6); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d1edfa), color-stop(0.03, #73cef5), to(#49acd6)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73cef5', EndColorStr='#49acd6'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73cef5', EndColorStr='#49acd6')"; /* IE8 only */ border-bottom:1px solid #2581a8;}

Mẫu 4

.code { border-radius:20px 0; max-height:250px; min-height:50px; margin : 10px; padding : 10px; clear : both; list-style-type : none; overflow:auto; color:#FFF; text-shadow: 0 -1px 1px #0d3474; border:none; background: #3675da; background: -moz-linear-gradient(top, #4986e8, #76b8fc 95%, #4986e8); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4986e8), color-stop(.9, #76b8fc), to(#4986e8)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc')"; /* IE8 only */ box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8; -webkit-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8; -moz-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;}

Sau khi chọn được mẫu ứng ý rồi các bạn lưu mẫu lại.

Cách sử dụng: Sau này mỗi lần trình bày code thì bạn check vào phần HTML của bài viết hoặc trang và sử dụng cấu trúc như dạng sau.