Bảng mã màu

Nhằm phục vụ cho việc thiết kế template nên mình up bảng mã màu có demo ngay trên bài viết để mọi người tiện tìm ra một số màu thông dụng. Phục vụ cho quá trình thiết kế blog.

Rê chuột vào bảng bên dưới để xem màu.Click chuột để cố định màu.
Copy mã màu cần lấy để sử dụng 🙂

Hướng dẫn thiết kế template blog từ A đến X. (đã hoàn thành)

html

Được sự ủng hộ nhiệt tình của các bạn về việc lập dự án thiết kế template từ A tới X nên hôm nay mình quyết định bắt tay vào việc thực hiện dự án này luôn. Bài viết này mình chỉ hướng dẫn cho các blogger viết blog trên nền blogspot của google thôi nha. Và tất nhiên là sẽ thiết kế mới 100% template.

Một số điều cần lưu ý: (không đọc sau này có gì đừng hối hận)

» TUYỆT ĐỐI ĐỪNG THIẾT KẾ NGAY TRÊN TRANG BLOG CHÍNH. Bạn nên tạo một trang blog khác chỉ để phục vụ cho việc thiết kế. Sau khi thiết kế hoàn thành hãy đem cái template mới đó về áp dụng cho blog chính của mình.

» Trên hướng dẫn này mình chỉ viết về cấu trúc template. Những vấn đề về css bạn xem ở bài viết này nha.

» Trước khi thiết kế bạn nên phát thảo ra giấy về hình dạng trang blog mình mong muốn sẽ như thế nào. Việc này giúp bạn định hình được việc chính mình cần phải làm là gì, tránh lang mang không biết bắt đầu từ đâu.

Bắt đầu vào vấn đề chính:

1. Cấu trúc cơ bản template của 1 blog có dạng như sau:

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<html xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>

<head>

<b:skin><![CDATA[

]]></b:skin>

</head>

<body>

<b:section class=’navbar’ id=’navbar’ maxwidgets=’1′ showaddelement=’no’>

<b:widget id=’Navbar1′ locked=’true’ title=’Thanh điều hướng’ type=’Navbar’/>

</b:section>

</body>

</html>

Việc bạn cần làm là vào thiết kế → Chỉnh sửa HTML xóa toàn bộ đoạn code bên trong đó và paste đoạn code trên vào rồi save lại. Khi save lại sẽ xuất hiện 1 mục cảnh báo dạng như hình bên dưới. Bạn chọn vào mục xóa tiện ích.

tiện ích bloger

Về trang chủ bạn sẽ thấy nó trắng toát không còn gì trên đó hết.

2. Chèn thẻ meta và title cho blog – cấu trúc template

Giải thích 1 tí về vị trí thêm code vào đoạn code ở bước 1.

» Meta, tags sẽ được chèn dưới thẻ <head> và trên thẻ <b:skin>

Để blog bạn được các công cụ tìm kiếm chú ý đến thì phần này là phần quan trọng nhất.

Bạn có thể xem hình bên dưới để hiểu ý nghĩa của phần meta tags là gì.

Chèn thẻ meta và title cho blog

Ở dòng đầu là khi search ra trang chủ. Nó sẽ hiển thị tên blog vào đó.

Dòng bên dưới là khi search ra nội dung trong bài viết. Nó sẽ hiển thị kiểu Tên bài viết – Tên Blog

Nói chung phần này bạn cũng không cần hiểu nhiều làm gì. Chỉ cần chèn đoạn code sau vào vị trí đó là được:

<b:include data=’blog’ name=’all-head-content’/>

<b:if cond=’data:blog.url == data:blog.homepageUrl’>

<title><data:blog.title/></title>

</b:if>

<b:if cond=’data:blog.pageType == &quot;index&quot;’>

<title><data:blog.pageTitle/></title>

<meta content=’Mô tả về blog của bạn‘ name=’description’/>

<meta content=’Các từ khóa trên blog của bạn‘ name=’keywords’/>

<b:else/>

<title><data:blog.pageName/> – <data:blog.title/></title>

<meta expr:content=’data:blog.pageName + &quot; – Mô tả về blog của bạn&quot;’ name=’description’/>

<meta expr:content=’data:blog.pageName + &quot;, Các từ khóa trên blog của bạn&quot;’ name=’keywords’/>

</b:if>

Thay đổi những dòng màu đỏ cho phù hợp với blog của bạn là được rồi.

» Những đoạn css qui định về thuộc tính các module trên blog sẽ được chèn phía trên thẻ  ]]></b:skin>

Để hiểu về các thuộc tính của css thì bạn đọc bài viết này nha.

» Các module hiển thị trên blog sẽ được chèn bên trong thẻ <body> Module hiển thị trên blog </body>

3. Bố cục các thành phần bạn muốn có trên blog của mình ra giấy (đây là bước đầu tiên để bạn tạo được sự khác biệt cho blog của mình. Ví dụ mình muốn blog mình có cấu trúc dạng như hình vẽ bên dưới.

bố cục blog

Thành phần blog này bao gồm 3 phần chính:

» Ở đầu trang là header.

» Ở giữa gồm 3 phần là 1 sidebar bên trái (sidebar1) 1 sidebar bên phải (sidebar2) và phần nội dung bài viết ở giữa.(post)

» Ở cuối trang là footer.

Tất nhiên đây chỉ là những module lớn. Bên trong mỗi module lớn này sẽ còn được chia thành nhiều module nhỏ nữa. Vấn đề này mình sẽ đề cập sau. Việc bây giờ bạn cần làm là tạo ra các module ban đầu cho blog.

4. Tạo Module đầu tiên trên blog. 

Module lớn nhất của blog là body. Đây là module mặc định chứa tất cả các module khác trên blog.

Bạn cần khai báo một số thuộc tính css cho module body này vào phía trên thẻ ]]></b:skin> theo dạng như sau:

body{

background: #cccccc;  /* Màu nền toàn blog (mặc định là màu trắng) */ 

font: 16px georgia;  /* Cỡ chữ và font chữ cho toàn blog */

thuộc tính khác; /* Một số thuộc tính khác cho toàn blog */

…;

}

Chú ý: Bạn có thể tìm hiểu thêm về các thuộc tính khác ở bài viết này sau này mình sẽ không đề cập đến cái này nữa. tất cả những gì liên quan đến thuộc tính css thì bạn cứ vào bài viết trên.

Tiếp theo mình sẽ tạo 1 module với ID là box nằm trong body và chứa tất cả các module còn lại của blog.

Cách làm: ở giữa thẻ <body></body> bạn thêm 1 đoạn code như bên dưới:

<div id=’box’>

Nội Dung Blog

</div>

Tiếp tục chèn thêm thuộc tính css cho id box này bằng cách thêm đoạn code này ở trên thẻ ]]></b:skin>

#box{

Background:#3399bb; /* Màu nền của module box */

Width: 990px;  /* Chiều rộng của trang blog */

Margin:0 auto; /* Cân bằng vị trí module này vào giữa trang */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */ 

…;

}

Save template lại rồi về trang chủ bạn sẽ thấy có 1 module mới được hình thành.

5. Chia nhỏ Module box thành 3 phần: header, main-outer, footer

Việc tiếp theo là tạo ra 3 phần chính trên blog như mình đã đề cập ở trên bao gồm header, main-outer, footer. Cách làm cũng tương tự như gọi ra ID box cụ thể là:

ở giữa thẻ <div id=’box’> và thẻ đóng </div> của box bạn thêm 1 đoạn code như bên dưới:

<div id=’header’>

Nội Dung header

</div>

<div id=’main-outer’>

Nội Dung Blog

</div>

<div id=’footer’>

Nội Dung Footer

</div>

Tiếp tục chèn thêm thuộc tính css cho 3 id vừa tạo bằng cách thêm đoạn code css của nó ở trên thẻ ]]></b:skin>

#header{

Background:#4499bb; /* Màu nền của module header */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */ 

…;

}

#main-outer{

Background:#113366; /* Màu nền của module main-outer */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */ 

…;

}

#footer{

Background:#6600ee; /* Màu nền của module footer */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */ 

…;

}

Save template lại rồi về trang chủ bạn sẽ thấy có 3 module mới được hình thành.

6. Chia nhỏ Module main-outer thành 3 phần: sidebar1, main, sidebar2

Tiếp tục lại chia nhỏ module Main-outer ra thành 3 module nhỏ là sidebar1, main và sidebar2. Cách làm cũng tương tự như bạn chia nhỏ module box ở trên:

Cụ thể là ở giữa thẻ <div id=’main-outer’> và thẻ đóng </div> của main-outer bạn thêm 1 đoạn code như bên dưới:

<div id=’sidebar1′>

Nội Dung sidebar1

</div>

<div id=’main’>

Nội Dung Bài Viết

</div>

<div id=’sidebar2′>

Nội Dung sidebar2

