8 Tips to design professional blog using Blogger
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>
<style type="text/css">
{code CSS của bạn}
<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à:
- 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>
<link href='URL of favicon.ico' rel='shortcut icon' type='image/x-icon'/>
- 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'>
<!-- ... HTML code if you want to display only on home page here... -->
</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
[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.
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>
<style type="text/css">
{code CSS của bạn}
<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
<title><data:blog.pageTitle/></title>
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>
<meta name="Description" content="Add here a short description of your site" />
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à
<meta name="Description" content="BlOg FD - tips for blogger, hack widget, modify template and design layout" />
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>
<link href='URL of favicon.ico' rel='shortcut icon' type='image/x-icon'/>
- 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'>
<!-- ... HTML code if you want to display only on home page here... -->
</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
Nhận xét
Đăng nhận xét
- "Comment của bạn là vinh dự và niềm hạnh phúc của tôi"