Hướng dẫn tạo 1 PAGE cho blogspot

[FD BlOg] - Như các bạn đã biết, muốn tạo thêm 1 page cho blogspot ta chỉ có 1 cách duy nhất là tạo thêm 1 bài viết mới. Và lợi dụng điều này, và áp dụng các thủ thuật cũ đã đăng, hôm nay mình sẽ hướng dẫn 1 cách nhỏ để tạo thêm 1 page cho blogspot của bạn. Với thủ thuật này blog bạn sẽ ngày càng giống 1 weblog hơn.

Các bạn có thể xem thử demo minh họa ở đây : http://www.fandung.com/2009/02/contact-me.html

Mô tả chung thủ thuật : thủ thuật này lợi dụng việc tạo thêm 1 bài viết mới để lấy link liên kết cho trang page mà bạn sẽ tạo. Tức là khi xuất bản bài viết mới, ta không cần quan tâm tới nội dung của bài viết này, có thể bạn không cần soạn nội dung của nó cũng đc, ko sao cả. Khi đã có được link, bây giờ ta sẽ tạo 1 widget HTML/Javascript, và soạn nội dung của page vào đó. Tiếp đến ta dùng thủ thuật ẩn bài viết khi truy cập tới link liên kết này, và thêm 1 thủ thuật nữa là chỉ cho phép widget vừa tạo hiển thị khi truy cập tới link liên kết trên.

Như vậy ở thủ thuật này sẽ có 3 bước :
- Bước 1: tạo 1 trang bài viết để lấy link cho page.
- Bước 2: tạo 1 widget HTML/Javascript, và dán nội dung của trang page sẽ được tạo vào.
- Bước 3: tùy chỉnh việc hiển thị bài viết và widget HTML/Javascript.

☼ Bây giờ ta sẽ đi vào từng bước:
I. Bước 1 : tạo 1 trang bài viết để lấy link cho page.
- Vào phần soạn thảo bài viết mới và tạo 1 trang bài viết mới. với nội dung của bài viết để trống, nhãn cũng được để trống, chỉ duy nhất có phần tiêu đề.
- Mẹo : để link của trang page được đẹp, ta nên đặt tên của tiêu đề bài viết này là không dấu, ví dụ như hình minh họa :

- Ví dụ như với tiêu đề của mình minh họa trên ta sẽ có link liên kết của trang page như thế này :
http://www.fandung.com/2009/02/contact-me.html

- Và thêm 1 mẹo thứ 2 ở bước 1 này là : nên chỉnh sửa lại ngày đăng bài viết, để cho bài viết được nằm ở cuối của danh sách các bài đăng. Ví dụ như blog bạn tạo ngày 20/4/2008 thì ta chỉnh lại ngày đăng cho bài viết nằm trong ngày này chẳng hạn. Với mẹo này sẽ làm việc hiển thị bài viết ở trang chủ trở nên khó hơn.

II. Bước 2 : Tạo 1 widget HTML/Javascript và dán nội dung của trang mà bạn muốn tạo.

- Với việc này, bạn sẽ phải soạn thảo code HTML cho trang page ngay trên widget. Code để tạo nên trang này nhất thiết phải là code HTML, ngoài ra có thể kèm theo các code CSS, code Javascript để trang được tạo sẽ đẹp hơn. Việc này tương tự như các thủ thuật khác.

- Lưu ý : widget này phải nằm ở vị trí bên trên (hoặc dưới) phần "Bài đăng trên blog", tức là nó nằm ở cột Main. Như hình minh họa bên dưới:

- Như vậy đã xong bước 2, tiếp tục sang bước 3.

III. Bước 3 : ẩn bài viết và tùy chỉnh việc hiển thị của widget chứa nội dung của trang page.
- Ở bước 3 này ta sẽ có 2 bước nhỏ phải làm : ẩn bài viết khi truy cập tới link liên kết của trang page, và tùy chỉnh để widget chỉ hiển thị khi bạn truy cập tới link liên kết của trang page.

+ b1 : ẩn bài viết khi truy cập tới link liên kết của trang page.

Với bước này, ta sẽ ẩn hoàn toàn phần bài viết và chỉ cho phép hiển thị widget (và các phần còn lại của blog). Khi đó widget hiển thị chính là trang page mà bạn muốn tạo.
Để thực hiện điều này rất đơn giản, bạn chỉ cần thực hiện các bước như bên dưới :
1. Vào bố cục
2. vào chỉnh sửa code HTML
3. Chèn đoạn code CSS bên dưới vào trước dòng code </head>

<style type="text/css">
<b:if cond='data:blog.url == &quot;http://www.fandung.com/2009/02/contact-me.html&quot;'>
#Blog1 {display:none;}
</b:if>
</style>

- Với link màu xanh sẽ là link liên kết của bài viết mà bạn đã tạo để gán cho trang page.
4. Save template.

