"Tạo khung chứa code với số đầu dòng cho Blogspot"

(Traidatmui.com) - Nếu bạn là một blog chuyên về thủ thuật thì việc hiển thị code trong bài viết là điều rất cần thiết và làm sao để có một khung chứa code thật đẹp và thật chuyên nghiệp? Hôm nay chúng ta sẽ cùng tạo khung chứa code có đánh số thứ tự dòng cho Blogspot, ở đây mình nói chứa code thì không hẳn nó chỉ có tác dụng chứa được code mà đối với văn bản text bình thường bạn cũng có thể làm tương tự. Tuy nhiên, thì tiện ích này sẽ phù hợp với việc chứa các dòng code cho thủ thuật hơn là dùng để trang trí cho văn bản. Thủ thuật này code CSS khá dài và phức tạp, mình thấy bạn giữ nguyên mặc định sẽ tốt hơn, nếu bạn thành thạo về CSS thì bạn có thể tùy chỉnh, không bạn hãy để mặc định.

Hình ảnh minh họa
» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>
.dp-highlighter{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px;
}
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,.dp-highlighter a:hover{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
padding-left: 45px;
}
.dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar{
padding-left: 0px;
}
.dp-highlighter ol{
list-style: decimal;
background-color: #fff;
margin: 0px 0px 1px 45px !important;
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,.dp-highlighter.nogutter ol li{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,.dp-highlighter .columns div{
list-style: decimal-leading-zero;
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,.dp-highlighter.nogutter .columns div{
border: 0;
}
.dp-highlighter .columns{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span{
color: black;
background-color: inherit;
}
.dp-highlighter.collapsed ol{
margin: 0px;
}
.dp-highlighter.collapsed ol li{
display: none;
}
.dp-highlighter.printing{
border: none;
}
.dp-highlighter.printing .tools{
display: none !important;
}
.dp-highlighter.printing li{
display: list-item !important;
}

.dp-highlighter .tools{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools{
border-left: 0;
}
.dp-highlighter.collapsed .tools{
border-bottom: 0;
}
.dp-highlighter .tools a{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover{
color: red;
background-color: inherit;
text-decoration: underline;
}
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

5. Chèn tiếp code bên dưới vào sau thẻ <head>
<script src='http://data-traidatmui.appspot.com/scripts/shcore.js' type='text/javascript'></script>
<script src='http://data-traidatmui.appspot.com/scripts/shbrushcpp.js' type='text/javascript'></script>

6. Tiếp theo bạn thêm code bên dưới vào phía trên thẻ </body>
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

7. Save template lại

Bây giờ nếu bạn muốn trang trí cho code bạn phải thực hiện thêm một bước nữa, bạn hãy đặt code của bạn vào giữa code bên dưới khi bạn soạn thảo văn bản
<pre name="code" class="cpp">

Đặt code của bạn tại đây

</pre>


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

Tham khảo bloggertricksandtoolz

Xem khác cùng chủ đề

6 nhận xét | Viết lời bình

7/03/2011 09:52:00 CH Trả lời

Mình muốn đặt một code trong các tiện ích bên phải hoặc bên trái blog thì làm như thế nào ?

Admin
7/06/2011 08:49:00 CH Trả lời

Bạn không nói rỏ là bạn muốn thêm code là một tiện ích cụ thể hay muốn hiển thị code trong các tiện ích thôi. Nếu muốn thêm tiện ích với đoạn code nào đó thì bạn chỉ việc dán code vào tiện ích HTML/Javảcipt là được.

8/07/2011 03:30:00 SA Trả lời

anh oi cho em hoi là trong blogspot khung bài đăng ó thì làm sao cho mục thêm tiện ích và bài đăng nằm trên một trang không thấy tách biệt ra giống như trang của anh đấy,mà mục tiện ích nằm bên phải.mong xin anh giup.cảm ơn

Admin
8/07/2011 03:45:00 SA Trả lời

Ý em hỏi có phải là các tiện ích nằm trên phần main chỉ cho hiển thị ở một trang không anh vẫn chưa rỏ lắm ý của em.

5/20/2014 12:40:00 SA Trả lời

du học nhật bản - du hoc nhat ban - du học nhật bản - du hoc nhat

Bài viết hay quá, mong anh/chi cung cấp nhiều thông tin hữu ích hơn nữa đến bạn đọc
chúc anh/chi một ngày tốt lành

1/17/2016 10:33:00 SA Trả lời

anh ơi cho em hỏi , sao khi làm giống như anh . em chèn 2 đoạn code riêng thì bị x2 không à ( hiện 2 code giống nhau ) =}}

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang