tạo khung chứa code chuyên nghiệp , nền đen cho blogger

khung chứa code nền đen

Bạn muốn có khung chứa code thật đẹp như trên không , nó chưa nhiều từ khóa  và màu sắc để hiển thị và phân biệt  hơn và đặc biệt là nó  rất chuyên nghiệp .  Nó có thêm  thanh cuốn ngang  để  có thể  dễ quan sát  hơn . Để tạo được nó thì rất đơn giản thôi, chỉ cần dùng đoạn code dưới đây là các bạn có thể làm được . Vào blog tìm phần chủ đề và tìm đến thẻ đóng </head>

dat 

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css' rel='stylesheet'/> <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() {   $('pre').each(function(i, block) {     hljs.highlightBlock(block);   }); }); //]]> </script>
 day 
Mỗi lần viết bài cần chèn code các bạn cần chèn vào 2 thẻ <pre> nhưng trức khi chèn code các bạn nhớ  mã hóa  code nhá  
 <pre class='css'> <!-- chèn code vào đây --> </pre>

Cách chèn khung chứa code vào bài viết Blogspot, khung chứa code đơn giản không có thanh cuốn

Chèn khung chứa code vào Blogspot là việc làm khó khăn cho những người mới làm Blogger.
Sau đây mình sẽ hướng dẫn chi tiết cách chèn khung code:

Bước 1: Đăng nhập Blogger => Themes => Chọn edit HTML
Bước 2: Tìm kiếm từ khóa ]]></b:skin>
Bước 3: Dán đoạn code CSS sau ngay phía trên thẻ ]]></b:skin>

pre, code {font-family:"Courier New",monospace;
font-size:16px;
display:block;
margin:10px 0 15px;
border:4px dotted #C9C9C9;
background:#E9E9E9  top right no-repeat;padding:10px;overflow:auto;
}

Bước 4: Giờ bạn có thể quay lại soạn bài đăng vào chế độ HTML. Để thêm 1 khung chứa code bạn chỉ cần làm làm như sau:

 <pre> chèn code vào đây </pre> 

LƯU Ý: code chèn vào nếu chứa các ký tự đặc biệt là mã html thì cần được encode trước khi đưa vào. Để mã hóa các bạn truy cập link  https://mothereff.in/html-entities

Copy dán vào giữa 2 thẻ thế là xong. 

Cách tạo khung chứa code cho bài viết, khung chứa chỉ có thanh cuốn dọc

Nếu bạn có một blog hay viết bài về các thủ thuật liên quan đến việc chia sẻ code, chẳng hạn như thủ thuật Blogspot, lập trình,…tóm lại nội dung bài viết của bạn bao gồm một hoặc nhiều đoạn code mà bạn muốn chia sẻ cho người đọc xem, copy và sử dụng…

Nhưng bạn biết đấy, một đoạn mã code sẽ không thể viết và xuất bản bình thường như văn bản thông thường được,vì đó là code lập trình nên nó có thể nó sẽ được áp dụng, được mã hóa luôn sau khi nội dung được xuất bản, tức là sau khi xuất bản code đó sẽ không còn nguyên code mình muốn chia sẻ, nếu còn thì cũng rất khó cho người đọc copy và sử dụng.

Vậy làm thế nào để có thể chia sẻ code trong bài viết để khi xuất bản vẫn giữ nguyên được code gốc, người đọc có thể copy và sử dụng bình thường? Hãy tạo khung chứa code cho bài viết, nếu bạn sử dụng Blogspot thì hãy làm theo hướng dẫn sau đây.

Đầu tiên bạn hãy vào “Chủ đề” rồi vào “Chỉnh sửa HTML“, sau đó sao chép đoạn code sau để chèn vào vị trí trước thẻ  ]]></b:skin>.

Đoạn code cần dùng:

/*khung chua code*/
pre.code {
display: block;
font: 1em 'Courier New', Fixed, monospace;
font-size: 100%;
color: #666666;
background: #e8ffe1;
overflow: auto;
text-align: left;
border: 1px solid #99cc66;
margin: 1em 0 1em 0;
line-height: 17px;
max-height:300px}