+ b2: chỉ cho phép widget chứa nội dung hiển thị khi bạn truy cập tới đúng link liên kết của trang page (ví dụ như trong code mẫu sẽ là link : http://www.fandung.com/2009/02/contact-me.html )

Với bước này, trước tiên bạn phải xác định ID của widget chứa nội dung của trang page. Để biết được ID, thực hiện các bước sau :
1. vào phần tử trang
2. Nhấp chọn chỉnh sửa ở widget chứa nội dung của trang page.
3. Và ta sẽ thấy được ID của nó như bên dưới :

- Trong hình minh họa ta thấy ID của nó là HTML8
- Bây giờ ta sang bước chính là chỉ cho widget này hiển thị khi ta truy cập tới link của trang page. Để làm điều này, các bạn thực hiện các bước như bên dưới :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích.
4. Tìm đoạn code của widget chứa nội dung của trang page (nhấn Ctrl + F và điền ID của widget vào là có thể tìm thấy Code của nó)

Và code của nó tương tự như thế này :

<b:widget id='HTML8' locked='false' title='Form contact' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

5. Thêm đoạn code được đánh dấu highlight như bên dưới :

<b:widget id='HTML8' locked='false' title='Form contact' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == &quot;http://www.fandung.com/2009/02/contact-me.html&quot;'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

- Thay link (code màu đỏ) lại thành link liên kết tương ứng với trang page của bạn.

6. Save template.

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

More about →

Làm nổi bật cho bài viết đầu tiên

Hôm nay mình sẽ giới thiệu cho các bạn cách làm nổi bật bài viết đầu tiên. Mình sẽ giới thiệu 2 cách : cách dùng jQuery và không dùng jQuery. 2 cách đều có điểm chung là thêm code CSS cho bài viết đầu tiên để nó khác với các bài khác, và điểm khác biệt giữa 2 cách là 1 cái phức tạp, nặng nề hơn, còn 1 cách thì dễ hiểu, đơn giản hơn. Tuy vậy mình vẫn sẽ giới thiệu cho các bạn cả 2 cách, để các bạn có thêm nhiều thông tin, kiến thức hơn.

Xem demo trên blogspot : DEMO

Hình ảnh minh họa:

A. Cách 1 : dùng Jquery
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin>

.post.first {
background:#efefef url(http://data.fandung.com/img/lastest-post.png) no-repeat top right;
padding:10px;
border:1px solid #ddd;
}

4. Tiếp tục chèn đọan code bên dưới vào trước thẻ đóng </head>

<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
$(document).ready(function(){
$(".post:first").addClas<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
$(document).ready(function(){
$(".post:first").addClass("first");
});
</script>
</b:if>s("first");
});
</script>
</b:if>

Ở đây mình có sử dụng điều kiện b:if để thủ thuật chỉ hiển thị ở ngòai trang chủ, nếu như không có lệnh này, thì khi mở ở trang bất kì nào như : bài viết, trang archive, label … thì bài viết đầu tiên đều được làm nổi bật.

5. Sau cùng là save template lại.

B. Cách 2 : Không dùng jQuery (update)
- Cách này mình sẽ chính lệnh b:if của blogger để chọn bài viết đầu tiên.
- Sau đây là cách thực hiện:

a. Vào bố cục > chỉnh sửa code HTML > nhấp chọn mở rộng mẫu tiện ích. tìm đoạn code này:

<b:include data='post' name='post'/>

b. Thay thế nó bằng đoạn code bên dưới :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<div id='first-post'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

- Với đoạn code trên ta đã dùng div với id là first-post để bao bài viết đầu tiên lại. Nhưng nếu làm tới đây thì ta sẽ chưa thấy được gì, muốn bài viết đầu tiên khác với các bài còn lại thì ta phải thêm code CSS cho nó.
- Code CSS các bạn thêm vào trong code template, trước dòng code ]]></b:skin>, ví dụ như code mẫu bên dưới:

#first-post {
background:#efefef url(http://data.fandung.com/img/lastest-post.png) no-repeat top right;
padding:10px;
border:1px solid #ddd;
}

c. save template lại.

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

Repost from mothuthuat.com
Update from duypham.info

More about →

Hiển thị widget khi xem các bài viết của 1 nhãn nhất định

Bài viết hôm nay mình sẽ giới thiệu cho các bạn việc tùy chỉnh để 1 widget nào đó chỉ được phép hiển thị khi bạn vào xem 1 bài viết của 1 nhãn nào đó. Đây là 1 thủ thuật mà có một số bạn đã có nhờ mình, nhưng khi đó mình chưa trả lời được, nên bây giờ mới cho "ra lò". Mở rộng thủ thuật này ra ta có thể áp dụng cho tác giả của bài viết. Ví dụ tác giả A sẽ hiển thị widget A...

Hình ảnh minh họa :

Khi xem ở 1 trang bài viết
(ở hình minh họa là bài viết thuộc nhãn Love)

Khi xem ở trang chủ

Thủ thuật : các tiện ích được chọn sẽ mặc định được ẩn đi, khi bạn vào xem 1 bài viết nào đó, nếu lệnh lặp nhãn (Label) tìm thấy nhãn đã chỉ định thì tiện ích sẽ được hiển thị.

☼ Các bước thực hiện :
1. Xác định ID của widget cần thực hiện. (các bạn có thể tham khảo cách xem ID ở bài viết này : http://www.fandung.com/2009/09/huong-dan-tao-1-page-cho-blogspot.html)

2. Sau khi đã xác định được ID của widget cần thực hiện, các bạn làm tiếp theo các bước bên dưới :

a. vào bố cục
b. vào chỉnh sửa code HTML
c. chọn mở rộng mẫu tiện ích
d. chèn đoạn code CSS bên dưới vào trước thẻ đóng </head>

<style type='text/css'>
#HTML3 {display:none;}
</style>

- Với HTML3 là ID của widget cần thực hiện.
e. tiếp tục tìm đoạn code tương tự như thế này :

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

f. và thêm đoạn code được đánh dấu highlight như bên dưới :

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:label.name == &quot;love&quot;'>
<style type='text/css'>
#HTML3 {display:block;}
</style>
</b:if>
</b:if>

</b:loop>
</b:if>
</span>

- Với love : chính là nhãn của bài viết muốn hiển thị widget
- HTML3 : là ID của widget.

- Code màu đỏ ở trên chính là để loại bỏ các trang có chứa nhãn muốn thực hiện. Ví dụ như trang chủ, trang archive hoặc trang label có các bài viết có nhãn muốn thực hiện, nếu không có lệnh này thì tiện ích vẫn sẽ hiển thị. Do khi bạn xem các trang này thì các nhãn đã được quét, chỉ cần thấy nhãn muốn thực hiện thì tiện ích sẽ hiển thị ngay.

g. Save template.

* Lưu ý :

- Khuyết điểm của thủ thuật này là cho dù tiện ích được ẩn nhưng nó vẫn sẽ được load, chỉ khi bạn tác động trực tiếp vào trong code của widget thì nó mới không load, còn dùng lệnh display:none; thì nó sẽ vẫn load nhưng chỉ không hiển thị mà thôi.
- Điều thứ 2 nữa là khi dùng cách này thì tiện ích sẽ không hiển thị trong phần Bố cục -> Phần tử trang ở Bảng điều khiển, chính vì thế nếu muốn chỉnh sửa nội dung của nó, bạn phải thực hiển điều này ngay trên giao diện của blog.

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

More about →

Hướng dẫn hiển thị avatar cho comment của Blogger (mở rộng)

[FD BlOg] - Như chúng ta đã biết Blogger đang chuẩn bị kỉ niệm 10 năm ngày blogger ra đời, chính vì thế mà gần đây blogger liên tục tung ra những tiện ích mới cho blogspot. Mới đây nhất là tiện ích hiển thị ảnh avatar cho comment từ các ảnh profile của các tài khoản từ blogger.

Việc hiển thị ảnh avatar này sẽ chỉ cập nhật cho các blog mới được tạo, các blog đã được tạo từ lâu, và qua chỉnh sửa template nhiều (như blog của mình) thì muốn hiển thị avatar cho comment thì các bạn phải chỉnh sửa đôi chút trong code template.

Ở thủ thuật này, ngoài việc chỉnh sửa code để có thể sự dụng chức năng ảnh avatar thì mình còn hướng dẫn thêm cho các bạn tạo avatar mặc định cho comment không có avatar. Do hiện tại tiện ích mà blogger cung cấp chỉ cho phép hiển thị ảnh avatar của các tài khoản blogger, vì thế những comment từ các tài khoảng khác sẽ không hiển thị được ảnh avatar, và avatar mặc định sẽ lấp đầy chỗ thiếu hụt đó.

Và đây là ảnh minh họa avatar cho comment.

☼ Để hiển thi được avatar cho các comment, các bạn thực hiện 2 bước sau:
1. Tùy chỉnh trong phần cài đặt :
- bước này không quan trọng lắm, vì blogger đã mặc định chế độ hiển thị ảnh avatar cho comment rồi, tuy nhiên chúng ta cũng nên kiểm tra lại.
- vào bảng điều khiển
- vào phần cài đặt
- vào phần nhận xét
- ở phần "Hiển thị các hình hồ sơ trên các nhận xét?" nhấp chọn "Có"
- Lưu cài đặt

Ảnh minh họa :

2. Chỉnh sửa trong code template:

- Ở đây mình sẽ dùng 1 cách rất đơn giản để tạo avatar default cho các comment không có avatar, đó chính là việc sử dụng ảnh nền (background), khi các comment có ảnh avatar, ảnh avatar sẽ đè lên hình nền, còn các comment không có avatar thì sẽ hiển thị ảnh nền, và hình nền hiển thị này chính là ảnh avatar thay thế.

☼ Các bước thực hiện :
a. vào phần bố cục
b. vào chỉnh sửa code HTML
c. Chọn mở rộng mẫu tiện ích
d. chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

.avatar-image-container {
background:url(http://farm3.static.flickr.com/2493/3936605180_5f80a4d847_o.gif); width:35px;
height:35px;
}
.avatar-image-container img { border:none;}

e. Tiếp đến tìm đoạn code sau :

<dl id='comments-block'>

f. và thay thế nó bằng đoạn code bên dưới :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

g. tiếp tục tìm đoạn code như bên dưới :

<a expr:name='data:comment.anchorName'/>

h. và thay thế bằng đoạn code bên dưới :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

i. Save template.

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

More about →

[ Yêu cầu ] : Hiển thị bài viết dạng list ở các trang Home, Label, Archive

Theo yêu cầu của bạn Phạm Xuân Tú (xtu08.blogspot.com)

[FD's BlOg] - Mình đã từng giới thiệu với các bạn thủ thuật chỉ hiển thị tiêu đề bài viết ở các trang Home, Label, Archive (xem thêm ở đây), hôm nay mình sẽ giới thiệu 1 cách hiển thị cũng tương tự, nhưng có hơi phức tạp hơn 1 chút. Cũng với dạng hiển thị dạng list, nhưng ở thủ thuật này sẽ bổ xung thêm phần ngày đăng, tác giả, nhãn...

Hình ảnh minh họa :

Đây là ảnh gốc của yêu cầu :

Đây là ảnh ở blog test mà mình đã thực hiện :

Chú ý : đây là thủ thuật tương đối "rối rắm", nếu bạn nào chưa rành thì hãy save template lại trước khi thực hiện, hoặc có thể test trước với blog mới nào đó. Nếu ai đã rành (tức là có thể tự gỡ bỏ nếu ko thích) thì có thể thử ngay trên blog của mình.

☼ Các bước để thực hiện thủ thuật:
A. Thiết lập lại ngày giờ hiển thị của bài đăng
B. Ẩn toàn bộ phần bài viết ở các trang Home, Label, Archive.
C. Thực hiện thủ thuật hiển thị bài viết dạng list.

I. Bước A : Thiết lập lại ngày giờ hiển thị của bài đăng
Để hiển thị được ngày giờ như trong hình demo, các bạn thực hiện các bước sau:
- Vào Cài đặt » Định dạng » tới mục Định dạng dấy thời gian , và điều chỉnh lại như hình minh họa bên dưới :


II. Bước A : Ẩn toàn bộ phần bài viết ở các trang Home, Label, Archive
Phần bài viết bạn sẽ có 3 chỗ phải ẩn, đó là Header bài viết, nội dung bài viết và phần Footer của bài viết.
- Phần Header bài viết : gồm có 2 phần, đó là tiêu đề và phần date-header (ngày đăng bài viết).
- Phần nội dung : chưa nội dung bài viết.
- Phần Footer : gồm ngày đăng, nhãn, tác giả...


Để hoàn thực bước 2 này, các bạn làm theo các bước bên dưới :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display : none;}
.date-header {display : none;}
.post-title {display : none;}
</style>
</b:if>

5. Tiếp tục tìm đoạn code bên dưới :

<data:post.body/>

hoặc có thể là

<p><data:post.body/></p>

và thêm đoạn code được đánh dấu highlight vào như bên dưới :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

- bước 4 là ẩn phần header & footer của bài viết, bước 5 là ẩn nội dung bài viết.
6. Save template.

III. Bước C : Thủ thuật chính
1. Trước tiên ta sẽ tạo header cho phần list này (xem hình minh họa)

- Các bước thực hiện :
a. vào bố cục
b. vào chỉnh sửa code HTML
c. chọn mở rộng mẫu tiện ích
d. tìm đoạn code bên dưới (hoặc tương tự):

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

e. thêm đoạn code được đánh dấu highlight như bên dưới:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<b:if cond='data:blog.pageType != "item"'>
<table style='background:#eee; width:100%'>
<tr>
<td style='width:70%; text-align:center; font-weight:bold;'>Tiêu đề</td>
<td style='width:15%; text-align:center; font-weight:bold;'>Tác Giả</td>
<td style='width:15%; text-align:center; font-weight:bold;'>Ngày đăng</td>
</tr>
</table>
</b:if>

<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

- Khoan Save template, tiếp tục thực hiện sang bước 2.

2. Tạo & trang trí cho list bài viết:
a. Tìm đến đoạn code bên dưới:

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

b. Thêm đoạn code được đánh dấu highlight như bên dưới:

<div class='post-header-line-1'/>

<b:if cond='data:blog.pageType != "item"'>
<table style='border-bottom:1px solid #aaa; width:100%'>
<tr>

<td style='width:70%; font-weight:bold;'>
[<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop> </b:if>
</span>] <a expr:href='data:post.url'><data:post.title/></a>

</td>

<td style='width:15%; font-weight:bold; text-align:center;'>

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
</td>

<td style='width:15%; font-weight:bold; text-align:center;'>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:post.timestamp/>
</b:if>
</span>

</td>

</tr>
</table>
</b:if>

<div class='post-body entry-content'>

- Thay đổi các code màu đỏ ở trên để có độ rộng thích hợp. Lưu ý, các code màu đỏ ở bước 1 và 2 phải bằng nhau để việc hiển thị được hợp lý.
- Save template để hoàn tất bước C này.

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

More about →

[ Yêu cầu ] Tạo banner quảng cáo trượt dọc 2 bên (Với việc ẩn hiện tùy vào độ phân giải của màn hình)

Theo yêu cầu của bạn Ngân (www.blogtruyen.com)

[FD's BlOg] - Chúng ta đã khá quen với banner trượt quảng cáo trượt dọc ở 2 bên của 1 site nào đó. đa phần các banner này được thiết kế nằm sát 2 mép (trái & phải) của 1 website nào đó, và nó luôn trượt theo khi ta di chuyển chuột. Ở bài hướng dẫn này mình sẽ giới thiệu 1 cách hiển thị khác, đó là banner quảng cáo sẽ nằm ở 2 mép trái và phải của màn hình hiển thị, và việc hiển thị của nó sẽ phụ thuộc vào chế độ xem của màn hình.

Xem DEMO
(lưu ý : nếu bạn không thấy banner quảng cáo thì zoom nhỏ lại (Ctrl -) banner sẽ hiển thị, nếu muốn test không hiển thị thì zoom lớn lên (Ctrl +))

Hình ảnh minh họa :

☼ Các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<style type="text/css">
.slideads1 {text-align:left}
.slideads2 {text-align:right}
</style>

4. Save template.
5. Tạo 1 widget HTML/javascript và dán code bên dưới vào:

<div id="divAdLeft" style="position: absolute; width: 110px; float: left; left: 0pt; top: 0.00000103038px;">

<div class="slideads1">
<a href="http://www.fandung.com/"><img src="link banner 1" border="0"></a>
</div>

</div>

<div id="divAdRight" style="position: absolute; width: 120px; float: right; left: 989px; top: 0.00000100252px;">

<td class="slideads2">
<a href="http://www.fandung.com/" target="_blank"><img src="link banner 2" border="0"></a>
</div>

</div>

<script language="JavaScript" src="http://data.fandung.com/js/slide_ads.js"></script>

- để đơn giản các bạn có thể gộp code của bước 3 và 5 vào chung trong bước 5, tức là dán tất cả code của thủ thuật vào widget HTML/javascript.
- Ngoài ra code ở bước 5 ta có thể dán nó thẳng vào trong code template.
- Lưu ý : file JS http://data.fandung.com/js/slide_ads.js luôn phải đặt ở vị trí sau cùng của code thủ thuật. Tức là phải load phần code HTML trước phần code JS.


Ở thủ thuật này, với màn hình có độ phân giải trên 1024px thì banner mới hiển thị. Chi tiết có thể xem trong file slide_ads.js

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

More about →

Modify Form Comment : Bài 9 - Thêm ảnh avatar đại diện cho các comment - (Cập nhật)

[FD's BlOg] - Tiếp tục về loạt bài chỉnh sửa form comment, hôm nay mình sẽ giới thiệu cho các bạn 1 cách nữa để làm cho các bài comment trông bắt mắt hơn. Ở bài thứ 9 này mình sẽ hướng dẫn các bạn chèn avatar đại diện vào các bài comment.

Cập nhật avatar cho tác giả - 22/7/2009
Cập nhật việc hiển thị trên IE - 24/7/2009

Sở dĩ mình nói avatar đại diện là do trong blogger họ cũng phân các icon đại diện cho của những người comment theo 3 loại:
- Nhóm 1: Nặc danh(khách) , Name/URL
- Nhóm 2: các tài khoản từ các trang như : livejournal.com, worldpress, AIM,...
- Nhóm 3: tài khoản blogger

Ở trên có 3 nhóm, nhưng trong bài này mình sẽ mở rộng thành 6 nhóm, nhóm 1 ở trên mình sẽ chia thành 2 nhóm. Ngoài ra sẽ có thêm nhóm các bài comment bị xóa tạm thời, mình cũng sẽ cho nó 1 avatar riêng. Như vậy tổng cộng ta sẽ có 6 avatar đại diện cho 6 nhóm sau:
- Nhóm 1: comment từ khách (Nặc danh)
- Nhóm 2: comment từ Name/URL
- Nhóm 3: comment từ các tài khoản từ các trang như : livejournal.com, worldpress, AIM,...
- Nhóm 4: comment từ các tài khoản từ Blogger
- Nhóm 5: Comment bị xóa tạm thời.
- Nhóm 6: Comment từ tác giả. (cập nhật)

Và đây là kết quả mình đã thực hiện :

Cập nhật thêm avatar cho tác giả bài viết:

☼ Sau đây là các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Chèn đoạn code CSS bên dưới vào trước đoạn code ]]></b:skin>

.comment-body {
border:1px solid #ccc;
padding:10px;
min-height:56px;
height:auto !important;
height:56px;
}
.img-avatar {
border:1px solid #555;
padding:2px;
margin-right:5px;
float:left;
}

- Nếu trong template của bạn đã có sẵn class .comment-body thì các bạn chỉ việc thêm thuộc tính cho nó.
- Chỉ riêng class .img-avatar là bạn phải thêm nguyên cả code vào (do class này chưa có trong code template).
- Đây là code để hiệu chỉnh nội dung của comment.
- Ở trên là code dùng với trường hợp avatar nằm ở bên trái, nếu các bạn muốn nó nằm ở bên phải thì thay dòng code float:left; thành float:right;

- Cập nhật việc hiển thị trên IE - 24/7/2009 : với lệnh min-height:56px; này thì sẽ không có tác dụng trên IE, muốn hiển thị tốt, tức là độ cao của bài comment sẽ tối thiểu là 56px, bạn phải thêm đọan code màu cam ở trên vào.

5. Tiếp tục, xuống phía dưới code template, tìm đoạn code bên dưới:

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>

</dd>

- Thay toàn bộ code được đánh dấu highlight thành đoạn code bên dưới: ( code được đánh dấu highlight bên dưới là code cập nhật thêm avatar cho tác giả bài viết)

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><img class='img-avatar' src='http://farm3.static.flickr.com/2623/3741961677_2c1988f41f_o.gif '/><data:comment.body/></span>

<b:else/>

<b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
<b:if cond='data:comment.author != data:post.author'>
<img class='img-avatar' src='http://farm3.static.flickr.com/2625/3741912407_8fea01c367_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
<b:if cond='data:comment.author == data:post.author'>
<img class='img-avatar' src='http://farm3.static.flickr.com/2666/3744724206_50941fa3cd_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "anon-comment-icon"'>
<b:if cond='data:comment.authorUrl == ""'>
<img class='img-avatar' src='http://farm4.static.flickr.com/3478/3742704518_48e2b5327b_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "anon-comment-icon"'>
<b:if cond='data:comment.authorUrl != ""'>
<img class='img-avatar' src='http://farm4.static.flickr.com/3455/3742704550_8d63e16c90_o.gif'/><data:comment.body/>
</b:if>
</b:if>

<b:if cond='data:comment.authorClass == "openid-comment-icon"'>
<img class='img-avatar' src='http://farm3.static.flickr.com/2596/3741912577_45a3daa143_o.gif'/><data:comment.body/>
</b:if>

</b:if>

6. Save template.

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

More about →

Modify Form Comment : Bài 10 - Tạo màu nền riêng biệt cho các comment

Theo yêu cầu của bạn Tài (roboonline.blogspot.com)

[FD's BlOg] - Thủ thuật này Tài có nhờ mình lâu rồi, trước kia mình có thử qua các cách đơn giản với vài đoạn code nhỏ từ javascript đều không thành công. Hôm nay mình thử nó với jQuery thì lại thành công. Thủ thuật sẽ tạo ra các màu nền riêng cho các bài comment, và sẽ lặp lại 1 cách tuần tự.

Đây là hình ảnh mà mình đã thực hiện ở blog test của mình:

- Như trong hình minh họa, mình sẽ hướng dẫn code theo cách hiển thị 2 màu tuần tự, ví dụ 2 màu #eee và #ccc.

☼ Các bước thực hiện:
1. Vào bố cục
2. vào chỉnh sửa code HTML
3. chèn đoạn Code CSS bên dưới vào trước dòng code ]]></b:skin>

.comment-body.style1 {
background:#eee;
}
.comment-body.style2 {
background:#ccc;
}

4. Chèn tiếp đoạn code Javascript bên dưới vào trước thẻ đóng </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(".comment-body:nth-child(2n+0)").addClass("style1");
$(".comment-body:nth-child(2n+1)").addClass("style2");
});
</script>

5. Save template.

☼ Hướng dẫn cách thêm các màu nền cho việc hiển thị tuần tự:
- Như các bạn đã thấy, ở trên mình hướng dẫn cho các bạn cách hiển thị tuần tự theo 2 màu nền, giờ mình sẽ hướng dẫn thêm vào thành 3, 4 màu tuần tự, tùy theo ý thích của bạn.

Đây là hình ảnh lặp với nhiều màu nền

- Trước hết về code CSS, muốn có bao nhiêu màu sẽ được lặp tuần tự thì bạn sẽ phải có bấy nhiêu class, ví dụ mình sẽ cho lặp 4 màu nền thì code sẽ như bên dưới:

.comment-body.style1 {
background:#eee;
}
.comment-body.style2 {
background:#ccc;
}
.comment-body.style3 {
background:#bbb;
}
.comment-body.style4 {
background:#aaa;
}

- Tiếp theo là tới phần code javascript.
- Các bạn để ý đoạn code màu đỏ ở trên (2n+0, 2n+1) , đây là code xác định các comment để hiển thị màu nền. Nếu bạn muốn lặp nó với 4 màu thì ta sẽ có dãy sau : 4n+0, 4n+1, 4n+2, 4n+3 và 4 đoạn code javascript tương ứng như bên dưới :

