Chủ Nhật

TẠO NÚT ĐỌC TIẾP CHO BLOG (NÚT READ MORE)

Những ai đang dùng chức năng Read More (đọc thêm) mặc định của Blogger sẽ nhận ra là nó không được đẹp cho lắm, vì vậy trong bài này Noct sẽ hướng dẫn cách tùy biến sao cho trông bắt mắt hơn.

Demo

Đăng nhập vào phần dashboard >> thiết kế >> chỉnh sửa HTML >> đánh dấu chọn mở rộng mẫu tiện ích. Tìm dòng sau:

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

</div>

</b:if>

Thay thế toàn bộ đoạn ở trên bằng:

<b:if cond='data:post.hasJumpLink'>

<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Đọc tiếp</a><b:else/>

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

<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Đọc tiếp</a>

</b:if></b:if><div class='clear'/>

ĐỌC TIẾP,,,...

tùy biến comments sao cho đẹp

ngồn bài viết
Trong quá trình chăm chút cho blogspot, một admin bao giờ cũng muốn cho phần nhận xét trên blog của mình thật đẹp. Tuy nhiên để thỏa ước muốn đó thì cũng không phải dễ dàng gì nếu admin không hiểu tường tận về hệ thống nhận xét của Blogger.

Phần nhận xét của một blogspot được đặt nằm gọn trong id có tên là #commentschứa các id và class khác, trong đó có hai id chính là #comments-block và#comment-form. Bạn không nên nhầm mà đồng nhất #comment-form với #comments bởi vì #comment-form là một bộ phận của #comments mà thôi. Tôi sẽ đề cập đến phần #comments-block trong một bài viết khác, trong phạm vi bài này, chỉ xin giải quyết vấn đề làm sao để có một Comment Form cho đẹp.

Dưới đây là phân tích cấu trúc một Comment Form cơ bản chưa được chỉnh sửa gì nhiều.

Như các bạn thấy thì id #comment-form chứa 2 id khác quan trọng gồm #comment-post-message (dòng thông báo Đăng một nhận xét) và #comment-editor (khung nhập nhận xét). Để hiểu sâu hơn, chúng ta tiếp tục phân tích phần XML trong Template của Comment Form.

Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa comment-form tìm đến đoạn code như bên dưới.

<b:includable id='comment-form' var='post'>
<div id='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>

Chú ý trên đoạn code trên, đối với một số Template thì bạn sẽ thấy thẻ <div class='comment-form'>, thay vì là thẻ <div id='comment-form'>.

Nào, chúng ta bắt đầu tùy biến bằng CSS nhé.

1. Nếu bạn muốn tùy biến dòng thông báo Đăng một nhận xét thì bạn đặt CSS như sau.

#comment-post-message {
float:left;
font-size:14px;
font-family:Arial;
font-weight:bold;
border:1px solid #fc5604;
color: #0000ff;
text-case:sentence;
}

Chú ý text-transform:uppercase đặt chữ viết HOA, còn text-case:sentence đặt chữ viết Hoa chữ cái đầu.
Nếu bạn rành về CSS thì có thể tùy ý điều chỉnh theo ý muốn.
Nếu bạn muốn id này float về giữa thì đặt float:center;
Nếu muốn ẩn quách nó đi thì đặt thêm display:none !important;
Còn nếu muốn xóa luôn nó đi thì (trong Template) xóa dòng <h4 id='comment-post-message'><data:postCommentMsg/></h4>
Nếu muốn thay đổi dòng Đăng một nhận xét thì thay <data:postCommentMsg/> bằng câu gì đó bạn muốn.

2. Nếu để ý phần #comment-editor bạn sẽ thấy bề ngang nó cách xa biên bên phải của phần Main và bề dọc nó cách xa phần #blog-pager làm cho nó trông rất xấu xí, vì chừa đất trống rất nhiều mà chẳng biết “trồng” cái gì vào đấy. Để cắt phần đất thừa đó đi thì bạn tùy biến CSS cho phần #comment-editor như sau.

#comment-editor{
width:580px;
height:240px;
padding-left:10px;
}

Ở đây bạn chỉnh các thông số về chiều rộng (width) sao cho không quá bề rộng phần Main, chiều cao (height) sao cho tương xứng và padding-left phù hợp với trang của bạn.

3. Ngoài ra bạn có thể tùy biến CSS cho cả id #comment-form như sau.

#comment-form {
background: ;
}
#comment-form p {
………
}

