8 thủ thuật để thiết kế 1 blog chuyên nghiệp với Blogger

8 Tips to design professional blog using Blogger

[FD's BlOg] - Blogger đó là một nền tảng rất mạnh mẽ để giúp bạn tạo 1 blog. Nó hoàn toàn miễn phí và với một số tính năng như : bạn có thể tùy chỉnh code template như thế nào bạn thích, mà không có giới hạn.
Trong bài này mình sẽ minh họa một số mẹo có thể giúp bạn cải thiện mẫu Blogger của bạn giúp nó trở nên chuyên nghiệp hơn.

1.Bắt đầu tạo một bản mẫu
Một mẫu đẹp là rất quan trọng cho sự thành công của blog của bạn trong việc truy cập và kiếm tiền với AdSense. Trước khi bắt đầu tùy chỉnh mẫu của bạn, bạn có thể tải xuống một mẫu đơn giản của Blogger, ví dụ như "Minima" (một mẫu khá phổ biến, và được nhiều người dùng): sau đó ta xóa tất cả code CSS trong thẻ <b:skin> và như thế thẻ <b:skin> chỉ còn lại như bên dưới:

<b:skin> /*</b:skin>

Sau đó ta sẽ thay thế bằng các code CSS cho riêng mình vào trong thẻ <style>

Ví dụ như ta có code như bên dưới:

<b:skin> /*</b:skin>
/*----------------------------*/
/*--- RESET HTML TAG ---*/
/*----------------------------*/
<style type="text/css">
body{
width:650px;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial;
font-size:11px;
color:#333333;
background-color:#FFFFFF;
}

a:link, a:visited, a:hover{text-decoration:none;}

h2 {
clear:both;
padding-top:20px;
}
ul {
list-style:none;
margin:0;
padding:0;
}

li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}

li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}

li a {
background:url(image.jpg) repeat 0 0;
}

li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}

<style>
...
...
...

- Và lúc này bạn có thể thêm các id, class, các thành phần, yếu tố mới cho mẫu của bạn.

2. Tạo tiêu đề và miêu tả cho blog của bạn
- Để tạo một ấn tượng riêng, phong cách riêng cho bạn, thì tiêu đề của bạn phải nói lên được nội dung blog của bạn. Cơ bản thì trong mỗi template blog đều có dòng code tiêu đề của blog

Và hãy thay đổi chúng, ví dụ như blog của mình sẽ là:

<title>Tips For Blogger | BlOg FD</title>

- Ngòai ra, bạn nên tạo thêm một thẻ <meta> để viết vài dòng mô tả blog của bạn, để làm điều này bạn copy đọan code bên dưới và dán vào sau dòng <head>

hãy thay code màu xanh thành 1 vài câu để mô tả blog của bạn, ví dụ như blog của mình sẽ là

Và khi đó bạn sẽ thấy các tiêu để và mô tả đó được hiển thị trên cỗ máy tìm kiếm google như hình bên dưới:

3. Tạo favicon cho blog của bạn
- Một trong những cái để tạo nên phong cách riêng cho bạn đó chính là biểu tượng trên thanh address (favicon). Thông thường, các blogspot đều có favicon mặc định là biểu tượng của Blogger

- Để thay thế favicon của blogger thành favicon của mình thì bạn chỉ cần thêm code bên dưới vào trước thẻ </head>

- Các bạn có thể vào đây để tạo một file favicon cho riêng mình.

4. Tạo một thanh menu chính.
- Đơn giản nhất là bạn tạo một thanh menu nằm ngang và đặt nó trên cùng của blog bạn, và tạo các liên kết cho các menu đó. Ví dụ như blog của mình, mình sẽ tạo các menu chính như : About us, Contact, RSS, ...

5. Tạo các chuyên mục với các chuyên mục con trong nó:
- Nếu blog của bạn có nhiều nhãn, chuyên mục, hãy gôm chúng chung lại thành một chuyên mục nào đó. Và bên trong nó sẽ chứa các nhãn có nội dung liên quan tới chuyên mục đó. Và một dạng menu nhiều tầng là thích hợp nhất với việc này. Với menu lớp cao nhất là chuyên mục mà bạn đặt để gôm chung các nhãn có cùng nội dung, và các lớp menu nhỏ hơn sẽ là các nhãn...

Các bạn có thể tham khảo bài viết này để tạo một thanh menu nhiều cấp như trên.

6. Hiển thị vài tiện ích HTML ở trang chủ
- Đôi khi rất hữu ích khi cho một tiện ích HTML nào đó chỉ được phép hiển thị ở trang chủ, và để làm điều này, bạn chỉ cần sử dụng thẻ <b:if> của blogger là được, xem đọan code bên dưới :

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



</b:if>

Bằng cách này, nếu trang bạn đang hiển thị không phải là trang chủ thì tiện ích đó sẽ không được hiển thị.

7. Tạo các widget "Bài viết mới nhất" và các "comment mới nhất" từ link RSS
- Thông thường blogger đều có hỗ trợ link RSS cho bài viết và comment của bạn. Và nó có dạng như bên dưới:

link RSS bài viết
http://YOURBLOG.blogspot.com/feeds/posts/default
link RSS comment
http://YOURBLOG.blogspot.com/feeds/comments/default

-Ngòai ra các nhãn của bài viết bạn cũng được cấp link RSS, và có dạng như bên dưới:

http://YOURBLOG.blogspot.com/feeds/posts/default/-/Label

- Tuy nhiên bạn cũng có thể tạo link RSS cho bài viết từ FeedBurner, và bạn sẽ sử dụng được nhiều tiện ích từ feedburner, thông dụng nhất là tiện ích nhận bài viết từ blog của bạn qua mail.
Và link RSS của feedburner có dạng như bên dưới:

http://feeds2.feedburner.com/yourname-RSSlink

Và bạn có thể vào đây để tạo một link RSS cho cái bài viết của bạn.

8. Add các trang xã hội vào blog của bạn
- Các trang xã hội mà một trong những cách để cho người khác biết đến blog của bạn

Chúc các bạn thành công.

10

: làm thế nào để em đưa blog lên bộ máy tìm kiếm của google dc anh ??
: @Mưa Ngâu : à cái này do google nó tự index thôi bạn à, như blog của mình cũng thế, mình chẳng cần làm gì cả, nếu blog của bạn có người truy cập vào thì google sẽ tự index
: đúng thế, mình nó cũng tự tìm :D
: Khi mình đưa vào thì nó tự đổi như vậy! và tìm kiếm bằng google không hiển thị như FD - xin hãy giúp mình nhé (Email: covua.gso.media@gmail.com)

/* meta content='kien thuc tai chinh' name='Description' */
: một thời gian để google update bạn ạ
: bạn mục số 4. làm sao tạo được menu trên cùng vậy bạn, bạn nói rõ hơn giúp, tks
: chân thành cảm ơn admin FD ,mình cũng làm theo nhiều CSS và thủ thuật của FD cho blogger và blog của mình cũng tạm ổn ..Rất vui và phấn khởi khi gặp dc trang web của FD ,chúc FD nhiều sức khỏe và niềm vui để giúp anh chị em trong cộng động blogger việt
: Có phải tạo favicon xong thì down về ùi vô blog vào thiết kế ---> bố cục. Rồi thấy chỗ chỉnh sữa favicon rồi lấy hình hồi nãy lưu đóng không . Nhưng sao khi chèn hình nó ghi không phải hình vuông thế bạn
: minh chua biet tao ra link con ban oi, ban co the chi minh cach tao link con duoc ko , cam on ban nhieu
: Xin lỗi cho mình hỏi một chút, mình mới tìm hiểu về Blog spot này, bây giờ mình có code temp blog mà không biết up code đó lên như thế nào và ở đâu? Tks các bạn.