November 02, 2011
Để bài viết hoàn chỉnh trong Blogger bắt buộc ta phải dùng thêm 1 số tiện ích khác cho phù hợp với nội dung bài viết hiển thị.
Mình tổng hợp lại 1 số code mình thường dùng cho bài viết.Các code này nhiều nguồn khác nhau do các Blogspotter Design.






1. Code đóng khung nội dung với thẻ Code:

Nội dung
Đoạn mã sử dụng chèn trước ]]></b:skin>:
.post code{
font-family:"Courier New",monospace;
line-height:1.3em;
border:1px dotted #DDD;
background:#E1E1E1;;
margin:10px 0;
padding:10px 10px;
font-size:13px;
display:block}

2. Code đúng khung dùng thể Pre:
Nội dung
Đoạn mã sử dụng chèn trước ]]></b:skin>:

.post pre{
display:block; font: 14px 'Courier New', Fixed, monospace;
font-size : 100%; color: #000;
background : #fff ;
overflow : auto; text-align:left;
border : 1px dashed #51B0EC;
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:20px; }

3. Đóng khung có màu nền:

Nội Dung

Hiện tại mình dùng 4 màu chính : Đỏ, Vàng , XanhLá , XanhDương.

Đoạn mã sử dụng chèn trước ]]></b:skin>:


.post p.vang{
background: #FFFFA0 ;
border: 1px solid #D3C200;
background-position: 7px 50%;
text-align: left;
padding: 10px 10px 10px 45px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
}
==============

.post p.do{
background: #FAE2E3 ;
border: 1px solid #EC9B9B;
background-position: 7px 50%;
text-align: left;
padding: 10px 10px 10px 45px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
}
==============

.post p.xanhduong{
background: #D9E4F2;
border: 1px solid #50B0EC;
background-position: 7px 50%;
text-align: left;
padding: 10px 10px 10px 45px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
}
==============

.post p.xanhla{
background: #DFFAD3;
border: 1px solid #72CB67;
background-position: 7px 50%;
text-align: left;
padding: 10px 10px 10px 45px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
}

4. Button Ẩn/Hiện Nội Dung:


Nội Dung Hiển Thị

Đoạn mã sử dụng chèn trực tiếp vào Chỉnh sửa HTML trong bài viết:


<div>
<div>
<input type="button"
value="Click Here "
style="width:110px;height:25px;
font-size:12px;margin:0px;padding:0px;"
onclick="if (this.parentNode.parentNode.getElementsByTagName('div') [1].getElementsByTagName('div')[0].style.display != '')
{this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn'; } else {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = '';
this.value = 'Xem'; }">
</div>
<div>
<div style="display: none;">
{Phần nội dung bị ẩn}
</div>
</div>
</div>

5. Một số Code dành cho CSS Tenplate:

a. Các loại đường viền (border: 1px #ccc solid)

Dashed - - - - - - - - - - - - - - - - -
Solid _____________________
Dotted ..................................

b. Các kiểu định dạng chữ (text-decoration:none;)


none (Không định dạng)
underline (Gạch đích)
overline (Gạch trên đầu)
line-through (Gạch ngang chữ)
blink (Chớp chớp)
inherit

c. Thêm các định dạng link vào class

/*Link cố định*/
a:link {
color:#3366ff;
text-decoration:none;
}

/*Link đã xem qua*/
a:visited {
color:#ccc;
text-decoration:none;
}

/*Link khi rê chuột vào*/
a:hover {
color:#339966;
text-decoration:underline;
}

d. Tạo bóng đổ và bo tròn 4 góc viền


/*Tạo bóng đổ*/
box-shadow: 8px 8px 8px #616D7E;
-webkit-box-shadow: 8px 8px 8px #616D7E;
-moz-box-shadow: 8px 8px 8px #616D7E;

/*Bo tròn 4 góc viền*/
border-radius:4px;

Phần này mình tổng hợp từ http://caytamgui.blogspot.com