Bạn có thể đặt nền (background) cho phần Comment Form và thêm CSS khác vào đoạn code trên.

Đối với Template có thẻ <div class='comment-form'> thì thay #comment-form bằng.comment-form

Và còn nhiều thứ khác nữa có thể tùy biến xung quanh Comment Form, hy vọng có thể cập nhật tiếp trong thời gian tới.

Miễn phí key bản quyền 1 năm phần mềm Kaspersky Internet Security 2010(cho cac member)

Cách đổi giao diện của Kaspersky Security Suite CBE 10 từ giao diện của Computer Bild sang giao diện của Kaspersky Lab:
Lưu ý: Cách chuyển đổi giao diện này dựa trên nền của Kaspersky Security Suite CBE 10 đã được chuyển đổi giao diện sang Tiếng Việt (Xem chi tiết ở trên)
Trước tiên, các bạn cần phải download bản vá giao diện của Kaspersky Lab cho Kaspersky Internet Security 2010 tại Mediafire – Mật khẩu: afublog.com

Giải nén tập tin mà các bạn vừa download về

Sau khi chuyển đổi giao diện của Kaspersky Security Suite CBE 10 từ Tiếng Đức sang Tiếng Việt, các bạn hãy nhấp chuột phải vào biểu tượng của Kaspersky Security Suite CBE 10 trong vùng Notification Area Icons (vùng có chứa đồng hồ)

Chọn Cấu hình

Chọn thẻ Giao diện

Tại Giao diện, các bạn hãy tick chuột vào ô Sử dụng giao diện thay thế rồi sau đó nhấp chuột vào nútDuyệt…

Tại bảng Chọn thư mục, các bạn hãy tìm đến vị trí có chứa thư mục Skin nằm trong thư mục mà các bạn vừa giải nén ở bước 2 rồi sau đó nhấp chuột vào nút OK

Tiếp tục nhấp chuột vào nút OK để hoàn tất quá trình thay đổi giao diện

OK! Giao diện đã được chuyển đổi!

THAY FAVICON CHO BLOGSPOT NHƯ THẾ NÀO?

Vấn đề này xưa nhưng không thừa vì còn khá nhiều bạn hỏi Vnblogspot về việc này. Để các bạn không phải mắc công mày mò trên Google, mà đôi khi lại làm không được, gây mất thời gian vì nhiều trang chưa làm nhưng cứ chia sẻ thủ thuật thì Vnblogspot xin chia sẻ lại một cách đổi favicon nhanh và hoàn toàn chính xác.

Favicon là gì?

Chính là cái hình icon nho nhỏ nằm trên các tab của trình duyệt. Icon này giúp người dùng phân biệt tab nào là của trang nào một cách nhanh chóng.
Chọn tab thiết kế

Favicon của Vnblogspot

Việc chọn một favicon tốt sẽ giúp blog của các bạn nhanh chóng được người dùng nhận ra trong hàng loạt các tabs của các trang khác. Đây cũng là một điểm nhấn cho thương hiệu của bạn.
Hãy thiết kế favicon này sao cho nó có chứa hình ảnh logo trang web và có mối liên hệ với chủ đề chính trên Blog của bạn.

Thay favicon

Bạn tìm trong template của bạn đoạn code sau:

]]></b:skin>

Chèn dưới đoạn code này đoạn code như sau:

<link href='http://vnblogspot.com/images/favicon.icon' rel='shortcut icon' type='image/x-icon'/>

Bạn hãy thay đoạn code màu đỏ bằng URL dẫn đến icon của bạn (đã upload lên đâu đó như Picasa chẳng hạn). Độ phân giải tốt nhất là 16x16, đuôi file tốt nhất là .ico các bạn nhé.
Vnblogspot chúc blog các bạn thật nổi bật!

Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến

Như đã đề cập đến trong bài đăng trước, nếu hiểu được những đoạn mã của widget do Blogger cung cấp chúng ta hoàn toàn có thể tùy biến theo ý mình. PopularPosts là 1 widget được Blogger đưa vào dùng thử nghiệm gần đây và được nhiều người đón nhận, đây là widget cho biết những bài đăng phổ biến được nhiều người đọc. Ngoài 3 dạng thống kê: 7 ngày qua, 30 ngày qua và mọi lúc nó có 4 kiểu hiển thị là: chỉ mình tiêu đề bài đăng, tiêu đề bài đăng và đoạn trích dẫn, tiêu đề bài đăng và hình ảnh, tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Thủ thuật sau đây sẽ hiển thị PopularPosts với tiêu đề bài đăng và hình ảnh, còn đoạn trích dẫn sẽ hiển thị khi đưa chuột vào tiêu đề.