</div>

<div style=’clear:both’/>

Chú ý: do 3 module trên sử dụng thuộc tính dời module qua trái, qua phải nên phía dưới nó cần có thêm  <div style=’clear:both’/> để dừng hiệu ứng dời module.

Tiếp tục chèn thêm thuộc tính css cho 3 id vừa tạo bằng cách thêm đoạn code css của nó ở trên thẻ ]]></b:skin>

#sidebar1{

Background:#884400; /* Màu nền của module sidebar1 */

width:200px; /* Chiều rộng của module sidebar1 */

float:left; /* Dời module sidebar1 qua trái */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */ 

…;

}

#main{

Background:#646853; /* Màu nền của module main */

width:590px; /* Chiều rộng của module main */

float:left; /* Dời module main qua trái */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */ 

…;

}

#sidebar2{

Background:#518643; /* Màu nền của module sidebar2 */

width:200px; /* Chiều rộng của module sidebar2 */

float:right; /* Dời module sidebar2 qua phải */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */ 

…;

}

Chú ý: Do lúc tạo module Main-outer có chiều rộng là 990px (như đã qui định ở trên). Nên tổng chiều rộng 3 module bên trong nó không được lớn hơn 990px nếu tổng chiều rộng 3 module con lớn hơn 990px thì sidebar2 sẽ bị đẩy xuống dưới.

Và cứ bằng cách làm như trên bạn có thể chia nhỏ module trên blog của bạn ra bao nhiêu phần cũng được. Việc bạn cần làm là cứ chèn module vào đúng vị trí của nó, quy định kích thước và áp dụng những thẻ css phù hợp cho module đó phía trên thẻ ]]></b:skin> là ok.

7. Điều chỉnh sidebar (tạo mục Thêm Tiện Ích của blogspot cho sidebar)

Lẽ ra việc tiếp theo mình cần làm là điều chỉnh header trước nhưng như vậy sẽ có 1 số thứ phải điều chỉnh hơi lằng nhằng nên mình hướng dẫn điều chỉnh sidebar trước, sau này điều chỉnh header sẽ tiện hơn.

Như bạn cũng đã biết ở mục Thiết kế → Phần tử trang. Trên sidebar có mục Thêm Tiện Ích để tiện việc cho bạn bổ sung những tiện ích cần thiết cho blog. Và bây giờ mình sẽ hướng dẫn các bạn tạo ra mục này.

Như trên template mình đưa ra ban đầu thì có 2 sidebar 1 nằm bên trái và 1 nằm bên phải. mình sẽ hướng dẫn cho sidebar bên trái và bạn là tương tự với sidebar bên phải nha.

Trong template mình đã tạo thì sidebar bên trái có ID là sidebar1.

Ở giữa thẻ <div id=’sidebar1′> và thẻ đóng </div> của sidebar1 bạn chèn đoạn code sau:

<b:section class=’sbar1‘ id=’sbar1‘ showaddelement=’yes’/>

Save template lại.

 » Về mục Phần tử trang bạn sẽ thấy xuất hiện mục thêm tiện ích. Lúc này nó sẽ nằm ở giữa. Nhưng không sao, cứ để nó ở đó sau này nó sẽ tự điều chỉnh lại.

 » Về trang chủ bạn sẽ thấy xuất hiện thanh Navbar ở đầu blog. Nếu bạn không muốn xài thanh navbar này thì chèn đoạn code sau vào trước thẻ ]]></b:skin> rồi save lại là xong.

#navbar-iframe {height:0px;visibility:hidden;display:none}

Làm tương tự với sidebar2 có 1 điều cần lưu ý là nhớ chuyển sbar1 trong đoạn code ở sidebar1 thành sbar2. Nếu bạn không chuyển cái này thì template sẽ báo lỗi.

Khi tạo ra được 2 sidebar rồi bạn hãy thử thêm 1 tiện ích gì đó vào blog xem nói hoạt động như thế nào.

Rất dễ thấy là mặc định tiêu đề của blog mới tạo bị dư 1 khoảng khá lớn ở trên và ở dưới. Để khắc phục điều này bạn chỉ cần chèn đoạn code sau phía trên thẻ ]]></b:skin> rồi save lại là xong.

h2 {padding:0; margin:0}

8. Điều chỉnh header (tạo header như mẫu header mẫu của blogspot)

Như đã đề cập ở mục 7. Phần tiếp theo mình cần điều chỉnh là header của blog. Header mặc định của blog là một tiện ích cho phép thay đổi tiêu đề và mô tả của blog. ngoài ra còn cho phép thay đổi banner cho header.

