Tác Giả : NamKNA

Đối với những người sử dụng, vấn đề chính của họ chính là việc lưu trữ các file JS (javascript) cho các tiện ích của mình ở trên blog. Nếu bạn đã có 1 host riêng thì vấn đề này không có gì để nói, nhưng đối với 1 số người họ không có host riêng thì đây thực sự là vấn đề của họ. Một số bạn thì tìm đến các host free để lưu trữ, 1 số khác thì sử dụng file javascript của người khác, và như vậy thì họ sẽ không chủ động được trong việc duy trì họat động 1 cách thường xuyên cho blog của mình. Có thể host free die, hoặc các file mà người khác chia sẻ, giờ họ lại không muốn chia sẻ nữa…v..v..

Như vậy mỗi người nên có cho mình 1 nơi lưu trữ các dữ liệu đó, và Google Code là 1 lựa chọn thích hợp nhất cho các bạn. Với việc cho phép upload hầu hết các file và dung lượng lưu trữ lên đến 2BG. Dưới đây là các bước để các bạn Upload File JS lên Google Code:

- Bước 1: Tạo một Project mới: Đầu tiên các bạn vào trang này:

http://code.google.com/hosting/

Chọn Create a new project (Bấm hình để phóng to)

Tiếp theo điền các thông tin để tạo một Project mới theo hướng dẫn: (bấm vào hình để phóng to)

Sau khi tạo song giao diện của Project xẽ như hình (Bấm vào hình để phóng to)

- Bước 2: Upload File JS (javarscrip) lên Project
- Chọn thẻ Downloads -> New Downloads

tại ô mới bạn chỉ đường dẫ đến file Js và điền thông tin cho File (Bấm hình để phóng to)

Để lấy link File Javarscip bạn Click chuột vào File đó sau đó copy link file JS là được

Như vậy bạn đã có một File JS để chèn vào Blog 

Chú ý: Google chỉ lưu trưc được file .js do vậu để lưu trữ các file CSS bạn có thể dùng dropbox hoặc Google site để chứa file CSS nha.

Hướng dẫn xóa một File Js trên Google code:

Chọn Delere Download để xóa File muốn xóa:

Chúc thành công!

Tác Giả: NamKNA
 
Bạn mới bắt đầu tìm hiểu Blogger và còn nhiều điều bí ẩn mà bạn chưa hề biết? Đôi khi vấn đề thật nhỏ nhưng nếu chúng ta không chú ý xử lý thì nó sẽ trở thành vấn đề lớn. Ví dụ như tại sao blogspot của bạn bị lỗi font chữ, không thể hiển thị tiếng Việt trên một số máy tính, nhất là các máy tính PC.

Tình trạng lỗi font chữ thường xuất hiện ở các công cụ trình duyệt cũ như Internet Explorer 6. Thông thường khi thiết kế blogspot, các blogger thường tìm các Blogger Template ở các website nước ngoài và tất nhiên các Template đó được code bằng tiếng Anh và font chữ được dùng cho ngôn ngữ tiếng Anh, mà phổ biến nhất là font Georgia. Để hiển thị tốt tiếng Việt theo mã Unicode (UTF-8) thì font chữ trong Template phải thuộc các họ như Arial, Veranda, Tahoma, Times, Times New Roman. Thuộc tính font-family giúp định dạng font chữ cho cả blog (body), cho header, sidebar, main-wrapper, post-body, footer… Chẳng hạn để định dạng font-family tiếng Việt cho phần post-body, chúng ta sử dụng code CSS như sau:

.post-body {font-family:Arial, Veranda, Tahoma, Times, Times New Roman}

Và dòng code này được đặt trước dòng

]]></b:skin>

Như vậy để blogspot của bạn hiển thị tốt tiếng Việt trên mọi công cụ trình duyệt cho mọi máy tính thì chỉ cần trong chế độ chỉnh sửa Template, dùng tổ hợp phím Ctrl + F tìm từ khóa font-family và xóa các họ font chữ không thuộc họ tiếng Việt ở trên (nếu có họ Georgia thì thẳng tay xóa nó ngay) rồi thêm vào các họ Arial, Veranda, Tahoma, Times, Times New Roman.

- Nếu bạn nào không làm được vui lòng Comment dưới bài viết này mình sẽ giải đáp

Tác Giả: NamKNA

Tổng hợp khung chứa Code đẹp cho Blogspot

Bài viết 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.

Chúng ta sử dụng CSS để cho hiện thị thuộc tính khung hiện code. Giống như bài viết "Đặt code trong khung trên bài viết của Blogger" lần trước mình đã giới thiệu (Xem ở đây). Bài này mình sẽ giới thiệu cho các bạn các mẫu pre code ( Khung chèn code ) đẹp cho blogspot.

Đây là các mẫu khung code mà mình thu thập được từ Internet.

☼ Bây giờ ta bắt đầu thủ thuật :

1. Đăng nhập blog

2. Vào Mẫu (Template)

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.

☼ Để sử dụng trong bài viết!

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

-Lưu ý: Code phải được mã hóa. Bạn có thể sử dụng công cụ miễn phí tại đây

☼ Các mẫu để chèn vào Template!

