Home » Blogspot_thuthuat

[Bloger-TT] Tổng hợp Code Cho Bài Viết

Để 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>:

==============

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

Đ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

Tin liên quan

Social

Chuyên Mục

Bài Viết Mới

Bài viết hot

Nhận Xét

Bài viết ngẫu nhiên

[Bloger-TT] Tổng hợp Code Cho Bài Viết

Tin nổi bật