Và bây giờ mình sẽ hướng dẫn bạn gọi ra tiện ích này cho header.

Vào template (KHÔNG mở rộng mẫu tiện ích). Trong template này header mình đã tạo ban đầu có ID là header.

Ở giữa thẻ <div id=’header’> và thẻ đóng </div> của header bạn chèn đoạn code sau:

<b:section class=’head’ id=’head’ maxwidgets=’1′ showaddelement=’no’>

<b:widget id=’Header1′ locked=’true’ title='(Tiêu đề)’ type=’Header’/>

</b:section>

Save template lại. Về mục phần tử trang bạn sẽ thấy tiện ích của header đã được tạo ra. Bạn chỉ việc thay đổi tiêu đề và mô tả cho blog hoặc thay đổi banner cho blog là được. Về trang chủ để kiểm tra kết quả nào.

9. Điều chỉnh phần bài đăng (main) (hiển thị nội dung các bài viết ra blog)

Trong template này mình đã cho các bài viết nằm trong ID main. Để hiển thị nội dung các bài viết ra blog bạn chỉ việc thực hiện như sau:

Vào template (KHÔNG mở rộng mẫu tiện ích) ở giữa thẻ <div id=’main’> và thẻ đóng </div> của main bạn chèn đoạn code sau:

<b:section class=’mainpost’ id=’mainpost’ showaddelement=’no’>

<b:widget id=’Blog1′ locked=’true’ title=’Bài đăng trên Blog’ type=’Blog’/>

</b:section>

Save template lại. Về mục Phần tử trang bạn sẽ thấy tiện ích Bài Đăng Trên Blog đã hiện ra. Bạn chỉ việc chỉnh sửa tiện ích này lại cho phù hợp với blog là ok rồi. Về trang chủ các bài đăng có trên blog cũng đã được hiện ra. Như vậy là ok rồi.

10. Điều chỉnh footer blog.

Thông thường footer blog là nơi người ta đặt thông tin về tên template. Người thiết kế ra template (ghi tên mình zô liên. minh tự thiết kế mà)  nên bạn cứ đặt những code thông thường vào đó là được rồi.

Cũng có một số bạn muốn đặt thêm một số tiện ích vào phần footer. Việc bạn cần làm là thực hiện y như bước 7 nhưng thay chữ sbar1 thành foot là được rồi.

11. Những điều chỉnh khác.

Về cơ bản template blogspot chỉ có bao nhiêu đó thôi. Ngoài ra cũng chẳng còn gì nữa.

Tiếp theo là bạn áp dụng những thủ thuật khác để tạo ra những nét đặc trưng riêng cho blog của mình là được rồi.

Và nếu làm theo tất cả những bước trên thì template của bạn sẽ có dạng như sau: (xem rồi đừng choáng nha :D)

Xem Demo

Xem qua chắc chắn bạn sẽ nghĩ trong đầu “blog gì mà thấy ghê” 😀 nhưng thật sự thì không ghê đâu bạn. Blog hiện tại mình đang dùng cũng từng trải qua những lúc ghê như vậy đó.

Nguyên nhân nhìn thấy ghê là do mình chưa xài nhiều những thuộc tính css trong bài viết này. Bài viết này mình chỉ đề cập đến việc tạo ra và nắm bắt được cấu trúc template của mình thôi.

Việc trang trí là sao cho đẹp là ở chỗ bạn có thật sự sáng tạo khi kết hợp các thuộc tính css lại với nhau hay không thôi.

Về cách trang trí cho blog bằng những thuộc tính css thì bạn xem ở bài viết này.

Dự án này tới đây cũng đã kết thúc rồi. Trong quá trình tự thiết kế nếu có khó khăn hay thắc mắc gì thì để lại comments bên dưới mình sẽ trả lời trong thời gian sớm nhất có thể. Chúc bạn thành công! Cố gắng lên.

Hướng dẫn tạo thanh menu cố định ở đầu blog

Có một bạn đã nhờ mình hướng dẫn tạo thanh menu cố định như ở đầu trang blog của mình nên tối nay mình viết hướng dẫn này để thực hiện thủ thuật trên cho mọi người.

Manu cố định

Xem Demo:

menu blog cố định

1. Vào Thiết kế→ chỉnh sửa HTML và chèn đoạn css sau vào trước thẻ ]]></b:skin>

#topmenu-outer{z-index:30; height:20px;width:100%;background:#545454; color:#fff; text-shadow:1px 1px 1px #000; top:0px;right:0px; position:fixed;padding:5px;}

#topmenu{width:990px;margin:auto;}

#topmenu1{width:790px;float:left;}

#topmenu1 ul{margin:0; padding:0}

#topmenu1 ul li{display: inline; margin:0;}

#topmenu1 ul li:first-child{padding:5px 0;}

#topmenu1 ul li a{font-weight:bold; color: #fff; text-shadow:1px 1px 3px #000; margin:auto;padding:7px 10px;}

#topmenu1 ul li a:hover{background:#fff; color:#fff; margin:0; text-shadow:1px 1px 3px #000}

#topmenu2{width:200px;float:left;}

.search-text{width:200px; border:none;margin:auto}

2. Dùng từ khóa <body tìm đoạn code có dạng

<body> hoặc <body …> (phần có thể khác nhau tùy blog)

3. Chèn đoạn code sau vào phía dưới thẻ body tìm được ở bước 2.

<div id=’topmenu-outer’>

<div id=’topmenu’>

<div id=’topmenu1’>

<b:section class=’top-menu’ id=’top-menu’ showaddelement=’no’>

<b:widget id=’LinkList30′ locked=’true’ title=” type=’LinkList’/>

</b:section>

</div>

<div id=’topmenu2’><form action=’http://www.google.com.vn/search’ method=’get’ target=’_blank’>

<input class=’search-text’ id=’search-text’ name=’q’ onblur=’if (this.value == &quot;&quot;) {this.value = &quot;Tìm kiếm thủ thuật …&quot;;}’ onfocus=’if (this.value == &quot;Tìm kiếm thủ thuật …&quot;) {this.value = &quot;&quot;}’ tabindex=’7′ type=’text’ value=’Tìm kiếm thủ thuật …’/>

<input checked=’checked’ name=’sitesearch’ type=’hidden’ value=’www.voquocan.com‘/>

</form></div>

<div style=’clear:both’/>

</div>

</div>

4. Save template lại rồi về mục Phần Tử Trang sẽ thấy xuất hiện một tiện ích Danh Sách Liên Kết ở đầu trang.

Bạn chọn vào chỉnh sửa và thêm liên kết muốn xuất hiện ở top menu vào rồi lưu lại là được. Sau này muốn chỉnh sửa cũng sẽ tiện hơn nhiều.

Nếu có vấn đề gì không thực hiện được bạn để lại comment bên dưới mình sẽ trả lời trong thời gian sớm nhất có thể. Chúc bạn thành công.

CSS căn bản (đã hoàn thành)

Hôm trước mình đã lấy ý kiến mọi người về vấn đề lập dự án lớp học css và cũng được sự ủng hộ nhiệt tình của mọi người nên hôm nay quyết định bắt tay vào thực hiện chuyên mục này luôn. Hôm nay mình sẽ nói về một số thuộc tính căn bản của css để phục vụ cho quá trình thiết kế.

học css

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 thường được đặt trước thẻ ]]></b:skin>

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.

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 quy đị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 quy đị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 quy đị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 quy đị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.

ảnh võ quốc an blog

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. Quy đị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 quy định về những thuộc tính liên quan đến chữ như kiểu chữ, cỡ chữ, in đậ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; (quy định kiểu chữ)

font-size: 30px; (quy đị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) quy đị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 quy đị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:

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 quy định.

Dạng thuộc tính

list-style:none; (không hiển thị dấu chấm tròn.)

list-style: disc url(http://2.bp.blogspot.com/-Ui4xgj48Wl0/TwF2bFsiB9I/AAAAAAAAAi4/pAbob6tZM2s/s1600/iconhover.png); (dùng ảnh ở liên kết làm dấu chấm)

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)

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

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 quy đị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 quy đị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

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.

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

Opacity là thuộc tính quy đị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:hidden;

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 quy đị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 quy đị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) 

Chú ý: Bạn có thể kết hợp nhiều thuộc tính khác nhau vào một module theo dạng

.module_name{

thuộc tính thứ nhất;

thuộc tính thứ 2;

thuộc tính thứ 3;

}

Ví dụ mình có 1 class sau:

.voquocan {

background: #ccc;

border: 1px solid #aaa;

border-radius: 30px 0px 30px 0px;

box-shadow:1px 1px 2px 2px #333;

color:#991177;

font: italic bold 16px Georgia; 

height: 100px;

width: 300px;  

Margin: 10px 10px 10px 10px; 

Padding: 10px 10px 10px 10px; 

text-decoration:blink; 

text-align:center;

text-transform:uppercase; 

}