$(".comment-body:nth-child(4n+0)").addClass("style1");
$(".comment-body:nth-child(4n+1)").addClass("style2");
$(".comment-body:nth-child(4n+2)").addClass("style3");
$(".comment-body:nth-child(4n+3)").addClass("style4");

Mở rộng ra, bạn có thể thêm các thuộc tính khác vào các class, để tạo nên sự khác biệt rõ ràng, như : màu chữ, font chữ, đường viền, căn lề...

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

More about →

[ Yêu cầu ] : Chống copy và quét khối trong blog (cập nhật)

Theo yêu cầu của bạn Minh Thành

[FD's BlOg] - Thủ thuật này sẽ giúp ích cho 1 số bạn muốn giữ bản quyền về nội dung của blog mình, tránh nội dung bị sao chép đại trà. Bài viết sẽ dùng 2 thủ thuật là ngăn chặn việc dùng chuột phải (right click) và quét khối trên blog.

Có thể xem demo ở đây : http://bl2-fd.blogspot.com/

Hình ảnh minh họa khi bạn dùng chuột phải:

☼ Cách thực hiện:
1. vào bố cục
2. vào chỉnh sửa code HTML
3. chèn đoạn code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>

<!-- code chống quét khối -->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}

function reEnable(){
return true
}

//if IE4+
document.onselectstart=new Function ("return false")