Để làm được vậy chúng ta quan tâm tới đoạn mã của kiểu hiển thị thứ 4. Hãy chắc chắn trên blog của bạn đã có widget PopularPosts này, đánh dấu vào lựa chọn kèm theo hình ảnh thu nhỏ và trích đoạn. Kiểu thống kê thì tùy bạn chọn 1 trong 3 kiểu: 7 ngày qua, 30 ngày qua hay mọi lúc. Lưu thiết lập và chọn tải template về máy để tiến hành chỉnh sửa (bạn có thể chỉnh trực tiếp trên Blogger nhưng sẽ dễ dàng hơn nếu dùng một trình text editor chuyên nghiệp, ngoài ra thì việc chỉnh trên Blogger sẽ gây lỗi font với blog Tiếng Việt).

Mở template và tìm với từ khóa PopularPosts1. Trong đoạn mã của widget này có 4 đoạn mà Blogger đã chú thích: , , , . Trong khuôn khổ thủ thuật của bài đăng này chúng ta quan tâm đến đoạn thứ 4, đó là nơi chứa mã của kiểu hiển thị tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Dưới đây là đoạn mã chúng ta cần quan tâm:

Chú thích:
data:post.thumbnail: Địa chỉ của ảnh thứ nhất trong bài đăng được Blogger resize (thay s72-c vào đường dẫn).
data:thumbnailSize: Kích thước ảnh mà Blogger resize, là ảnh hình vuông nên bao gồm luôn cả chiều cao và chiều rộng.
data:post.href: Địa chỉ của bài đăng.
data:post.title: Tiêu đề của bài đăng.
data:post.snippet: Đoạn trích dẫn của bài đăng.

Hoạt động của đoạn mã này:
Đầu tiên sẽ xem xem có địa chỉ ảnh cho bài đăng phổ biến này hay không qua lệnh diều kiện . Nếu đúng, một thẻ div với thành phần bên trong là thẻ img chứa địa chỉ ảnh có liên kết tới địa chỉ của bài đăng được xuất hiện, bài đăng nào không có ảnh thì bỏ qua. Tiếp theo sau đó là 2 thẻ div lần lượt chứa tiêu đề bài đăng có liên kết tới địa chỉ của bài đăng và đoạn trích dẫn .

Bây giờ chúng ta sẽ sửa lại đoạn mã này theo hướng hiển thị tiêu đề bài đăng với title là đoạn trích dẫn và hình ảnh với kích thước tùy chọn, loại bỏ đi liên kết tới địa chỉ của bài đăng khi click vào ảnh, thêm thuộc tính alt là tiêu đề bài đăng cho ảnh này. Một vấn đề nữa là khi dùng trình duyệt từ IE7 trở về trước thì tiêu đề bài đăng bị thụt xuống một đoạn so với ảnh.

Để hiển thị tốt trên phiên bản trình duyệt này chúng ta đưa hình ảnh và tiêu đề bài đăng vào cùng 1 thẻ div. Đoạn mã trên được viết lại như sau:

Lưu lại và tải template lên Blogger.

BẠN CẦN CHÈN CODE VÀO BÀI VIẾT HOẶC COMMENT?

Để chèn code vào bài viết hoặc comment, Vnblogspot xin giới thiệu với các bạn tiện ích Code Escape. Vnblogspot rất thích dùng tiện ích này vì chỉ cần copy và paste. Thật đẹp, thật tiện lợi mà lại rất nhàn!

1. Thêm CSS

Nếu bạn chỉ muốn chèn code vào comment thì không cần đọc phần này.
Còn nếu muốn chèn code vào bài viết thì cần thêm một ít CSS để code đẹp hơn. Đối với Blogspot thì bạn mở trình soạn thảo template và tìm đoạn mã sau:

]]></b:skin>

Xong bạn chèn đoạn mã dưới đây lên trên đoạn vừa tìm được:

pre {
    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;
}

2. Sử dụng Code Escape

Mỗi khi bạn cần chèn code, hãy copy toàn bộ đoạn code đó dán vào khung dưới đây. Rồi bấm "CONVERT".

Copy đoạn mã trong khung dưới đây để chèn vào bài viết
Hoặc copy đoạn dưới đây để chèn vào commment.