Và đây là kết quả khi gọi module ra

XIN CHÀO BẠN.

RẤT CÁM ƠN BẠN ĐÃ GHÉ THĂM BLOG CỦA MÌNH.

CHÚC BẠN CÓ MỘT NGÀY THẬT NHIỀU MAY MẮN

— — — — — —

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!

Hướng dẫn tạo Button Facebook Like, Follow Twitter và Google +1 cho bài viết

Thay vì sử dụng bookmark sharing is sexy gồm toàn những mạng xã hội ít thông dụng ở Việt Nam thì mình đã nghĩ tới 1 hướng khác là tại sao mình lại không sử dụng bộ button của những mạng xã hội lớn như google, facebook, twitter.

Tuy ít button hơn nhưng hiệu quả nó đem lại thì cao hơn nhiều. Cũng chính vì suy nghĩ này mà bài viết này đã ra đời. Mình cũng đã chỉnh sửa 1 tí cho nó trượt dọc qua bên trái luôn.

Xem Demo

1. Vào thiết kế — chỉnh sửa HTML — Mở rộng tiện ích mẫu.

Chèn đoạn code bên dưới vào sau thẻ <body>

Lưu ý: với 1 số blog thì thẻ body có dạng

<body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>

Nói chung là cứ tìm với từ khóa <body là ok thôi.

<div id=”fb-root”></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = “//connect.facebook.net/vi_VN/all.js#xfbml=1”;

  fjs.parentNode.insertBefore(js, fjs);

}(document, ‘script’, ‘facebook-jssdk’));</script>

2. Tiếp tục chèn đoạn code sau vào phía trên  ]]></b:skin>

.likebutton-outer{z-index:30;top:100px;left:10px;position:fixed;width:90px; height:370px;background :#ddd;border-radius:10px;  box-shadow: 5px 5px 5px #666}

.likebutton{margin:0 0 0 20px}

3. Tìm đoạn code sau:

<div class=’post-footer-line post-footer-line-3’/>

4. Chèn đoạn code sau vào phía dưới đoạn code ở bước 3.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<div class=’likebutton-outer’>

<div class=’likebutton’>

<div class=’fb-like’ data-layout=’box_count’ data-send=’false’ data-show-faces=’true’ expr:href=’data:post.url’/>

</div>

<div class=’likebutton’>

<script src=’http://apis.google.com/js/plusone.js’ type=’text/javascript’/>     

<g:plusone count=’true’ expr:href=’data:post.url’ size=’tall’/>     

</div>

<div class=’likebutton’>

<a href=”https://twitter.com/share” class=”twitter-share-button” expr:href=”data:post.url” data-lang=”en” data-related=”anywhereTheJavascriptAPI” data-count=”vertical”>Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>

</div>

<div class=’likebutton’>

<script type=”text/javascript”>var linkhay_title = ”;</script>

<script type=”text/javascript”>var linkhay_url = ”;</script>

<script type=”text/javascript”>var linkhay_desc = ”;</script>

<script type=”text/javascript”>var linkhay_style = ‘1’;</script>

<script type=”text/javascript” src=”http://voquocan.googlecode.com/files/linkhay.js”></script>

</div>

<div class=’likebutton’>

<div class=”addthis_toolbox addthis_default_style “>

<a class=”addthis_counter”></a>

</div>

<script type=”text/javascript” src=”http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ed73c0375dd2fe2″></script>

</div>

</div>

</b:if>

Đoạn code màu đỏ là chèn nút like của facebook.

Đoạn code màu xanh dương là chèn nút Google +1.

Đoạn code màu xanh lá là chèn nút follow của twitter.

Bonus thêm đoạn code màu tím là nút addthis chia sẻ lên những mạng xã hội lớn. có cả zing me nữa.

Đoạn code màu cam là chia sẻ lên link hay.

Các bạn nhớ chọn lọc lại nha. Xài hết cũng không vấn đề gì. Không xài cái nào thì xóa cái đó đi.

Xong rồi lưu template lại và tận hưởng kết quả nào 🙂

Chú ý là khung button này chỉ hiện khi mở 1 bài viết nào đó. Nó không hiện trên trang chủ, trang label và trang archive nha.

Nếu có vấn đề gì thì bạn để lại lời nhắn nha. Mình sẽ trả lời trong thời gian sớm nhất.

Powered by WordPress & Theme by Anders Norén