//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}

</script>

<!-- code chống dùng chuột phải -->
<script language='JavaScript'>

var msg="Welcome to BlOg FD";
function disableIE() {if (document.all) {alert(msg);return false;}
}
function disableNS(e) {
if (document.layers||(document.getElementById&amp;&amp;!document.all)) {
if (e.which==2||e.which==3) {alert(msg);return false;}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);document.onmousedown=disableNS;
} else {
document.onmouseup=disableNS;document.oncontextmenu=disableIE;
}
document.oncontextmenu=new Function("alert(msg);return false")

</script>

- Thay đổi lại dòng thông báo (code màu xanh).

4. Save template

☼ Cập nhật : chỉ cấm sao chép ở trang bài viết, hoặc không cho thủ thuật hiển chạy trên trang chủ.
- Chỉ cấm sao chép ở trang bài viết : thủ thuật này xem ra tiện lợi nhất, vì bạn chủ yếu chỉ cấm việc người xem copy nội dung cũng như hình ảnh của bài viết, vì thế ta áp dụng thủ thuật này chỉ ở trang bài viết, như thế sẽ không làm cho người đọc thấy bất tiện. Để thực hiện việc này, bạn chỉ cần thêm đoạn code màu đỏ vào code ở bước 3 :

<b:if cond='data:blog.pageType == "item"'>
{CODE Ở BƯỚC 3}
</b:if>

- Ngoài ra bạn cũng có thể ngăn không cho thủ thuật này có tác dụng ở trang chủ, tức là ở trang chủ ta có thể dùng chuột phải hoặc quét khối 1 cách bình thường. Để thực hiện các bạn cũng làm tương tự như trên :

<b:if cond='data:blog.url != data:blog.homepageUrl'>
{CODE Ở BƯỚC 3}
</b:if>

Nguồn : internet

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

More about →

Tạo các dòng thông báo kiểu gõ văn bản