Mẫu 1 :

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/AVvXsEjx3EvQ73khv_vzUzkD4vNSAE4URY2yrAtI6BHDAV5cp5GC4yRG5ySPboXdB5Dsq9D18k-Dequh1MUayey2Au9p1LnZhdtfo9Jdr_lSGbDZtQukcPJGI1n_35wZ9aqtpv8f0t442_t2nss/s1600/prepb3-khung-chua-code-namkna-blogspot-com.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlbHFsjpg57XFG6Az-8BgC-tAH0pUJKg6ZroRoHZLUA1EW6YsRj3k8A2mNXBROaLNfLAaJ_0r70j9oQ8sSPhvJUQd0fmgsGaGOrevUwKjFXJ1fduUXU1_Y0XhyQ5STxrI2xKaiRvNNkmU/s1600/prepb3-namkna-blogspot-com-1.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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2Sd4WCouq8ljqwaUgRo7t7LMtGO0Y_bC_riQDLzHKxhFOVvLziUcDaiY0q0Ac7SHYRXEkDCjVBOEnUdIMEU70bBWROBmHqu3IKqkqDVsmAqDovj86dqCwyHCvdoumIlJHGD24aBA2II/s1600/pen-namkna-blogspot-com-1.png) top left no-repeat;
padding:10px 10px 10px 40px;}

Mẫu 4 :

Code :

pre, code {
overflow:auto;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheHqN-74kamLaY2JcyNz1REe0oDUuFf6fsZJgaqsN8Afyz2NEq3IyUAy6Kew5zbPI5-Fna6sFuyY7Fabxouyd-7ptn6CxvvEyPUAS1dGHSOEBmk6z7bHKtTiePrCyZR4pnxG5Z6TCI2VE/s1600/Note-namkna-blogspot-com.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 :

Code :

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 :

Code :

pre, code {
background-image: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkOVizs2lhXkg7xBfGSkSy9FNb356LbAmmvHremDGvbg_o1yxgMpwbmqznDjknTyWzWwZSM2bbZSunt9QnAGXZYJGTm0yKTK2va2EDrgr1S14iuqDmD2FZKNgiJa3gPTLOgMPh3TjAScU/s1600/code-2-namkna-blogspot-com.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 :

Code :

pre, code {
-moz-box-shadow: 0 0 10px #DDDDDD;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJuYQjL-sZrMU8KIO9Ex7VO1IOu4AXv0OyT3xMNx8we3SAAE5ANle_9NPoEhMoWi7BelDv44uvtnPTmjiMTQ221UmVgx3QgyKbB3r089CDRIkJ9q5ayIIZDqEJsG8sF-lRh0pC5I99g68/s1600/Svip4u-namkna-blogspot-com.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 :

Code :

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/AVvXsEjx4dXLrOfuN9nQWUIDeQROBtPvpmOM2b9E8hlem3o9yI5e_sYVMAInQ-BSePaa-12UUeklt9bEazqsCiFAKCbTXaJZ9Detu_Ll0D0sTA_0lU4qot5El_2noOrAWOSFg3JV6WghuJ4pJMY/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 :

Code :

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/AVvXsEiUkuIFVBvbctWtvna1NXy8rhRj-gSCz2wuU48wENSBEU2gy_1sbCk3bXkjyNdl6PzxldeIiGCnYN0NTf2sX3yBdj8H-x_BUcTEViChVwwxwGcqlLAyyodSh9xQXNN8rQVC9OxsQO3-fKY/s1600/code-namkna-blogspot-com.png) top right no-repeat;padding:10px;overflow:auto;
}

Kết: Đây là các mẫu code mình thu thập được từ các blog,forum khác nhau. Do sử dụng công cụ Viewsource nên có thể đụng chạm với một số bạn. Chúc các bạn vui vẻ.

Tác Giả: NamKNA

Đa phần các tiện ích dùng cho Blog đều sử dụng các mã code đặc thù riêng của nó, các mã code này đa số đều phức tạp và dài dòng, do đó nếu bạn thường xuyên chia sẻ các mã code này trên blog thì bạn nên gom nó vào khung chứa code riêng cách biệt với chữ viết trong bài đăng để cho thao tác copy của khách tham quan được thuận tiện hơn và ít nhầm lẫn hơn.

☼ Cách tiến hành:

1- Đăng nhập (Login) vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sửa HTML (Edit HTML)

4-Bên dưới có rất nhiều mẫu. Chèn đoạn code bạn chọn vào trước thẻ ]]></b:skin>