Bạn có thể chỉnh sửa một số thông số như sau:

• color: #666666: Màu chữ trong khung.
• background: #e8ffe1: Màu nền của khung.
• border: 1px solid #99cc66: Độ rộng đường viền (1px) và màu đường viền (#99cc66).
• max-height:300px}: Chiều cao tối đa. 

Đã xong, bây giờ bạn cứ vào viết bài bình thường, mỗi khi cần chèn code vào bài viết bạn chỉ cần chuyển sang chế độ soạn thảo HTML rồi chèn đoạn code sau vào vị trí muốn đặt code.

<pre class="code">
Đặt code vào đây
</pre>

Bài viết sưu tầm tại sonzim.com

hướng dẫn tạo khung chứa code , 1 số khung chứa code đẹp cho blogger

Đ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.

☼ Cách tiến hành:

1- Đăng nhập (Login) vào Blog

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:&nbsp; 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;}

5- 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 khi chèn code!

- 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:

<div class="code">
Nội dung đoạn code
</div> 

2. Tạo khng chứa code bằng cách copy đoạn mã sau vào trang, bài viết mà bạn muốn tạo

lưu ý khi làm việc với mã html nó rối lắm nên dịnh làm ở đâu thì như mình  đánh 

dấu ở bài viết là !!!!! thì trong mã html nó cũng là những ký tự đó , rất dễ để mình 

xác định đúng chỗ.

CSS  <pre class="code code-css"
style="background: rgb(253, 253, 253); border-radius: 2px; border: 1px
solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 1px;
box-sizing: border-box; font-family: monospace, monospace; font-size: inherit; font-stretch:
inherit; font-style: inherit; font-variant: inherit; font-weight: inherit;
line-height: inherit; margin: 20px 25px; overflow-wrap: break-word; overflow:
auto; padding: 0px; position: relative; user-select: text; vertical-align:
baseline;"><span style="background-color: white; border: 0px;
box-sizing: border-box; font-family: &quot;open sans&quot;;
font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight:
inherit; line-height: 25.5px; margin: 0px; padding: 0px; vertical-align:
baseline;"><label style="border: 0px; box-sizing: border-box;
font-family: sans-serif; font-size: 13px; font-stretch: inherit; font-style:
inherit; font-variant: inherit; left: 1px; line-height: inherit; margin: 0px;
padding: 0px; pointer-events: none; position: absolute; text-align: center;
top: 16px; user-select: none; vertical-align: baseline; width:
60px;">CSS</label> khung code</span></pre>

Các bạn copy đoạn mã trong khung ngay phía trên dòng này thì các bạn sẽ có cái khung  để nhồi  mã  giống như vậy.

đoạn code  ở trên được cho vào khung tuy nhiên nó có thanh cuốn .

các bạn cũng có thể tạo nhiều cột ( responsive) cho blogspots tại đây

nếu sau khin làm như trên ròi mà vẫn chưa ok thì như mình đầu tiên tạo bảng trong Word ( bảng 1 hàng , 1 cột ) sau đó chép dữ liệu vào bảng đó . Rồi cuối cùng sao chép cả bảng và cả dữ liệu trong đó vào bài viết thế là xong.!
Bài viết sưu tầm tại đây

Tạo Khung Chứa Code Đẹp Cho Blogspot, Mẫu trắng , đen

 Đối với các Blogger thuộc Công nghệ thì việc share các đoạn code là chuyện ngày thường phải làm. Nhưng khi chèn vào bài viết thì sao. Ta có thể đóng khung nó lại, hoặc để chú thích, trích dẫn nhưng như vậy sẽ làm Blog không khoa học. Hôm nay mình  sẽ hướng dẫn các bạn tạo khung chứa code cực ngầu, rất đẹp cho blogger

