Thủ thuật blogger này sẽ hướng dẫn các bạn một cách khá đơn giản nhưng cũng rất chuyên nghiệp để đặt đoạn code mình cần trích dẫn vào bài đăng trên blog. Với cách làm này đoạn mã hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng.
>>Button - Thủ thuật tạo button ẩn hiện nội dung cho Blogger
>>Drop Down Menu - Thủ thuật Menu xổ xuống tự động cập nhật cho Label Blogger
>>Drop Menu - Thủ thuật tạo Menu click thì xổ dọc xuống Blogger
>>Trang chủ - Thủ thuật code đặt website làm trang chủ trình duyệt cho Blogger
>>Loading - Thủ thuật tạo hiệu ứng loading cho Blogger
>>Code - Thủ thuật tạo khung chứa Code có nút Chọn tất cả cho Blogger
>>Breadrumbs - Thủ thuật tạo Breadrumbs cho Blogger / Blogspot
>>2 Columns - Thủ thuật tạo 2 cột cho Main Blogger
1. Đăng nhập vào Blogger / Blogspot
>>Button - Thủ thuật tạo button ẩn hiện nội dung cho Blogger
>>Drop Down Menu - Thủ thuật Menu xổ xuống tự động cập nhật cho Label Blogger
>>Drop Menu - Thủ thuật tạo Menu click thì xổ dọc xuống Blogger
>>Trang chủ - Thủ thuật code đặt website làm trang chủ trình duyệt cho Blogger
>>Loading - Thủ thuật tạo hiệu ứng loading cho Blogger
>>Code - Thủ thuật tạo khung chứa Code có nút Chọn tất cả cho Blogger
>>Breadrumbs - Thủ thuật tạo Breadrumbs cho Blogger / Blogspot
>>2 Columns - Thủ thuật tạo 2 cột cho Main Blogger
1. Đăng nhập vào Blogger / Blogspot
2. Vào Mẫu (Templates)
3. Vào chỉnh sửa HTML (edit HMTL). Tìm 1 trong các đoạn code tương tự. (Mẹo: Bấm Ctrl + F để tìm với từ khóa pre hoặc code hoặc pre,code)
pre {....}
code {....}
pre, code {....}
Nếu có thì bạn thay toàn bộ code css đó bằng một trong các code bên dưới.Nếu tìm không có thì bạn chèn thẳng 1 trong các bên dưới sau vào trước thẻ đóng ]]></b:skin>. Chèn xong bạn Save lại.Muốn sử dụng thì trong bài viết bạn check vào ô HTML của bài viết và sử dụng code sau :
<pre> ....
Code của bạn
......</pre>
hoặc
<code> ......
Code của bạn
.....</code>
Mẫu 1 : 
Code :
pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(http://3.bp.blogspot.com/-YQO9pTYEANE/UasFuo5j2cI/AAAAAAAADU0/WAd7fy0ZR1M/s1600/khung+code+1.png) repeat;
overflow : auto;
text-align:left;
border : 1px solid #99cc66;
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}
Mẫu 2 : (Mẫu này giới hạn 100 dòng thôi nhé )
Code:
.pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(http://4.bp.blogspot.com/-59BcpaYpcoQ/UasGTRIHcSI/AAAAAAAADU8/OaAAT9WhdPc/s1600/menu+2.jpg) no-repeat left top;
overflow : auto;
text-align:left;
border : 1px solid #99cc66;
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}
Mẫu 3 :
Code :
.pre, code {
display:block;
margin:10px 0;
border:1px solid #E6DB55;
background:#FFFBCC url(http://3.bp.blogspot.com/-AUjyvMD7rXA/UasGpHdVXbI/AAAAAAAADVE/ARiuVfBzhoM/s1600/code+3.png) top left no-repeat;
padding:10px 10px 10px 40px;}
Mẫu 4 :
pre, code {
overflow:auto;
background-image:url(http://4.bp.blogspot.com/-9Q_POM5IGYU/UasG3Qm1MNI/AAAAAAAADVM/uY7JIpanarw/s1600/code+4.png);
background-color:#FFF77A;
background-repeat:no-repeat;
padding-top:50px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
border:#FF9900 thin dashed;
color:#000;}
Mẫu 5 :
pre, code {
color:#281800;
font-family:Courier New;
font-size:13px;
line-height:17px;
background-image:URL(https://lh4.googleusercontent.com/_kck7-TEWM-M/TWtvurFWTlI/AAAAAAAAAlM/qNLb07OebIw/code_tag_bg.jpg);
display: block;
padding-left: 4px;
padding-right: 4px;
border: 1px #FC0 dashed;
overflow:auto;
word-wrap:break-word;}
Mẫu 6 :
pre, code {
background-image: url(http://2.bp.blogspot.com/-lwGCVgTPYts/UasHRdGWJ6I/AAAAAAAADVU/n8wJG2Ds4A4/s1600/code+6.png);
background-position: 15px 15px;
background-repeat: no-repeat;
background-color: #FDD;
width: 118%;
border: #C72B2C dashed thin;
padding: 15px;
padding-left: 70px;
color: #D24E50;}
Mẫu 7 :
pre, code {
-moz-box-shadow: 0 0 10px #DDDDDD;
background: url(http://4.bp.blogspot.com/-lhX8FTBn2gw/UasHf9xzsuI/AAAAAAAADVc/WLqjZemWrWU/s1600/code+7.png) repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
clear: both;
color: #333333;
display: block;
font-size: 12px;
line-height: 15px;
margin: 10px auto 10px 30px;
overflow: auto;
padding: 15px;
white-space: pre;
width: 85% !important;
word-wrap: break-word;}
Mẫu 8 :
pre, code {
background:#eee;border:1px solid #ddd;clear:both;
font-family:Consolas,Monaco,"Courier New",Courier,monospace;
overflow-x:auto;
padding:10px;
white-space:pre-wrap;
word-wrap:break-word;}
Mẫu 9 :
Code :
pre, code { display:block; font: 1em 'Courier New', Fixed, monospace; font-size : 100%; color: #666666; background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj351T2ZWzaCfzLqGLAAV4ed3h9G-nB69VMQ-CFdwQcMlbt7u51BvzRsrc1TmueM0L3ps7hxC3Leqgb-9jbu8LSGRIiIsKcdhD9m5-Sm9aUwa9XaA4xmtgRwzH-wmTTepvPY9J8uga2uoE/s1600/imgbg-namkna-blogspot-com-hot.png) repeat; overflow : auto; text-align:left; border : 1px solid #99cc66; padding : 0px 20px 0 30px; margin:1em 0 1em 0; line-height:17px;}
Mẫu 10 :
pre, code {font-family:"Courier New",monospace;
font-size:16px;
display:block;
margin:10px 0 15px;
border:4px dotted #C9C9C9;
background:#E9E9E9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5d2geqfPSpL4nFtaLG8mJSpO7jQFu4oTyyH9D2PCP51baC3jEskT-D6-6e8_X-zyYaX0A3kshSYg7UFhZk9jgf3yyz6nj7YAtG2XyeS6Ce4izbYGmsy6owD_qmHNWCNAvvdSjvid_ro8/s1600/code-namkna-blogspot-com.png) top right no-repeat;padding:10px;overflow:auto;
}
Đăng nhận xét