Mẫu 1

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
color:#FFF;
text-shadow: 0 -1px 1px #a52676;
border:none;
background:#de45a6;
background: -moz-linear-gradient(top, #e54aac, #f374c5 95%, #d3469f);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e54aac), color-stop(.9, #f374c5), to(#d3469f));
filter:&nbsp; progid:DXImageTransform.Microsoft.gradient(startColorStr='#d3469f', EndColorStr='#f374c5'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d3469f', EndColorStr='#f374c5')"; /* IE8 only */
box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9;
-webkit-box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9;
-moz-box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9;
}

Mẫu 2

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
background: #E6E6E6;
background: -moz-linear-gradient(top, #FFF, #f5f5f5 5%, #e2e2e2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(.03, #f5f5f5), to(#e2e2e2));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border:1px solid #d0d0d0;
border-bottom:1px solid #b5b5b5;
color:#5e5e5e;
text-shadow: 1px 1px 1px #FFF}

Mẫu 3

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color:#FFF;
text-shadow: 0 1px 1px #0f739d;
background: #40addb;
background: -moz-linear-gradient(top, #d1edfa, #73cef5 5%, #49acd6);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d1edfa), color-stop(0.03, #73cef5), to(#49acd6));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73cef5', EndColorStr='#49acd6'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73cef5', EndColorStr='#49acd6')"; /* IE8 only */
border-bottom:1px solid #2581a8;}

Mẫu 4

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
color:#FFF;
text-shadow: 0 -1px 1px #0d3474;
border:none;
background: #3675da;
background: -moz-linear-gradient(top, #4986e8, #76b8fc 95%, #4986e8);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4986e8), color-stop(.9, #76b8fc), to(#4986e8));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;
-webkit-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;
-moz-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;}

5- Sau khi chọn được mẫu ứng ý rồi các bạn lưu mẫu lại.

Cách sử dụng khi chèn code!

- Sau này mỗi lần trình bày code thì bạn check vào phần HTML của bài viết hoặc trang và sử dụng cấu trúc như dạng sau:

<div class="code">
Nội dung đoạn code
</div> 

Tác Giả: Võ Quốc An

Đây là bài viết của bạn Võ Quốc An tôi thấy rất hay và bổ ích lên đã đưa bào blog của mình để làm tài liệu tham khảo

Cách tạo class, Id và cách gọi ra một module.

Class có dạng:

.Ten-Class{
thuộc tính 1;
thuộc tính 2;
...;
}

Id có dạng:

#Ten-Id{
thuộc tính 1;
thuộc tính 2;
...;
} 

Chú ý: class và ID có thể đặt vào template theo 1 trong 3 cách sau:

1. Đặt trước thẻ ]]></b:skin>

2. Đặt bên trong thẻ

<style type='text/css'> vị trí đặt các class và id </style> 

và đặt toàn bộ đoạn code trên phía dưới thẻ ]]></b:skin>

3.Đặt trực tiếp các thuộc tính vào module lúc gọi module ra.

<div class='TEN_MODULE' style='thuộc tính 1; thuộc tính 2; thuộc tính 3; ...'>Nội dung module</div>

Còn phần gọi ra module được đặt bên trong thẻ <body> và </body>
Cách gọi ra một module

<div class='Ten-Class'> Nội dung bên trong module </div> 

Hoặc

<div id='Ten-Id'> Nội dung bên trong module </div> 

Có thể thay thẻ div bằng thẻ span.
Class là module có thể sử dụng nhiều lần.
Id là module chỉ dùng 1 lần duy nhất.

Cài đặt css cho liên kết, ảnh bên trong class và ID

Như các bạn đã biết thì liên kết có code dạng <a href="http://www.voquocan.com/">võ quốc an blog</a>. Nói dể hiểu là liên kết nằm trong thẻ <a ...>...</a> nên để cài thuộc tính cho liên kết trong 1 class hay ID thì ta làm như sau:

.ABC a{Nội dung thuộc tính} //thuộc tính chung của liên kết trong class ABC//
.ABC a:hover{Nội dung thuộc tính} //thuộc tính của link trong class ABC khi rê chuột vào//
.ABC a:visited{Nội dung thuộc tính} //thuộc tính của những link trong class ABC đã xem qua//

Tương tự như vậy với ảnh.
Ảnh thường nằm trong thẻ <img ...>...</img> hoặc <img .../> nên để cài thuộc tính cho ảnh ta làm như sau:

#ABC img{Nội dung thuộc tính} //đây là thuộc tính của ảnh trong ID ABC//
#ABC img:hover{Nội dung thuộc tính} //đây là thuộc tính của ảnh trong ID ABC khi rê chuột vào//

Rút gọn css:

Ví dụ mình có 3 css sau:

