Home » HTML

Code box đẹp để chèn code vào bài viết dạng HTML

1 tháng 1, 2014

Cách chèn code vào bài viết

| Nếu bạn cần chèn đoạn code gì đó vào bài viết trong Blogger/blogspot theo cách thông thường sẻ rất mất thẩm mỹ và khó cho người lấy để sử dụng hoặc có thể xảy ra lỗi gì đây, vì vậy mình giới thiệu tới bạn những code box khá đẹp và phong cách.

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

Code box đẹp để chèn code vào bài viết dạng HTML

#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;
}

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

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;
}

Sử dụng trong bài viết

<div id="BLTextbox2">
<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;
}

Sử dụng trong bài viết

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 ;
}

Áp dụng vào bài viết

<div id="BLTextbox4">
<p>
Code của bạn ở đây
</p>
</div