chèn video vào blogger

nguồn bài viết

Điểm mạnh của blog là tính tương tác giữa người viết và người đọc. Những dẫn chứng dạng chữ chưa đủ tính thuyết phục thì người đọc còn muốn chèn thêm ảnh, video hoặc nhạc. Ở diễn đàn thì việc chèn ảnh, video hay nhạc được thực hiện dễ dàng với BB code, còn Blogger chỉ hỗ trợ 3 thẻ HTML là <b>, <i> và <a> - điều đó chưa đủ làm thỏa mãn bạn? Bài viết này sẽ giúp bạn làm việc đó dễ dàng cho khung comment của Blogger.

Ảnh được chèn từ link direct còn video và nhạc thì từ Youtube và Nhaccuatui dựa vào link trên thanh địa chỉ. Code để chèn cụ thể:

Chèn ảnh:

Link ảnh là http://domain.com/image.png thì code chèn sẽ là
```
[img]http://domain.com/image.png[/img]
```
Chèn video từ Youtube:

Link video là http://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=related thì code chèn sẽ là
```
[youtube]http://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=related[/youtube]
```
Link video là http://youtu.be/0nbY7Mg_vMI thì code chèn sẽ là
```
[youtube]http://youtu.be/0nbY7Mg_vMI[/youtube]
```
Chèn nhạc từ Nhaccuatui:

Link nhạc là http://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmt thì code chèn sẽ là
```
[nct]http://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmt[/nct]
```
Link nhạc là http://www.nhaccuatui.com/nghe?M=B_6M7IcZTz thì code chèn sẽ là
```
[nct]http://www.nhaccuatui.com/nghe?M=B_6M7IcZTz[/nct]
```

DEMO

Bước 1: Mở template và chèn đoạn mã dưới đây trước thẻ </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:578px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' frameborder='0' allowfullscreen ");
theText = theText.replace(/\[\/youtube\]/gi, "></iframe>");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?L=/gi, "<div style='overflow:hidden'><embed style='margin-top:-250px;width:300px;height:400px' src='http://www.nhaccuatui.com/l/");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?M=/gi, "<div style='overflow:hidden'><embed style='margin-top:-350px;width:300px;height:400px' src='http://www.nhaccuatui.com/m/");
theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed></div>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Bước 2: Tìm thẻ <b:loop values='data:post.comments' var='comment'> và thêm trước nó thẻ <div id='multimedia'>. Tìm thẻ đóng</b:loop> và thêm sau nó thẻ </div>

GIỚI HẠN MỘT SỐ BÀI KHI HIỂN THỊ TRÊN TRANG NHÃN

(Huynh Nhat Ha's Blog) -- Đối với mỗi nhãn (Label), Blogger thiết lập mặc định là 20 bài viết khi liên kết nhãn được click. Tuy nhiên, nếu tất cả 20 bài viết đều hiển thị trên một trang nhãn thì trang web trông rất dài, làm cho blog của bạn thiếu cân đối. Chúng ta có thể can thiệp để mỗi trang nhãn gồm 5, 10, 15… bài viết bằng tham số max-results.

Lấy ví dụ, nhãn Label1 có URL là:http://tenblogcuaban.blogspot.com/search/label/Label1.

Để hiển thị 10 bài viết cho trang Label1, thì tạo URL như sau:http://tenblogcuaban.blogspot.com/search/label/Label1?max-results=10.

Liên kết đến trang nhãn trong blogspot có 2 vị trí, một ở cuối bài viết (post footer), một ở tiện ích Label.

1. Để giới hạn 10 bài viết cho tất cả các trang nhãn cho liên kết nhãn ở cuối bài viết, ta làm như sau:

Trong chế độ chỉnh sửa Template và chọn Mở rộng mẫu tiện ích, tìm các dòng <a expr:href='data:label.url' rel='tag'>
và đổi chúng thành <a expr:href='data:label.url + "?max-results=10"' rel='tag'>

2. Để giới hạn 10 bài viết cho tất cả các trang nhãn cho liên kết nhãn ở tiện ích Label, ta làm như sau:

Tìm các dòng <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
và đổi chúng thành <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=10"'>

Sau đó Lưu Template.

Pages

Chủ Nhật

TẠO NÚT ĐỌC TIẾP CHO BLOG (NÚT READ MORE)

tùy biến comments sao cho đẹp

Miễn phí key bản quyền 1 năm phần mềm Kaspersky Internet Security 2010(cho cac member)