.ABC {color:#000000}
.ABC {background: #cccccc}
.ABC {border: 1px solid #999999}

Thì ta sẽ rút gọn thành

.ABC {color:#000000; background:#cccccc; border:1px solid #999999}

Tiếp tục mình có 3 css sau:

.ABC {color:#000000; background:#cccccc; border:1px solid #999999}
#DEF {color:#000000; background:#cccccc; border:1px solid #999999}
.XYZ a {color:#000000; background:#cccccc; border:1px solid #999999}

Ta sẽ rút gọn thành

.ABC, #DEF, .XYZ a {color:#000000; background:#cccccc; border:1px solid #999999}

Bên dưới là các thuộc tính bạn có thể gắng vào class hoặc id.

1. Background (nền module)

Background qui định màu nền hoặc hình nền của module.
Màu nền:

Dạng thuộc tính: background: #fff;
#fff: là màu nền của module.
Đây là kết quả của thuộc tính trên.

Màu nền cho module là màu trắng

Hình nền

Dạng thuộc tính: background: url(Link Ảnh);
Link ảnh: là liên kết đến ảnh nền của module
Đây là kết quả của thuộc tính trên với link ảnh này

Sử dụng hình nền cho module

2. Border (Đường viền cho một module)

Border qui định thuộc tính về đường viền của một module.
Border có dạng như sau: border: 2px dash #aaa;
Ý nghĩa các giá trị:
» 2px: độ dầy của đường viền
» dash: kiểu đường viền. Bao gồm các dạng sau.

  » dotted

Nội dung

  » dashed

Nội dung

  » solid

Nội dung

  » double

Nội dung

  » groove

Nội dung

  » ridge

Nội dung

  » inset

Nội dung

  » outset

Nội dung

» #aaa: màu đường viền

3. Border-radius (bo góc module)

Thuộc tính border-radius có tác dụng bo góc cho một module.
Dạng thuộc tính: border-radius: 10px 10px 10px 10px;
Ý nghĩa từng thông số:

 » 10px: là góc trên bên trái.
 » 10px: là góc trên bên phải
 » 10px: là góc dưới bên phải
 » 10px: là góc dưới bên trái

Đây là kết quả đoạn code trên:

Code bo góc cho module

Bạn có thể thay giá trị tuyệt đối (dạng px) thành giá trị tương đối (%)
Ví dụ: border-radius: 50% 50% 50% 50%;
Và đây là kết quả:

Code bo góc cho module

4. Box-shadow (Bóng đổ cho module)

Box-shadow là thuộc tính về bóng đổ cho module.
Dạng thuộc tính: box-shadow:2px 2px 2px 3px #333 inset;
Ý nghĩa thuộc tính: (lần lượt từ trái qua phải)

 » 2px: là bóng đổ về phía phải (giá trị âm sẽ đổ về phía trái)
 » 2px: là bóng đổ về phía dưới (giá trị âm sẽ đổ về phía trên)
 » 2px: là độ nhòe của bóng.
 » 3px: là độ lan tỏa của bóng.
 » #333: là màu của bóng đổ.
 » inset: là bóng đổ chìm vào trong (nếu muốn làm khối nổi thì bỏ cái này)

Và đây là kết quả của đoạn code trên khi có inset.

Đổ bóng cho module

Kết quả của đoạn code trên khi không có inset.

Đổ bóng cho module

5. Clear (Dừng float module)

Thông thường khi có 1 module (ví dụ là module A) sử dụng thuộc tính float thì những module tiếp theo nó sẽ có xu hướng chiếm phần không gian mà module A không sử dụng. Để ngăn không cho các module còn lại chiếm không gian mà module A không sử dụng người ta thường dùng thuộc tính clear để giải quyết vấn đề này.
Dạng thuộc tính:
Clear: left; (không cho chiếm không gian bên trái của module A)
Clear: right; (không cho chiếm không gian bên phải của module A)
Clear: both; (không cho chiếm không gian cả 2 bên của module A)
Thông thường người ta ít dùng thuộc tính này vào css mà thường dùng đoạn code <div style='clear:both'/> bên dưới module để dừng việc float module.

6. Color (Màu chữ)

Color qui định màu chữ trong module bao gồm màu chữ, màu liên kết, màu liên kết khi rê chuột vào...
Dạng thuộc tính: color: #cc0000;
Với #cc0000 là màu chữ.
Ví dụ mình có đoạn css sau:

.module{ color:#779933 }  /* Màu chữ trong module */
.module a{ color:#991177 }  /* Màu liên kết trong module */
.module a:hover{ color:#aa8822 }  /* Màu liên kết khi rê chuột vào. */

Đây là kết quả khi gọi module trên ra.

Blogger: Võ Quốc An
Homepage: http://www.voquocan.com

7. Display (Sắp xếp hoặc ẩn module)

Display qui định về cách sắp xếp module hoặc ẩn module.
Display có một trong những dạng sau:
display: inline; (module sắp xếp cùng 1 hàng)

Module 1

Module 2

Module 3

display: block; (module sắp xếp thành nhiều block chồng lên nhau)

Module 1

Module 2

Module 3

display: none; (module sẽ bị ẩn khi dùng thuộc tính này)

8. Float (Sắp xếp vị trí module)

Float qui định về cách sắp xếp vị trí module. (trái, phải.)
Bình thường khi gắng 1 module thì mặc định module mới đó sẽ chiếm 100% chiều ngang. Tất cả các module khác sẽ bị đẩy xuống dưới. Xem ví dụ bên dưới.

Mặc dù module ảnh có chiều ngang là 160px nhưng nó vẫn chiếm 100% chiều ngang và đẩy module text xuống dưới. Gây lãng phí không gian.
Blogger: Võ Quốc An
Homepage: http://www.voquocan.com

Dạng thuộc tính:
float:left; (module nằm bên trái). float:right; làm tương tự nhưng thay left thành right.

Trong trường hợp này module ảnh đã được đẩy qua trái (float:left). Module text sẽ được đưa lên trên như thế này.

Blogger: Võ Quốc An
Homepage: http://www.voquocan.com

Chú ý:
1. Không có tình trạng float ảnh vào giữa (center). Để đẩy ảnh vào giữa bạn cần kết hợp 2 lần float trái cho 2 module. Qui định chiều rộng cho module thứ nhất để xác định được vị trí module thứ 2. Xem ví dụ bên dưới.

Đây là module 1 đã float:left với chiều rộng 150px.

Blogger: Võ Quốc An
Homepage: http://www.voquocan.com

2. Thuộc tính float thường đi chung với thuộc tính clear để gỡ bỏ thuộc tính float của module

9. Font (Kiểu chữ trong module)

Font qui định về những thuộc tính liên quan đến chữ như kiểu chữ, cỡ chữ, im đậm, in nghiêng...
Dạng thuộc tính:
Sử dụng kết hợp font: italic bold 30px Georgia;

Ý nghĩa từng thuộc tính:
italic: Chữ in nghiêng (có thể bỏ)
bold: chữ in đậm (có thể bỏ)
30px: cỡ chữ
georgia: kiểu chữ

Sử dụng đơn lẻ từng thuộc tính:

font-family: arial; (qui định kiểu chữ)

font-size: 30px; (qui định cỡ chữ)

font-style: italic; (in nghiêng)

font-weight:bold; (in đậm)

Chú ý: Chữ có gạch chân không sử dụng thuộc tính này mà dùng text-decoration:underline;

10. Height - Width (Chiều cao - rộng module)

Thuộc tính height (width) qui định về chiều cao (rộng) của module.
Height: chiều cao

Dạng thuộc tính: height:150px;
Ý nghĩ thuộc tính:
150px là chiều cao của module.
Bạn có thể thay địa chỉ tuyệt đối (dạng px) thành địa chỉ tương đối (dạng %)
Ví dụ: height:30%;

Width: chiều rộng

Dạng thuộc tính: width:50%;
Ý nghĩ thuộc tính:
50% là chiều rộng của module.
Bạn có thể thay địa chỉ tương đối (dạng %) thành địa chỉ tuyệt đối (dạng px)
Ví dụ: width:300px;

11. Line-height (Chiều cao dòng chữ)

Thuộc tính line-height qui định về chiều cao dòng chữ.
Dạng thuộc tính:

line-height:2;
line-height:2;
line-height:2;

line-height:4;
line-height:4;
line-height:4;

line-height:25px;
line-height:25px;
line-height:25px;

line-height:200%;
line-height:200%;
line-height:200%;

12. list-style (dấu • định dạng đầu link)

Thông thường trong các thủ thuật hoặc trong 1 template hay tiện ích linklist thường có các code dạng như sau:
<ul>
<li><a href="http://www.voquocan.com/">Võ Quốc An Blog</a></li>
<li><a href="http://www.voquocan.com/p/sitemap.html">Sitemap</a></li>
<li><a href="http://www.voquocan.com/2011/01/ask.html">Hỏi - Đáp</a></li>
<li><a href="Liên Kết...">Nội dung...</a></li>
</ul>
Và khi hiển thị ra ngoài thì đoạn code trên sẽ có dạng như sau:

• • Võ Quốc An Blog
• • Sitemap
• • Hỏi - Đáp
• • Nội dung...

Bạn thấy đầu mỗi dòng link có 1 cái chấm tròn không được đẹp lắm. Và dấu chấm tròn này do thuộc tính list-style qui định.
Dạng thuộc tính
list-style:none; (không hiển thị dấu chấm tròn.)

• Võ Quốc An Blog
• Sitemap
• Hỏi - Đáp
• Nội dung...

list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHo1miRUjWignX2O3h9sjZzIXNHX_6A7JY1PSuq8OwEal9jEhVtg3WAqO_tfzEmokeHcopcXBAZu-D6s9DGMG67xN9LNNh8dM6kVMi8Zkg5M5sOFbnU6jAYee-PA_AuOBPlll2PCdg1DZX/s1600/iconhover.png); (dùng ảnh ở liên kết làm dấu chấm)

• Võ Quốc An Blog
• Sitemap
• Hỏi - Đáp
• Nội dung...
Chú ý: image trên blog mình mình đã gán một vài thuộc tính. Dạng list-style này bạn có thể xem trên trang Sơ Đồ Blog của mình.

list-style:upper-alpha; (thay dấu chấm bằng ký tự ABC)

• A. Võ Quốc An Blog
• B. Sitemap
• C. Hỏi - Đáp
• D. Nội dung...

list-style:decimal; (thay dấu chấm bằng số 1-2-3-4)

• 1. Võ Quốc An Blog
• 2. Sitemap
• 3. Hỏi - Đáp
• 4. Nội dung...

Thật ra còn một số dạng khác nữa nhưng ít khi dùng đến nên mình sẽ không đề cập ở đây.

13. Margin (khoảng cách giữa các module)

Margin qui định khoảng cách từ module hiện tại đến module kề với nó.
Dạng thuộc tính:
Margin: 10px 20px 30px 40px;
Ý nghĩa các thuộc tính:
10px: khoãng cách từ module đến module bên trên
20px: khoãng cách từ module đến module bên trái
30px: khoãng cách từ module đến module bên dưới
40px: khoãng cách từ module đến module bên phải
Đây là kết quả: (bạn chú ý khoảng cách từ module đến những module xung quanh)

Module A

Chú ý: Bạn có thể thay giá trị tuyệt đối (dạng px) bằng giá trị tương đối (dạng %)

Margin: 0 auto;

0: khoãng cách từ module đến phía trên và dưới.
auto: cách đều trái phải.
Đây là kết quả:

Module A

14. Max-height (Chiều cao tối đa module)

Max-height (Min-height)  là thuộc tính qui định chiều cao tối đa (tối thiểu) cho một module.
Dạng thuộc tính:

Max-height:150px;

Min-height:100px;

Kết quả của thuộc tính trên đây:

Khi chiều cao nội dung nhỏ hơn chiều cao module thì chiều cao module sẽ bằng min-height

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Thuộc tính max-height thường đi kèm với thuộc tính overflow để giải quyết vấn đề cho phần nội dung bị thừa ra ngoài. Ví dụ:

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.
Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

15. Opacity (Độ trong suốt của một module)

Opacity là thuộc tính qui định về độ trong suốt của module.
Dạng thuộc tính: opacity:0.5;
0.5: độ trong suốt của module. Giá trị của thuộc tính nằm trong đoạn từ 0 đến 1
Đây là kết quả mình áp dụng thuộc tính opacity cho module A.

Module B

Module A

16. Overflow (Nội dung vượt ngoài module)

Overflow là thuộc tính qui định cách hiển thị cho phần nội dung ngoài module.
Dạng thuộc tính:

Overflow:auto;

Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;

Overflow:hidden;

Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;

Overflow:visible;

Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;
Overflow:visible;

17. Padding (Khoãng cách từ biên module đến phần nội dung bên trong)

Padding qui định về khoảng cách từ phần nội dung đến biên của module.
Dạng thuộc tính (tương tự như margin)
Padding: 10px 10px 10px 10px;
Kết quả:

Padding: 10px 10px 10px 10px;

Padding: 70px 10px 30px 50px;

Padding: 70px 10px 30px 50px;

Ý nghĩa các thuộc tính:
70px: khoãng cách từ nội dung đến biên trên module
10px: khoãng cách từ nội dung đến biên trái module
30px: khoãng cách từ nội dung đến biên dưới module
50px: khoãng cách từ nội dung đến biên phải module

18. Position (Vị trí tương đối của một module)

position có khá nhiều thuộc tính nhưng thông thường mình chỉ sử dụng 1 thuộc tính là position:fixed; để cố định vị trí của một module trên trang web (ví dụ cụ thể là thanh menu trang chủ, sơ đồ blog... trên đầu blog mình). Những thuộc tính khác mình hok tìm hiểu nên cũng không rành lắm.
Khi dùng position:fixed; người ta thường dùng kèm với 2 thuộc tính sau để định vị vị trí module
» top:10px; (cách đỉnh giao diện 10px) hoặc bottom:10px; (cách chân giao diện 10px)
» left: 10px; (cách lề trái 10px) hoặc right:10px; (cách lề phải giao diện 10px)
Bạn có thể thay giá trị tuyệt đối (dạng px) thành giá trị tương đối (dạng %)

19. Text (Thuộc tính về chữ của module)

Text là thuộc tính qui định về chữ của module. Bao gồm các vấn đề sau:
text-align:left; chữ canh lề trái
text-align:right; chữ canh lề phải
text-align:center; chữ canh giữa
text-align:justify; chữ canh đều 2 bên
text-decoration:underline;

gạch chân dòng chữ

text-decoration:overline;

gạch trên dòng chữ

text-decoration:line-through;

gạch ngang dòng chữ

text-decoration:blink;

chữ nhấp nháy (cái này hình như chrome ko hỗ trợ)

text-transform:lowercase;

chuyển tất cả về chữ thường

text-transform:uppercase;

chuyển tất cả về chữ hoa

text-transform:capitalize;

Viết hoa chữ đầu

20. Z-index (Sắp xếp module trên dưới)

z-index là thuộc tính qui định về cách sắp xếp các module.
dạng thuộc tính: z-index:5;
module có giá trị z-index cao hơn sẽ nằm trên. (thường áp dụng cho các module có thuộc tính position:fixed)

Phía dưới là demo mình để sẵn. Ấn nút xem trước để xem kết quả. Bạn có thể xóa và thử 1 số css khác theo ý mình để biết rõ hơn cách làm việc của css.

--- --- --- --- --- ---

Cơ bản về css thì đã hoàn thành. Tất nhiên còn rất nhiều css khác nhưng không thường xuyên sử dụng nên mình không đề cập ở đây. Nếu bạn gặp khó khăn gì trong việc viết ra các đoạn css này thì để lại comments bên dưới, mình sẽ cố gắng trả lời trong thời gian sớm nhất có thể. Chúc bạn thành công!

Tác Giả: NamKNA

Google Code là một nền tảng để lưu trữ file miễn phí, rất tiện lợi với các blogger không đủ kinh phí để mua các hosting.Với các nhà thiết kế thì Vấn đề tìm hosting là rất khó khăn. Với TortoiseSVN và google code hôm nay mình giới thiệu phù hợp với người dùng cá nhân và nhóm. VỚi các Blogger có nhiều Author và Amin cùng viết về thủ thuật đây là lựa chọn không thể tuyện vời hơn.

Bài viết trước namkna hướng dẫn bạn làm cách nào để sử dụng Google Code (xem lại Tại dây) mà không cần dùng một phần mềm nào. Bài viết này namkna sẽ hướng dẫn các bạn cách khác là dùng phần mềm. Mỗi cách có một ưu điểm khác nhau do vậy bạn hẫy tự tìm hiểu dần dần nha.

Đăng ký tài khoản trên Google code?

1- Bạn phải tạo một tài khoản Development tại http://code.google.com/intl/vi/
2- Vào trang Hosting của google : http://code.google.com/hosting/
3- Bấm vào Create a new project

4- Tiếp theo, tiến hành các thủ tục tạo Project.

• Project name phải là chữ thường, dấu cách thay bằng dấu trừ.
• Project summary: Mô tả tổng quan về project.
• Description: Các mô tả chi tiết hơn về Project đăng ký.
• Version Control system: là phần quan trọng để sử dụng được TortoiseSVN phải chọn Subversion.
• Source code license: Có thể tham khảo thêm ở đây hoặc chọn như hình dưới với người dùng cá nhân và GNU leser GPL với nhóm.
• Project label: Project của bạn sẽ nằm ở nhãn mà bạn chọn trong google code.

- Xem hình minh họa dưới:

5- Sau khi xong bám vào nút

6- Hiện ra một trang mới bạn click vào tab Source 

- Hãy nhớ link số 3 có dạng https://scipt-namkna.googlecode.com/svn/trunk/ nha vì còn phải sử dụng cho bước sau nữa.

- click vào link googlecode.com password  để lấy mật khẩu => Khi đó bạn sẽ được chuyển tới trang mật khẩu như sau:

- Bạn có thể thay đổi một mật khẩu khác bằng cách bấm vào nút . Hãy nhớ mậy khẩu này cùng đường link bên trên vì các bước tiếp theo còn dùng đến nha.

Note: Đừng bào giờ chia sẻ những thông tin này cho người khác biết vì có thể họ sẽ thay đổi vị trí hoặc xóa các tập tin bạn đã upload sẽ dấn đến hậu quả khó lường cho blog/website của bạn.
- Với những thành viên khác nhau thì Password này cũng sẽ khác nhau. Mỗi thành viên cần đăng nhập vào trang project vừa tạo rồi click vào Source –> googlecode.com password để lấy password.

Làm việc nhóm với TortoiseSVN?

Code nhóm là một vấn đề không phải đơn giản, muốn code nhóm tốt đòi hỏi phải có sự ăn ý tốt giữa các thành viên và những tuân thủ những quy ước chung của nhóm. Quả thực lúc đầu namkna cũng khá vất vả, từng thành viên trong nhóm code phần của mình rồi gởi qua email, rồi phải có một thành viên đảm trách việc tổng hợp code lại – Việc này làm mất khá nhiều thời gian nhưng hiệu quả lại không cao. TortoiseSVN là một giải pháp cho vấn đề này. Bài viết này Namkna sẽ giới thiệu về cách thức sử dụng TortoiseSVN kết hợp với host của Google Code để giúp việc code nhóm hiệu quả hơn.

Bạn cũng có thể Add các thành viên trong nhóm vào để sử dụng hosting này. Click vào tab Administer => chọn mục Project Members.
- Nếu tất cả các thành viên trong nhóm đều là chủ dự án thì add email các thành viên khác vào ô Project Owners.
- Mục Project Committers dành cho các thành viên có quyền upload các file lên project.
- Mục Project Contributors dành cho các thành viên có đóng góp trong dự án.
- Nhập xong click để lưu các thay đổi.

Giới thiệu, download và cài đặt TortoiseSVN

- TortoiseSVN là một phần mềm kiểm soát mã nguồn cho Microsoft Windows(SCM – Source Control software for Microsoft Windows) dễ sử dụng. Vì TortoiseSVN và có thể tốt nhất cho Apache Subversion. Nó được tích hợp vào Windows Explorer như một phần mở rộng cho menu chuột phải. TortoiseSVN không tích hợp cho một IDE cụ thể mà có thể sử dụng với bất kỳ công cụ phát triển nào bạn thích.
Để Upload file javar lên google code Namkna đề xuất cho các bạn sử dụng phần mềm chuyên dụng là TortoiseSVN.

1- Bấm vào link bên dưới để Download nha.

  Tệp tin tải về (13,65 Mb) (Chọn phiên bản phù hợp với máy tính bạn 32 bit và 64 bit)

Click here to Download Tortoisesvn
Kéo xuống cuối trang này chọn ngôn ngữ để cài đặt cho phần mềm nha.

Với một số phiên bản Windown Xp khi cài gặp lỗi "This installation package cannot be installed by the Windown installer service. you must install a Windowwn service pack that contains a newwer version of the Windown installer service"

- Thì bạn hãy cài các phiên bản cũ hơn theo link sau (Máy namkna cũng phải xài cách này):

  Tệp tin tải về (13,65 Mb) (Chọn phiên bản từ 1.6 trở xuống nha)

Click here to Download Tortoisesvn 

- Sau khi tải về bạn click chuột phải chọn Install  tiến hành cài đặt bình thường cứ next liên tục là xong!.

Note: Nếu gặp bất cứ khó khăn gì khi Download và cài đặt hãy comment bên duwois namkna sẽ giúp bạn.

2- Cài đặt xong hãy Restart lại máy theo yêu càu của phần mềm nha.

3- Click chuột phải tại màn hình Desktop => chọn TortoiseSVN => Setting.

4- Tại mục Subversion configuration file bạn chọn Edit.

5- Một trình soạn thảo văn bản Notepad sẽ hiện ra. Tài liệu này nắm giữ tất cả các hồ sơ cho các loại tập tin được phép tải lên. Ta cần thêm một danh sách các loại theo phần mở rộng tập tin này. Bằng cách dán đoạn mã dưới đây vào sau cùng của văn bản trong Notepad đó:

[miscellany]
enable-auto-props = yes
[auto-props]
# Scriptish formats
*.bat        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.bsh        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-beanshell
*.cgi        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.cmd        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.js         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/javascript
*.php        = svn:eol-style=native; svn:keywords=Id Rev Date; svn:mime-type=text/x-php
*.pl         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl; svn:executable
*.pm         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl
*.py         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-python; svn:executable
*.sh         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-sh; svn:executable
# Image formats
*.bmp        = svn:mime-type=image/bmp
*.gif        = svn:mime-type=image/gif
*.ico        = svn:mime-type=image/ico
*.jpeg       = svn:mime-type=image/jpeg
*.jpg        = svn:mime-type=image/jpeg
*.png        = svn:mime-type=image/png
*.tif        = svn:mime-type=image/tiff
*.tiff       = svn:mime-type=image/tiff
# Data formats
*.pdf        = svn:mime-type=application/pdf
*.avi        = svn:mime-type=video/avi
*.doc        = svn:mime-type=application/msword
*.eps        = svn:mime-type=application/postscript
*.gz         = svn:mime-type=application/gzip
*.mov        = svn:mime-type=video/quicktime
*.mp3        = svn:mime-type=audio/mpeg
*.ppt        = svn:mime-type=application/vnd.ms-powerpoint
*.ps         = svn:mime-type=application/postscript
*.psd        = svn:mime-type=application/photoshop
*.rtf        = svn:mime-type=text/rtf
*.swf        = svn:mime-type=application/x-shockwave-flash
*.tgz        = svn:mime-type=application/gzip
*.wav        = svn:mime-type=audio/wav
*.xls        = svn:mime-type=application/vnd.ms-excel
*.zip        = svn:mime-type=application/zip
# Text formats
.htaccess    = svn:mime-type=text/plain
*.css        = svn:mime-type=text/css
*.dtd        = svn:mime-type=text/xml
*.html       = svn:mime-type=text/html
*.ini        = svn:mime-type=text/plain
*.sql        = svn:mime-type=text/x-sql
*.txt        = svn:mime-type=text/plain
*.xhtml      = svn:mime-type=text/xhtml+xml
*.xml        = svn:mime-type=text/xml
*.xsd        = svn:mime-type=text/xml
*.xsl        = svn:mime-type=text/xml
*.xslt       = svn:mime-type=text/xml
*.xul        = svn:mime-type=text/xul
*.yml        = svn:mime-type=text/plain
CHANGES      = svn:mime-type=text/plain
COPYING      = svn:mime-type=text/plain
INSTALL      = svn:mime-type=text/plain
Makefile*    = svn:mime-type=text/plain
README       = svn:mime-type=text/plain
TODO         = svn:mime-type=text/plain
# Code formats
*.c          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.cpp        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.h          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.java       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.as         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain

6- Lưu Notedad đó lại là xong!

Upload file lên Google Code bằng TortoiseSVN

Upload file riêng lẻ?

Click chuột phải vào vị trí bất kỳ trên Deskop  và chọn TortoiseSVN => Repo Browser

- Nhập đường link mà bạn có khi thực hiên bên trên vào ô URL.

- Bạn kéo file cần Upload thả cửa sổ bên phải của TortoiseSVN => chọn Copy Items To Here.

- Nhập mô tả file sau đó bấm Ok.

- Lần đầu tiên tải lên sẽ có một hội thoại sẽ mở ra nhắc bạn phải nhập tên người dùng và mật khẩu. Tên người dùng chính là tài khoản google (Email) mà bạn đã sử dụng để đăng ký Google Code và mật khẩu tại bước phía trên. Bạn có thể đổi tên tài khoản tại mục googlecode.com password => User Preferences => Username display của trang google code.

- Bấm chọn vào Save authentication để nhớ mật khẩu tự động trên máy tính cho lần sau. => Bấm Ok và chờ một lát để tiến trình hoàn thành. 

-  Bấm vào file đó để lấy link của file Upload lên như hình:

Tạo foder để cập nhật tự động?

- Với cách này khi bạn thay đổi 1 file bất kỳ trong foder thì file đó sẽ được cập nhật tự động không như với file riền lẻ trên!

- Đầu tiên chúng ta tạo một Folder mới để chứa dữ liệu của Project. Sau đó click chuột phải vào Folder đó chọn SVN Checkout… (Trong ví dụ này là foder có tên Javarscipt)

- Ở cửa sổ hiện ra trong ô Url of repository nhập đường dẫn lúc nãy lấy trong mục Source trên trang google code. Ô Check Out deep sẽ tự động sinh ra đường đẫn. Click OK.

- Cửa sổ check out sẽ hiện ra tiến hành update dữ liệu của project trên host về máy.

- Vào thư mục Javarscipt bạn sẽ thấy một foder có tên là tên mà bạn tạo ban đầu trên google code!

- Mở thư mục Scip-namkna ra và tạo một file bất kỳ trong thư mục vừa Check Out… Ở đây tôi sẽ tạo một file có tên Demo-namkna.js để thử.

- Sau đó click chuột phải vào Folder đó chọn SVN Commit…

- Ở cửa sổ hiện ra chọn file .txt nằm trong ô Change made. Ở ô Message gõ nội dung cần nhắn khi thành viên khác update về sẽ thấy vào. Sau đó chọn Ok để
- Giờ thì Các thành viên khác có thể update những gì mà thành viên này commit lên bằng cách click chuột phải vào Folder chọn SVNupdate.

- Khi tôi sửa bất kỳ nội dung nào trong các file ở trong Folder đó. File đó sẽ có thêm dấu chấm than màu đỏ để báo là phải đó đã được sửa và sửa xong rồi thì nên commit lên.

- Với cách này bạn chỉ cần Copy file cần Upload và Pate cào thư mục bạn đã Commit mà không phải làm nhiều bước như với file riêng lẻ?
- Khi nào cần lấy link bạn chỉ cần click chuột phải vào file đó => chọn TortoiseSVN =>Switch...

- Copy đường link đó sử dụng.

-  Ngoài ra Chương trình còn hỗ trợ phục hồi lại các phiên bản đã được update ở những lần trước, So sánh những khác biệt so với phiên bản trước,… và còn nhiều tính năng khác nữa. Trong quá trình sử dụng chúng ta sẽ khám phá ra nhiều điều mới.