Mục Đích

               Tạo tính khoa học, chuyên nghiệp cho Blog, hơn thế nữa giúp cho người đọc, biết đâu là code, đâu là câu viết bình thường.
               Khung code rất ngầu, tạo sự thích thú cho người đọc, làm tăng lượt view cho Blog, giúp cho việc phát triển Blog hơn.

Thực Hiện

Khung code có hai mẫu là đen và trắng nên các bạn chọn cho phù hợp với blog của mình

A.Mẫu Trắng 

1. Các bạn vào Blogger ---> Mẫu---> Chỉnh sửa HTML, sau đó các bạn chép lại đoạn css sau vào trước thẻ ]]></b:skin> hoặc </style>. 

/* CSS Simple Pre Code */  pre{background:#fff;white-space:pre;word-wrap:break-word;overflow:auto} pre.code{margin:20px 25px;border:1px solid #d9d9d9;border-radius:2px;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08)} pre.code label{font-family:sans-serif;font-weight:normal;font-size:13px;color:#444;position:absolute;left:1px;top:16px;text-align:center;width:60px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none} pre.code code{font-family:"Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;display:block;margin:0 0 0 60px;padding:15px 16px 14px;border-left:1px solid #d9d9d9;overflow-x:auto;font-size:13px;line-height:19px;color:#444} pre::after{content:"double click to selection";padding:0;width:auto;height:auto;position:absolute;right:18px;top:14px;font-size:12px;color:#aaa;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease} pre:hover::after{opacity:0;visibility:visible} pre.code-css code{color:#0288d1} pre.code-html code{color:#558b2f} pre.code-javascript code{color:#f57c00} pre.code-jquery code{color:#78909c}

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

CSS khung code

!!!!!!!!!!!

Gian cac ban hay <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>

CSS khung code

3. Các bạn Save Template (Lưu Mẫu) lại.
4. Để dùng thì các bạn dùng đoạn code html sau khi viết bài viết(chuyển sang chế dộ html rồi chép vào)

<pre class='code code-html'><label>HTML</label><code>... Để Code HTML ở đây ...</code></pre> <pre class='code code-css'><label>CSS</label><code>... Để Code CSS ở đây...</code></pre> <pre class='code code-javascript'><label>JS</label><code>... Để Code JavaScript ở đây...</code></pre> <pre class='code code-jquery'><label>Jquery</label><code>... Để Code jQuery ở đây...</code></pre>

B. Mẫu đen

1. Các bạn làm y như mẫu trắng, thay vào đó các bạn thay đoạn css của trắng bằng đen sau:

/* CSS Simple Pre Code */ pre{background:#333;white-space:pre;word-wrap:break-word;overflow:auto} pre.code{margin:20px 25px;border-radius:4px;border:1px solid #292929;position:relative} pre.code label{font-family:sans-serif;font-weight:bold;font-size:13px;color:#ddd;position:absolute;left:1px;top:15px;text-align:center;width:60px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none} pre.code code{font-family:"Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;display:block;margin:0 0 0 60px;padding:15px 16px 14px;border-left:1px solid #555;overflow-x:auto;font-size:13px;line-height:19px;color:#ddd} pre::after{content:"double click to selection";padding:0;width:auto;height:auto;position:absolute;right:18px;top:14px;font-size:12px;color:#ddd;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease} pre:hover::after{opacity:0;visibility:visible} pre.code-css code{color:#91a7ff} pre.code-html code{color:#aed581} pre.code-javascript code{color:#ffa726} pre.code-jquery code{color:#4dd0e1}

Nâng Cao 

Để thay đổi màu chữ cho từng dạng code thì

- Các bạn tìm đoạn CSS sau trên mẫu mà bạn chọn.
 pre.code-css code{color:#91a7ff}

pre.code-html code{color:#aed581}
pre.code-javascript code{color:#ffa726}
pre.code-jquery code{color:#4dd0e1}

Sau đó các bạn thay đổi mã màu ở color thành màu bạn muốn.

Lời Kết

Bài viết sưu tầm  anhnhimblog

 Chúc các bạn thành công