Các bước để thực hiện
- 1. Vào bảng điều khiển --> Mẫu -->Chỉnh sữa HTML
- 2. Sử dụng Ctrl + F tìm đến thẻ ]]></b:skin>
- 3. Chọn kiểu mà bạn thích dưới đây và chèn vào bên trên thẻ ]]></b:skin>
Style 1
#BLTextbox1 {
font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;font-weight:normal;font-style:normal;font-size:16px;
padding-left:10px;padding-top:12px;padding-bottom:12px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:black;background:#77A8E0;
overflow:auto;
width:550px;height:auto;max-height:300px;
border:2px solid #878787;
-moz-transition:all .8s linear ;
-webkit-transition:all .8s linear ;
-o-transition:all .8s linear ;
transition:all .8s linear ;
}
#BLTextbox2 p {width:100%; }
#BLTextbox2:hover {
background:#71A4DF;
border-color:#F1D66B;
-moz-transition:background .4s ease-in 20ms;
-webkit-transition:background .4s ease-in 20ms;
-o-transition:background .4s ease-in 20ms;
transition:background .4s ease-in 20ms;
}
font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;font-weight:normal;font-style:normal;font-size:16px;
padding-left:10px;padding-top:12px;padding-bottom:12px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:black;background:#77A8E0;
overflow:auto;
width:550px;height:auto;max-height:300px;
border:2px solid #878787;
-moz-transition:all .8s linear ;
-webkit-transition:all .8s linear ;
-o-transition:all .8s linear ;
transition:all .8s linear ;
}
#BLTextbox2 p {width:100%; }
#BLTextbox2:hover {
background:#71A4DF;
border-color:#F1D66B;
-moz-transition:background .4s ease-in 20ms;
-webkit-transition:background .4s ease-in 20ms;
-o-transition:background .4s ease-in 20ms;
transition:background .4s ease-in 20ms;
}
Khi cần chèn vào bài viết bạn sử dụng code dạng sau ở chế độ html trong bài viết
<div id="BLTextbox1">
<p>
code của bạn đặt ở đây....
</p>
</div>
<p>
code của bạn đặt ở đây....
</p>
</div>
Style 2
#BLTextbox2 {
font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;font-weight:normal;font-style:normal;font-size:15px;
padding-left:10px;padding-top:5px;padding-bottom:5px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:#626279;background:rgba(230,189,66,0.8);
overflow:auto;
width:550px;height:auto;max-height:300px;
border:2px solid #878787;
filter:alpha(opacity=75%);
-moz-opacity:0.75;-khtml-opacity:0.75;
opacity:0.75;
-moz-transition:all .8s ease ;
-webkit-transition:all .8s ease ;
-o-transition:all .8s ease ;
transition:all .8s ease ;
}
#BLTextbox3 p {width:100%; }
#BLTextbox3:hover {
background:#E9C845;
border-color:#cc2196;
-moz-transition:background .4s ease-in 20ms;
-webkit-transition:background .4s ease-in 20ms;
-o-transition:background .4s ease-in 20ms;
transition:background .4s ease-in 20ms;
}
font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;font-weight:normal;font-style:normal;font-size:15px;
padding-left:10px;padding-top:5px;padding-bottom:5px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:#626279;background:rgba(230,189,66,0.8);
overflow:auto;
width:550px;height:auto;max-height:300px;
border:2px solid #878787;
filter:alpha(opacity=75%);
-moz-opacity:0.75;-khtml-opacity:0.75;
opacity:0.75;
-moz-transition:all .8s ease ;
-webkit-transition:all .8s ease ;
-o-transition:all .8s ease ;
transition:all .8s ease ;
}
#BLTextbox3 p {width:100%; }
#BLTextbox3:hover {
background:#E9C845;
border-color:#cc2196;
-moz-transition:background .4s ease-in 20ms;
-webkit-transition:background .4s ease-in 20ms;
-o-transition:background .4s ease-in 20ms;
transition:background .4s ease-in 20ms;
}
Sử dụng trong bài viết
<div id="BLTextbox2">
<p>
code của bạn đặt ở đây.......
</p>
</div
<p>
code của bạn đặt ở đây.......
</p>
</div
Style 3
#BLTextbox3 {
font-family:'Arial Narrow','Nimbus Sans L',sans-serif;
padding-left:10px;padding-top:2px;padding-bottom:4px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:#212121;background:#CBCAC7;
overflow:auto;
width:550px;height:auto;max-height:300px;
border:2px solid #ACABA7;
border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
-moz-transition:all .8s linear ;
-webkit-transition:all .8s linear ;
-o-transition:all .8s linear ;
transition:all .8s linear ;
}
#BLTextbox4 p {width:100%; }
#BLTextbox4:hover {
background:#BFBFBE;
border-color:#C49782;
-moz-transition:background .4s cubic-bezier 20ms;
-webkit-transition:background .4s cubic-bezier 20ms;
-o-transition:background .4s cubic-bezier 20ms;
transition:background .4s cubic-bezier 20ms;
}
font-family:'Arial Narrow','Nimbus Sans L',sans-serif;
padding-left:10px;padding-top:2px;padding-bottom:4px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:#212121;background:#CBCAC7;
overflow:auto;
width:550px;height:auto;max-height:300px;
border:2px solid #ACABA7;
border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
-moz-transition:all .8s linear ;
-webkit-transition:all .8s linear ;
-o-transition:all .8s linear ;
transition:all .8s linear ;
}
#BLTextbox4 p {width:100%; }
#BLTextbox4:hover {
background:#BFBFBE;
border-color:#C49782;
-moz-transition:background .4s cubic-bezier 20ms;
-webkit-transition:background .4s cubic-bezier 20ms;
-o-transition:background .4s cubic-bezier 20ms;
transition:background .4s cubic-bezier 20ms;
}
Sử dụng trong bài viết
<div id="BLTextbox3">
<p>
code của bạn đặt ở đây.......
</p>
</div>
<p>
code của bạn đặt ở đây.......
</p>
</div>
Style 4
#BLTextbox4 {
font-family:'Arial Narrow','Nimbus Sans L',sans-serif;
padding-left:12px;padding-top:2px;padding-bottom:4px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:#555555;background:#ccc;
width:550px;height:auto;max-height:350px;
overflow:auto;
border:2px dotted #59903E;
-moz-opacity:0.75;
-khtml-opacity:0.75;
filter:alpha(opacity=75%);
opacity:0.75;
-moz-transition:all .9s ease-in-out ;
-webkit-transition:all .9s ease-in-out ;
-o-transition:all .9s ease-in-out ;
transition:all .9s ease-in-out ;
}
#BLTextbox11 p {width:100%;}
#BLTextbox11:hover {
background:#ccc;
color:#333;
filter:alpha(opacity=97%);
-moz-opacity:0.97;
-khtml-opacity:0.97;
opacity:0.97;
-moz-transition:all .3s ease-in ;
-webkit-transition:all .3s ease-in ;
-o-transition:all .3s ease-in ;
transition:all .3s ease-in ;
}
font-family:'Arial Narrow','Nimbus Sans L',sans-serif;
padding-left:12px;padding-top:2px;padding-bottom:4px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:#555555;background:#ccc;
width:550px;height:auto;max-height:350px;
overflow:auto;
border:2px dotted #59903E;
-moz-opacity:0.75;
-khtml-opacity:0.75;
filter:alpha(opacity=75%);
opacity:0.75;
-moz-transition:all .9s ease-in-out ;
-webkit-transition:all .9s ease-in-out ;
-o-transition:all .9s ease-in-out ;
transition:all .9s ease-in-out ;
}
#BLTextbox11 p {width:100%;}
#BLTextbox11:hover {
background:#ccc;
color:#333;
filter:alpha(opacity=97%);
-moz-opacity:0.97;
-khtml-opacity:0.97;
opacity:0.97;
-moz-transition:all .3s ease-in ;
-webkit-transition:all .3s ease-in ;
-o-transition:all .3s ease-in ;
transition:all .3s ease-in ;
}
Áp dụng vào bài viết
<div id="BLTextbox4">
<p>
Code của bạn ở đây
</p>
</div
<p>
Code của bạn ở đây
</p>
</div
Responses
0 Respones to "Code box đẹp để chèn code vào bài viết dạng HTML"
Post a Comment