[FD's BlOg] - Thông thường khi không muốn cho 1 đoạn văn bản nào đó chỉ hiển thị trên 1 dòng hoặc 1 khu vực nhỏ nào đó, ta thường dùng hiệu ứng chạy chữ để hiển thị nó. Với việc này các đoạn văn bản đó sẽ không chiếm nhiều không gian trong blog của bạn. Hôm nay mình sẽ giới thiệu 1 kiểu hiển thị khác, đó là kiểu hiển thị tương tự khi ta đánh văn bản.

Xem demo ở đây: LIVE DEMO

Hình minh họa :

☼ Sau đây là code của thủ thuật:
- Để thực hiện, bạn chỉ tạo 1 widget HTML/Javascript và việc dán toàn bộ code bên dưới vào :

<script language="JavaScript1.2">
var ts_line=new Array()
var ts_link=new Array()
ts_line[1]="Chào mừng các bạn đến với BlOg thủ thuật - BlOg FD"
ts_line[2]="BlOg được thành lập với niềm đam mê của bản thân về thế giới mạng"
ts_line[3]="Với tinh thần giúp đỡ, cùng nhau phát triển cộng đồng Blogger ở Việt Nam"
ts_line[4]="BlOg FD sẵn sàng giúp đỡ các bạn trong việc thiết kế, chỉnh sửa blog"
ts_line[5]="Với hơn 200 thủ thuật cho blogspot, từ dễ đến khó"
ts_line[6]="Và những hướng dẫn rất cụ thể và chi tiết"
ts_line[7]="Hy vọng BlOg FD sẽ là địa điểm dừng chân cho các Blogger Việt"
ts_line[8]="WELCOME TO BlOg FD"

var ts_fontcolor="#FB6B01" // màu chữ
var ts_fontsize="10pt" //kích thước chữ
var ts_fontweight="normal" // độ đậm
var ts_fontfamily="Verdana" // font chữ
var ts_bgcolor="transparent" // màu nền
var ts_bordercolor="#cccccc" //màu của đường viền
var ts_bordersize="1px" //độ rộng của đường viền
var ts_borderstyle="solid" // style của đường viền
var ts_padding="5px" // căn lề
var ts_width="200px" // độ rộng của khung hiển thị
var ts_height="100px" // chiều cao của khung hiển thị
var ts_delay="3000" // thời gian giãn cách hiển thị các đoạn văn bản
var ts_speed="35" // tốc độ typing (tốc độ hiển thị các từ)
var ts_linespread="1.2"
var ts_rand=0

<!--

/*
Typing Scroller
Submitted by bengaliboy00@hotmail.com (hp: http://www.angelfire.com/nt/bengaliboy/)
With modifications by Dynamicdrive.com
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/


//--Don't edit below this line

var longestmessage=1
for (i=2;i<ts_line.length;i++){
if (!ts_line[i] ) {ts_line[i] = ''; ts_link[i] = '#';}
if (ts_line[i].length>ts_line[longestmessage].length)
longestmessage=i
}


//Auto set scroller width
var tscroller_width=ts_line[longestmessage].length

lines=ts_line.length-1 //--Number of lines

counter123 = 0;
temp=""
nextchar=-1;

var shown = new Array();
for (i = 1; i <= lines; i++ ) {
shown[i] = 0;
}

function checkshown() {
var num = 0;
for (i = 1; i<= lines; i++){
if (shown[i]) num++;
}

if ((num > (lines - 2))||(lines < 2)) {

for (i = 1; i <= lines; i++ ) {
shown[i] = 0;
}
}

return;

}

if (ts_rand == 1) {
checkshown();
do{
nextline=Math.floor(Math.random() * (lines + 1)); //1;
} while (shown[nextline] != 0);
shown[nextline] = 1;
} else {
nextline = 1;
}

cursor="\\"

//if IE 4+ or NS6
if (document.all||document.getElementById){
document.write('<table style="width: '+ts_width+'; height: '+ts_height+';">')

document.write('<tr><td')
document.write(' style=" cursor:hand; background-color: '+ts_bgcolor+'; color: '+ts_fontcolor+'; font-family: '+ts_fontfamily+'; font-size: '+ts_fontsize+'; font-weight:'+ts_fontweight+'; border-color: '+ts_bordercolor+'; border-style: '+ts_borderstyle+'; border-width: '+ts_bordersize+'; padding: '+ts_padding+'; width: '+ts_width+'; height: '+ts_height+'; text-align:left; vertical-align:top; " onfocus="blur()" ')
document.write('<a onclick="document.location=this.href;" id="banner_xyz_scroller" ')
document.write(' style="line-height: '+ts_linespread+'; color: '+ts_fontcolor+'; font-family: '+ts_fontfamily+'; font-size: '+ts_fontsize+'; font-weight:'+ts_fontweight+'; " ')
document.write (' href="javascript: void(0);"></a>')
document.write('</td></tr></table>')
}
var scroller = document.getElementById("banner_xyz_scroller");

function animate(){

if (temp==ts_line[nextline] & temp.length==ts_line[nextline].length & nextline!=lines){
if (ts_link[nextline]) {
//scroller.href="index.php?option=com_content&task=view&id="+ ts_link[nextline];
scroller.href="http://luyenthianhvan.org";
}

if (ts_rand == 1) {
checkshown();
do {
nextline = Math.floor(Math.random() * (lines + 1)); //nextline++;
}while (shown[nextline] != 0);
shown[nextline] = 1;
} else {
nextline++;
}

nextchar=-1;

scroller.innerHTML=temp;

temp="";
setTimeout("nextstep()",ts_delay)}
else if (nextline==lines & temp==ts_line[nextline] & temp.length==ts_line[nextline].length){
if (ts_link[nextline]) {
//scroller.href="index.php&id="+ ts_link[nextline];
scroller.href="http://luyenthianhvan.org";
}

if (ts_rand == 1) {
checkshown();
do{
nextline= Math.floor(Math.random() * (lines + 1)); //1;
}while (shown[nextline] != 0);
shown[nextline] = 1;
} else {
nextline = 1;
}

nextchar=-1;
scroller.innerHTML=temp;

temp="";
setTimeout("nextstep()",ts_delay)}
else{
nextstep()}}

function nextstep(){

if (cursor=="\\"){
cursor="|"}
else if (cursor=="|"){
cursor="/"}
else if (cursor=="/"){
cursor="-"}
else if (cursor=="-"){
cursor="\\"
}


nextchar++;
temp+=ts_line[nextline].charAt(nextchar);


scroller.innerHTML=temp+cursor
setTimeout("animate()",ts_speed)}

//if IE 4+ or NS6
if (document.all||document.getElementById)
window.onload=animate
// -->
</script>

- ts_line[1], ts_line[2], ... là các đoạn văn bản sẽ hiển thị. Nếu bạn không muốn nó hiển thị nhiều lần thì gộp chung tất cả lại thành 1.
- Hãy dựa vào các code chú thích màu xanh để chỉnh sửa cho khung hiển thị. Có thể xóa các code chú thích màu xanh này đi khi thực hiện.

Nguồn : dynamicdrive.com

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

More about →

[ Yêu cầu ] : Tạo bài trắc nghiệm đơn giản cho blog

Theo yêu cầu của bạn Hoàng Long

[FD's BlOg] - Bài viết này sẽ hướng dẫn các bạn tạo các bài trắc nghiệm đơn giản cho blogspot, với việc trắc nghiệm và check kết quả trực tiếp trên blog.

Tham khảo từ blog : luyenthianhvan.org
Xem demo : LIVE DEMO

Mặc định thủ thuật này sẽ chỉ có 4 đáp án (A, B, C, D ) cho 1 câu hỏi. Để đồng nhất thì ta nên để mặc định như vậy, tức là các câu hỏi có số đáp án để chọn là giống nhau, như thế ta có thể dùng cho nhiều bài trắc nghiệm khác nhau. Tuy nhiên bạn cũng có thể thêm hoặc bớt số đáp án (tùy chỉnh trong file Javascript : trac-nghiem.js)

Hình ảnh minh họa :

Sau khi chọn xong nhấp vào button "Show Answers" và sẽ nhận được hộp thoại thông báo số câu trả lời đúng của bạn:



Và các đáp án đúng sẽ là các đáp án màu đỏ (sau khi đã nhấp chọn xem kết quả)


☼ Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào sau thẻ <head> hoặc trước thẻ </head> :

<script language="javascript" src="http://data.fandung.com/blog/demo/trac-nghiem/trac-nghiem.js"></script>

4. Save template.

Lưu ý: trong file JS trên, chỉ cho phép trắc nghiệm dưới 20 câu, nếu nhiều hơn 20 câu thì nó sẽ chỉ test được tới câu 20, muốn thêm số câu hỏi thì bạn phải thêm các đoạn code tương tự vào file JS ở trên.
- Muốn thêm thành 30 câu hoặc 40 câu thì các bạn làm như sau :
+ dùng NotePad mở file trac-nghiem.js lên, cuối đoạn code của file bạn sẽ thấy dòng code này :

oElement = document.getElementById("choice20A");
if (oElement) {
Total=Total+1
document.getElementById("choice20A").disabled=true;

if ((document.getElementById("choice20A").value==document.getElementById("text20").value)&&(document.getElementById("choice20A").checked)) correct=correct+1;

document.getElementById("choice20B").disabled=true;

if ((document.getElementById("choice20B").value==document.getElementById("text20").value)&&(document.getElementById("choice20B").checked)) correct=correct+1;

document.getElementById("choice20C").disabled=true;

if ((document.getElementById("choice20C").value==document.getElementById("text20").value)&&(document.getElementById("choice20C").checked)) correct=correct+1;

document.getElementById("choice20D").disabled=true;

if ((document.getElementById("choice20D").value==document.getElementById("text20").value)&&(document.getElementById("choice20D").checked)) correct=correct+1;

if ((document.getElementById("choice20A").value==document.getElementById("text20").value)) document.getElementById("C20A").style.color='red';

if ((document.getElementById("choice20B").value==document.getElementById("text20").value)) document.getElementById("C20B").style.color='red';

if ((document.getElementById("choice20C").value==document.getElementById("text20").value)) document.getElementById("C20C").style.color='red';

if ((document.getElementById("choice20D").value==document.getElementById("text20").value)) document.getElementById("C20D").style.color='red';
}

+ dòng code trên là để kiểm tra câu hỏi số 20, bây giờ nếu bạn muốn thêm thành 21 câu hoặc 22 câu thì các bạn thêm đoạn code tương tự như trên vào ngày sau đoạn code của câu 20, và sửa số 20 thành 21, 22,... 30, ..., ...40,... mỗi câu là 1 đoạn. Như thế ta sẽ có 1 thư viện test cho tới câu 30 hoặc 40 tùy theo bạn thêm vào.
+ Không phải ta thêm trong file JS tới câu 40 là bắt buộc ở phần bài trắc nghiệm cũng phải 40 câu hỏi, bao nhiêu câu trong bài test đều được, nhưng phải nhỏ hơn số câu trong thư viện file trac-nghiem.js .

- Một điều lưu ý nữa là : host 110mb.com của mình sắp hết bandwith (hiện tại đã hơn 50%) vì thế cho chắc ăn các bạn nên download file trac-nghiem.js về và up lên host riêng của mình.

5. Sau khi thực hiện xong các bước ở trên , bạn vào phần soạn thảo bài viết và dán code bên dưới vào để thực hiện 1 bài trắc nghiệm :

1. Câu hỏi 1.
<input style="visibility: hidden; width: 1px;" value="D" id="text1">
<input id="choice1A" value="A" name="choice1" type="radio"><label id="C1A">(A) Đáp án A</label>
<input id="choice1B" value="B" name="choice1" type="radio"><label id="C1B">(B) Đáp án B</label>
<input id="choice1C" value="C" name="choice1" type="radio"><label id="C1C">(C) Đáp án C </label>
<input id="choice1D" value="D" name="choice1" type="radio"><label id="C1D">(D) Đáp án D</label>

2. Câu hỏi 2.
<input style="visibility: hidden; width: 1px;" value="A" id="text2"><br>
<input id="choice2A" value="A" name="choice2" type="radio"><label id="C2A">(A) Đáp án A</label>
<input id="choice2B" value="B" name="choice2" type="radio"><label id="C2B">(B) Đáp án B</label>
<input id="choice2C" value="C" name="choice2" type="radio"><label id="C2C">(C) Đáp án C</label>
<input id="choice2D" value="D" name="choice2" type="radio"><label id="C2D">(D) Đáp án D</label>

3. Câu hỏi 3.
<input style="visibility: hidden; width: 1px;" value="B" id="text3"><br>
<input id="choice3A" value="A" name="choice3" type="radio"><label id="C3A">(A) Đáp án A</label>
<input id="choice3B" value="B" name="choice3" type="radio"><label id="C3B">(B) Đáp án B</label>
<input id="choice3C" value="C" name="choice3" type="radio"><label id="C3C">(C) Đáp án C</label>
<input id="choice3D" value="D" name="choice3" type="radio"><label id="C3D">(D) Đáp án D</label>

4. Câu hỏi 4.
<input style="visibility: hidden; width: 1px;" value="A" id="text4"><br>
<input id="choice4A" value="A" name="choice4" type="radio"><label id="C4A">(A) Đáp án A</label>
<input id="choice4B" value="B" name="choice4" type="radio"><label id="C4B">(B) Đáp án B</label>
<input id="choice4C" value="C" name="choice4" type="radio"><label id="C4C">(C) Đáp án C</label>
<input id="choice4D" value="D" name="choice4" type="radio"><label id="C4D">(D) Đáp án D</label>

5. Câu hỏi 5.
<input style="visibility: hidden; width: 1px;" value="B" id="text5"><br>
<input id="choice5A" value="A" name="choice5" type="radio"><label id="C5A">(A) Đáp án A</label>
<input id="choice5B" value="B" name="choice5" type="radio"><label id="C5B">(B) Đáp án B</label>
<input id="choice5C" value="C" name="choice5" type="radio"><label id="C5C">(C) Đáp án C</label>
<input id="choice5D" value="D" name="choice5" type="radio"><label id="C5D">(D) Đáp án D</label>

<input language="javascript" id="button1" onclick="button1_onclick();" value="Xem kết quả" name="button1" type="button">

- Chú ý : các code màu đỏ chính là code xác định đáp án đúng cho câu hỏi đó.
- Trên đó mình chỉ đưa ra 5 câu, muốn thêm vào nữa thì các bạn cứ thêm các code tương tự như bên dưới :

6. Câu hỏi 6.
<input style="visibility: hidden; width: 1px;" value="B" id="text6"><br>
<input id="choice6A" value="A" name="choice6" type="radio"><label id="C6A">(A) Đáp án A</label>
<input id="choice6B" value="B" name="choice6" type="radio"><label id="C6B">(B) Đáp án B</label>
<input id="choice6C" value="C" name="choice6" type="radio"><label id="C6C">(C) Đáp án C</label>
<input id="choice6D" value="D" name="choice6" type="radio"><label id="C6D">(D) Đáp án D</label>

- Chú ý code màu xanh, thay đổi nó tuần tự theo câu các câu mà bạn thêm vào.

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

More about →