Tìm thấy 8 mục

Bạn đã làm hình nền cho blog của mình chưa? Nếu chưa, hãy đọc bài viết này. Hôm nay tôi hướng dẫn một cách làm hình nền khác: hình nền cho từng phần của blog (header, main, sidebar, footer).

Template theo mặc định bao gồm 4 thành phần chính: header (đầu: chứa tên, miêu tả blog, main (chính: hiển thị bài viết), sidebar (thành phần bên của trang, nằm bên trái hoặc phải hay cả hai), footer (thành phần dưới cùng).


Làm sao để làm hình nền từng thành phần này? Sau khi đăng nhập blogger.com, bạn vào Edit HTML, kéo thanh trượt sẽ tìm thấy các thành phần này.

A. Thành phần Header

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

B. Thành phần Main

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

C. Thành phần Sidebar

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

D. Thành phần Footer

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Như bạn đã biết cách chèn hình nền cho blog, đoạn mã liên kết đến hình:

background-image:url(http://www.vidu.com/hinh.jpg);

Trong đó http://www.vidu.com/hinh.jpg là liên kết đến hình nền. Như vậy muốn chèn vào header, bạn sẽ chèn như sau:

#header-wrapper {
width:660px;
background-image:url(http://www.vidu.com/hinh.jpg);
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Cách chèn tương tự cho các thành phần khác.

Kích thước hình nền cho từng thành phần

Tùy theo width của mỗi thành phần. Các tối ưu nhất hình nền cho từng thành phần có chiều ngang bằng với width của mỗi thành phần. Chiều dọc càng nhỏ càng tốt.

Ví dụ thành phần main và sidebar sẽ kéo dài hoặc thu hẹp chiều dọc theo nội dung bài viết hay số lượng widget được thêm vào, điều này chúng ta không thể kiểm soát được, vì vậy sử dụng ảnh có chiều ngang bằng width của mỗi thành phần, chiều dọc nhỏ để tự động lặp lại theo độ dài hiển thị. Theo các con số như ví dụ trên, chúng ta sẽ thiết kế hình nền với chiều ngang 410px cho main và 220px cho sidebar. Một tấm ảnh vừa phải có kích thước 410 x 10 là tương đối hợp lý. Cần thêm vào đoạn mã sau để hình nền lặp lại theo chiều dọc:

background-repeat: repeat-y;

Để hình nền này nằm vị trí cân đối, bạn có thể thêm vào:

background-position: center center;

Lưu ý thêm, bạn có thể định nghĩa màu nền cho toàn bộ blog của mình sao cho tương phản và làm nổi bậc các thành phần. Có hai cách để làm việc này.

Cách 1. Bạn chọn Font and Colors (Màu và chữ) trên Template, chọn màu cho background

Cách 2. Vào Edit HTML, bạn kéo thanh trược để tìm:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Trong đó background:$bgcolor; định màu nền thay đổi theo lựa chọn của bạn ở cách trên. Hãy lấy mã màu thập lục và chèn thẳng. Ví dụ, màu trắng như sau:

background:#ffffff;

Chúc bạn thành công!

Gần đây Blogger đã thử nghiệm tính năng cho phép tự động đăng bài theo lịch định sẵn. Đây là tính năng rất hay cho phép người quản lý blog có thể viết bài ở thời điểm hiện tại và chọn ngày giờ trong tương lai để bài viết tự động xuất hiện.

Thao tác rất đơn giản, khi soạn thảo xong bài viết chỉ cần nhấn Post Options (Tùy chọn bài đăng) chọn ngày tháng dự định đăng bài và nhấn Publish (Xuất bản bài đăng). Bài viết sẽ được chú thích bằng chữ scheduled (đã sắp xếp) và tự động xuất bản theo thời gian đã chọn trước đó.

Hình minh họa sau đây cho thấy bài viết này được sẽ tự động xuất hiện vào lúc 7h00 ngày 15/04/2008
Lưu ý nhỏ một khi bài viết đã sắp xếp được xuất bản trên blog sẽ không thể được sắp xếp một lần nữa, tuy nhiên bạn vẫn có thể chỉnh sửa nội dung, thay đổi ngày giờ và đăng lại. Tương tự như một bài đăng đã được xuất bản, khi chỉnh sửa bài đăng đã sắp xếp thì trình soạn thảo sẽ không tự động lưu nháp như lúc bạn soạn thảo mới.

Để sử dụng tính năng này, hãy đăng nhập blog theo địa chỉ http://draft.blogger.com.

Ngoài ra từ đây bạn cũng có thể dùng thử hộp tìm kiếm, đọc feed blog, các tiện ích của Google,...

Gần đây Blogger cập nhật nhiều tính năng mới hấp dẫn. Một trong số đó là hệ thống comment mới với khung nhập nội dung nằm ngay sau bài viết. Đây chính là tính năng được chờ đợi nhất vì ưu thế quen thuộc mà người dùng thường thấy trên các nền blog Yahoo! 360, WordPress,...

Để sự dụng tính năng này bạn phải đăng nhập blog của mình theo địa chỉ http://draft.blogger.com và chọn Embedded below post (Bài đăng dưới đây đã được nhúng) tương ứng với Comment Form Placement (Vị trí mẫu nhận xét) ở mục Comments (Nhận xét) của thẻ Settings (Cài đặt). Và nhấn xem blog để kiểm tra khung có xuất hiện hay không.






Với một blog mới vừa được tạo, tùy mẫu có thể đoạn mã quản lý xuất hiện của khung nhận xét đã được thêm trước đó. Trong trường hợp không có hay muốn sử dụng cho mẫu hiện tại bạn cần nhấn phần Expand Widget Templates (Mở rộng mẫu tiện ích) tìm đoạn code sau:

<p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </p>

Và thay thế bằng:

<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p>

Lưu lại, xem blog bạn sẽ thấy xuất hiện như sau:




Để chỉnh sửa định dạng đoạn văn bản ghi dưới Post a comment(Đăng một nhận xét) trong trường hợp có sử dụng Comment Form Message (Thư thông báo Mẫu Nhận xét) bạn chỉ cần tìm đoạn mã:

<p><data:blogCommentMessage/></p>

Và thêm một đoạn CSS điều khiển định dạng (Ví dụ tôi thêm vào canh đều văn bản và kiểu chữ nghiêng như hình trên):

<p style='text-align: justify; font-style: italic;'><data:blogCommentMessage/></p>
Nếu gặp vấn đề bạn có thể đăng một nhận xét ngay dưới bài viết này để chúng ta cùng nhau tháo gỡ. Chúc thành công!

BỔ SUNG:

Nếu khung nhận xét vẫn không xuất hiện trên trang của của bài viết cụ thể (trong trường hợp bạn đã chọn chế độ cho phép comment) hãy bổ sung thêm đoạn code màu đỏ theo vị trí của dưới đây:

<b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comments'/> <b:include data='post' name='comment-form'/> </b:if> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if>

Để hiển thị code bạn cần đặt chúng giữa hai thẻ mở <pre> và đóng </pre> trong bài viết của mình. Muốn đẹp hơn bạn có thể thêm khung bằng cách sử dụng các thuộc tính về màu chữ, màu nền, font chữ, đường viền, kích thước rộng và cao, thanh trượt, cách viền ... bằng cách thêm code CSS vào thẻ mở, ví dụ: <pre style="color: #333333; background: #999999; width: 100%; height: 50px; overflow: auto; padding: 10px;">.

Một cách chuyên nghiệp hơn chúng ta sẽ tạo ra một class mới và đặt chúng vào CSS của template (đặt vào bất kỳ vị trí nào giữa hai thẻ <b:skin><![CDATA[/* và ]]></b:skin> ). Việc làm này sẽ giúp bạn sử dụng khung hiển thị code thống nhất ở tất cả các bài viết có dùng khung và dễ chỉnh sửa thuộc tính khi muốn thay đổi. Ví dụ ở đây tôi tạo ra lớp pre-formatting có CSS như sau:


.pre-formatting{ color: #333333; background: #999999; border: 2px solid #999999; overflow: auto; font-family: "Tahoma", Tahoma; padding: 10px;}
Đương nhiên trong template nên bạn có thể sử dụng các biến lấy giá trị cho từng thuộc tính đã được định nghĩa trước đó. Ví dụ:
.pre-formatting{ color: $textcolor; background: $bgcolor; border: 2px solid $bordercolor; overflow: auto; font: $headerfont; padding: 10px;}
Cách sử dụng:

Để code xuất hiện mang thuộc tính của CSS đã lưu trước đó chúng ta sẽ sử dụng chế độ HTML để soạn bài và đặt code như sau:

<pre style="height: 100px;" class="pre-formatting">Code</pre>
Câu hỏi đặt ra ở đây là chúng ta đã dùng class pre-formatting, vậy tại sao phải thêm CSS điều khiển height (chiều cao của khung), có dư thừa chăng? Câu trả lời phụ thuộc vào đoạn code mà bạn dùng. Nếu đoạn code đó ngắn bạn chọn giá trị chiều cao khung nhỏ và ngược lại, không nhất thiết phải thêm vào CSS của template vì chúng ta không biết trước đoạn code mỗi lần dùng. Không dư thừa chút nào!

Cũng xin lưu ý bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML (ví dụ: < thành &lt; và > thành &gt;) trước khi đặt giữa hai thẻ trên. Và mách nhỏ hãy lưu đoạn code đó vào Post Template (Mẫu đăng bài) trong Settings (Cài đặt) | Formatting (Đang định dạng) để không cần phải gõ mỗi lần dùng.

CẬP NHẬT:

Tôi vừa biết thêm một cách chuyên nghiệp hơn và đơn giản hơn vì không phải ước lượng height cho đoạn code bạn dùng.

Bạn cũng thêm một đoạn CSS điều khiển hiển thị code như trên nhưng để chúng đi kèm thẻ pre hoặc code:
pre, code{ color: $textcolor; background: $bgcolor; border: 2px solid $bordercolor; overflow: auto; font: $headerfont; padding: 10px;}
Khi sử dụng trong post chúng ta sẽ đặt code theo một trong hai cách:
<pre>... code ...</pre>
Hoặc:
<code>... code ...</code>
Với cách này người ta có thể dùng hình ảnh đánh số thứ tự làm nền để đoạn code hiển thị trông đẹp hơn. Bạn có thể chép đoạn code sau mà tôi đang dùng cho template của mình.
pre, code { display:block; font: 1em 'Courier New', Fixed, monospace; font-size : 100%; color: #666666; background : #fff url(http://img178.imageshack.us/img178/1307/prepb3.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;}

Khi tìm kiếm bài viết của blog bằng công cụ tìm kiếm có trên thanh công cụ Blogger, hoặc khi chọn một nhãn (label) nào đó để xem các bài đăng cùng nhãn, nếu quan sát kỹ bạn sẽ thấy một thông báo nhỏ hiển thị ngay phía trên kết quả Nếu không thích có thông báo này, mẹo nhỏ sau đây sẽ giúp bạn loại bỏ:

Cách 1: Vô hiệu hóa đoạn mã hiển thị trạng thái. Đăng nhập blog, vào thẻ Layout (Bố cục) | Edit HTML (Chỉnh sửa HTML) và đánh dấu chọn Expand Widget Templates (Mở rộng tiện ích mẫu), tìm và thêm hai thẻ <!-- và --> như sau:



<b:includable id='status-message'><!-- <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'><data:navMessage/></div> </div> </div> </div> <div style='clear: both;'/> </b:if>--></b:includable>

Cách 2: Thêm đoạn CSS sau đây vào bất kỳ vị trí nào giữa <b:skin><![CDATA[/* và ]]></b:skin> trong template của blog:

.status-msg-wrap { display: none;}

Hãy thử hai gợi ý trên biết đâu có hiệu quả đấy

Một trong những cách để bài viết của bạn được nhiều người biết đến chính là việc sử dụng các dịch vụ bookmark và chia sẻ nội dung. Ở Việt Nam, LinkHay và TagVN có lẽ là hai địa chỉ được nhiều người dùng nhất.

Bạn có thể tự chia sẻ bài viết của mình lên các dịch vụ này để tìm kiếm đọc giả.
Đây là code sử dụng cho Blogger. Hãy chọn một trong hai file này để tải về:


File 1: LinkHay và TagVn
File 2: AddThis (*), LinkHay, TagVn và Yahoo! Messenger


Cách chèn vào blog:

Đăng nhập Blogger, vào thẻ Bố cục (Layout) -> Chỉnh sửa HTML (Edit HTML), đánh dấu chọn Mở rộng tiện ích mẫu (Expand widget templates), tìm:

<div class='post-footer'><!-- Dán code ở đây --> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <span class='fn'><data:post.author/></span> </b:if> </span>

Thay <!-- Dán code ở đây --> bằng nội dung của 1 trong 2 tệp tin .txt đã tải về bên trên.

Hình dưới là hiển thị File 2 trên blog:

* AddThis là nút nhúng số 1 trên internet giúp người đọc đánh dấu và chia sẻ nội dung đến tất cả các mạng xã hội thông dụng. Chỉ cần sử dụng 1 nút nhúng này thay vì dùng nút nhúng của từng dịch vụ riêng lẻ.

Vừa ghé xem blog của Khánh tôi tìm thấy một dịch vụ rất hay đó là tạo trang web có thể truy cập bằng điện thoại di động (*) từ một địa chỉ web sẵn có trên internet. Người dùng có thể tạo ra một phiên bản khác của blog dành cho thiết bị di động hoàn toàn miễn phí chỉ với vài thao tác đơn giản. Một tính năng rất hay của dịch vụ chính là cho phép bạn tùy biến địa chỉ theo tên miền riêng.

Để sử dụng được dịch vụ này blog/website của bạn phải có tính năng cung cấp feed giúp công cụ tự động dò tìm. Trong trường hợp khác bắt buộc bạn phải nhập link feed.

Với người dùng blog Yahoo! 360plus có thể tìm thấy link feed bằng cách đăng nhập vào blog ở thực đơn Tùy chọn -> Blog URL. Blog của bạn có thể có 3 URL như trên hình.

hiện nay có rất nhiều loại blog:
1)để đăng kí blog tiếng việt,nhấn vào đây: http://blogtiengviet.net/htsrv/register.php
2)để đăng kí blogger, bạn tạo một tài khoản gmail, sau đó vào https://www.google.com
3)nếu thấy chưa hài lòng với hình nền của hai blog trên bạn vào đây:http://www.hazblog.com/vi/create-your-blog/ chọn một giao diện blog vừa ý
chúc có một khởi đầu tốt đẹp