Hướng dẫn tạo widget "Bài viết hot" (Hot Pots)cho blogspot

Đây là ý tưởng mình vừa nghĩ ra, và liền post ngay lên cho mọi người, và hình như chưa có ai làm nó bao giờ. Hy vọng mình là người đầu tiên hướng dẫn cho mọi người. Thủ thuật này mình sẽ lợi dụng việc sử dụng các nhãn bài viết để tạo 1 widget các bài viết hot cho blog của bạn. Tất nhiên các bài viết hot này đều phải được các bạn tự chọn lọc và đưa nó vào 1 nhãn riêng. Và lưu ý là top bài viết hot ở đây là hot về nội dung chứ không phải hot về số người đọc hay số người comment.


Nghe tới đây có vẻ như thủ thuật không có gì mới lạ, giống như ta tạo 1 widget các bài viết có nhãn là Hot và cho hiển thị lên blog mà thôi. Nhưng ở bài viết này mình sẽ hướng dẫn các bạn 1 thủ thuật đơn giản để người đọc không biết widget Hot Posts đựơc trích xuất ra từ 1 nhãn.
Ví dụ ta có 1 lọat các bài viết đã đăng rồi, và có 1 số bài hot, bây giờ ta chỉ cần lọc lại chúng, và add thêm cho nó 1 nhãn, ví dụ ta đặt tên nhãn đó là hot. Và sau này nếu có bài viết mới có nội dung hot thì các bạn chỉ việc add thêm nhãn này.
Sau khi ta có 1 lọat các bài với nhãn là hot, bây giờ ta sẽ làm ẩn nhãn hot này ở footer của bài viết. Tức là khi người đọc xem ở trang chủ thì sẽ không biết bài nào sẽ thuộc nhãn hot. Khi đó tiện ích Hot Posts sẽ mang một cái nhìn mới.

Ví dụ như hình minh họa bên dưới :

Trước khi thực hiệc việc ẩn nhãn hot

Sau khi thực hiệc việc ẩn nhãn hot

Bây giờ ta sẽ thực việc ẩn nhãn này ở footer của bài viết:
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 đọan code như bên dưới :

<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>

5. Thay nó bằng đọan code bên dưới :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != "hot"'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:if>
</b:loop>

- Chú ý dòng code này :

<b:if cond='data:label.name != "hot"'>

- đây là đọan code để làm ẩn nhãn hot . Nếu nhãn hot này bạn đặt với 1 cái tên khác thì thay đổi nó lại cho phù hợp.

6. Save template.
- Như vậy ta đã thực hiện xong việc ẩn nhãn.

Có thể xem demo ở đây: DEMO

Để làm được điều này, các bạn thực hiện các bước như sau :
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 thẻ đóng </head> hoặc sau dòng code ]]></b:skin>

<style type='text/css'>
#hotposts {
width:510px;
padding:5px;
text-align:center;
font-weight:bold;
}
<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>
#Blog1 {display:none;}
</b:if>
</style>

- các bạn nhớ thay link trong dòng code bên dưới cho đúng với link label chứa các bài viết hot của bạn :

<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>

4. Tiếp tục xuống bên dưới tìm dòng code này (hoặc tương tự). Dòng code này là thẻ div chứa nội dung của phần main của blog. Sở dĩ mình nói tương tự là vì có thể 1 số blog sẽ không có dòng code này.

<div id='main-wrapper'>

5. thêm vào sau nó đọan code bên dưới :

<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>
<div id='hotposts'>
No post in this label. Go back to <a href='http://m2t-homepage.blogspot.com/'>HomePage</a>
</div>
</b:if>

- Lưu ý link của label nhãn hot trong bước 4 và 5 phải giống nhau.
- Ngòai ra các bạn có thể thay đổi lại nội dung dòng thông báo nếu như bạn muốn.
6. Save template.

Và cuối cùng ta chỉ việc chèn tiện ích recent posts theo Nhãn hot vào blog là ta đã có 1 widget "bài viết Hot" cho blog rồi.
Các thủ thuật về tiện ích "recent post theo nhãn" mình đã đăng nhiều rồi, các bạn có thể search ngay trên blog để tìm hiểu thêm.

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

More about →

Hiển thị ngày đăng cho các bài viết xuất bản cùng ngày

Như các bạn đã biết, ở blogger, khi ta xem các trang như trang Home, Label, Archive thì ngày đăng bài viết (date-header) chỉ được hiển thị với bài viết mới nhất của ngày đó, còn các bài viết cũ hơn trong ngày đó sẽ không được hiển thị. Dưới đây mình sẽ hướng dẫn 1 cách để hiển thị ngày đăng ở các bài khác cùng ngày.

Đây là thủ thuật khá đơn giản, các bạn chỉ cần thực hiện các bước 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 bên dưới :

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

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

<b:if cond='data:post.dateHeader'>
<script>var sameDay = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(sameDay);</script>
</h2>
</b:if>

6. Save template.

Thủ thuật tham khảo từ blog : blogspottutorial.com

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

More about →

Hiệu ứng thay đổi tiêu đề cho blog theo thời gian

Theo yêu cầu của bạn TOBU

Đôi khi các tiêu đề blog của bạn quá dài và nó không thể hiển thị được hoàn toàn trên thanh Navigation của trình duyệt web. Để khắc phục điều này ta có thể thay thế bằng các tiêu đề ngắn gọn, xúc tích. Hoặc cũng có thể tạo hiệu ứng chạy chữ cho các tiêu đề dài (cách này khá phổ biến). Hôm nay mình sẽ giới thiệu cách khác để khắc phục điều này. Đó là hiệu ứng thay đổi tiêu đề bài viết theo thời gian.

Thủ thuật này mình không có kèm hình minh họa, các bạn có thể xem demo ở đây : http://www.thuthuatpc.info/

Để thực hiện thủ thuật này, chúng ta chỉ cần chèn 1 đoạn script nhỏ vào trong code template là xong. Bên dưới 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 Javascript bên dưới vào trước thẻ đóng </head>

<script language='javascript'>
step=0
function flash_title(){
step++
if (step==6) {step=1}
if (step==1) {document.title='BlOg FD - Tips For Blogger'}
if (step==2) {document.title='Thủ thuật blogspot cho người Việt'}
if (step==3) {document.title='Hãy truy cập vào weblog:'}
if (step==4) {document.title='www.fandung.com'}
if (step==5) {document.title='Mọi thắc măc của các bạn sẽ được giải đáp'}
setTimeout("flash_title()",700);}
flash_title()
</script>

- Thay đổi các code màu xanh thành các tiêu đề mà bạn muốn hiển thị.
- if (step==6) {step=1} :đây là đoạn code để quay về vòng lặp. nếu bạn có 10 tiêu đề, thì sửa nó lại thành if (step==11) {step=1}
- setTimeout("flash_title()",700);} : đây là code điều chỉnh thời gian giãn cách giữa 2 tiêu đề (đơn vị là ms)
4. Save template.

Tham khảo thủ thuật từ website : thuthuatpc.info

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

More about →

Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng

Theo yêu cầu của 1vn.biz

[FD's BlOg] - Trước kia mình cũng đã giới thiệu việc chèn ảnh của tác giả vào trước mỗi tiêu đề bài viết, và thủ thuật hôm nay cũng dùng 1 cách tương tự.
Thủ thuật này đã được 1 bạn bên 1vn.biz yêu cầu mình từ khá lâu, nay mới trả lời được. Nhân đây mình cũng gửi lời cáo lỗi tới bạn 1vn.biz cũng như những bạn khác đã yêu cầu mình nhưng chưa nhận được phản hồi.

Trước khi đi vào thủ thuật, mình xin lưu ý là thủ thuật này chỉ sử dụng thích hợp cho các bài viết trong blog có 1 nhãn, vì ở đây mình sự dụng việc nhận diện nhãn, khi đúng nhãn đã mặc định thì sẽ hiển thị 1 ảnh tương ứng. Nếu 1 bài viết có nhiều nhãn thì việc hiển thị ảnh này sẽ ko được hợp lý (sẽ xuất hiện nhiều ảnh cùng 1 lúc).

Hình ảnh minh họa kết quả:

☼ 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 này vào trước dòng code ]]></b:skin>

.post-icon img {
height:20px; /*có thể tùy chỉnh lại chiều cao này (hoặc xóa nó đi) tùy theo kích thước của ảnh bạn muốn hiển thị */
float:left;
margin-right:8px;
}

5. Tiếp tục tìm đến đoạn code này :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

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

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == &quot;Label 1&quot;'>
<img src='Link ảnh 1'/>
</b:if>

<b:if cond='data:label.name == &quot;Label 2&quot;'>
<img src='Link ảnh 2'/>
</b:if>

</b:loop>
</b:if>
</div>

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

- Thay tên nhãn và link ảnh icon cho thích hợp.
- Nếu có nhiều nhãn thì các bạn cứ thêm đoạn code tương tự như bên dưới vào trước dòng </b:loop> :

<b:if cond='data:label.name == &quot;Label 3&quot;'>
<img src='Link ảnh 3'/>
</b:if>

<b:if cond='data:label.name == &quot;Label 4&quot;'>
<img src='Link ảnh 4'/>
</b:if>

7. Save template.

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

More about →

Ẩn phần comment cho 1 bài viết nhất định

[FD's BlOg] - Với thủ thuật đơn giản này ta sẽ ẩn toàn bộ phần comment cho 1 bài viết nhất định nào đó. Tức là sẽ không cho phép hiển thị hay post comment. Thích hợp cho các bạn tạo thêm các trang từ bài viết cho blog. Thủ thuật này cũng là thủ thuật yêu cầu của 1 blogger đã nhờ mình qua yahoo.

Khi bạn muốn tạo 1 trang nào đó cho blog, ta chỉ có thể tạo từ việc soạn thảo thêm 1 bài viết mới. Tức là biến 1 bài viết thành 1 trang cho blog. Ví dụ khi bạn muốn tạo 1 trang nào đó, để cho trang này trông pro hơn, các bạn có thể lược bỏ các phần như : tiêu đề, label, comment, footer của bài viết... nó chung chỉ giữ lại phần nội dung của bài viết, khi đó nội dung của bài viết chính là nội dung của page đó. Ví dụ tạo trang contact, khi lược bỏ hết các phần đó, ta sẽ chỉ còn lại form liên hệ.

Đó là 1 số giới thiệu nhỏ cho việc tạo các trang cho blog. Bây giờ ta sẽ vào phần chính của thủ thuật này.

Hình ảnh minh họa :

Trang đã ẩn phần comment

Trang khác

☼ Để thực hiện các bạn thực hiện các bước quen thuộc bên dưới :
1. vào bố cục
2. vào chỉnh sửa code HTML
3. Thêm đoạn code bên dưới vào sau dòng code ]]></b:skin>

<style type='text/css'>

<b:if cond='data:blog.url == "Link bài viết"'>
#comments {display:none;}
</b:if>

</style>

Nếu muốn ẩn phần comment cho nhiều bài khác nhau thì bạn dùng code như bên dưới :

<style type='text/css'>

<b:if cond='data:blog.url == "Link bài viết 1"'>
<b:if cond='data:blog.url == "Link bài viết 2"'>
#comments {display:none;}
</b:if>
</b:if>

</style>

Đối với các template đã qua convert (chỉnh chỉnh sửa lại), có thể id của phần comment không phải là comments, vì thế nếu code template của bạn nào ko có id này thì hãy xác định lại cho đúng id của phần comment.

4. Save template.

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

More about →

Mẹo nhỏ cho việc loại bỏ khoảng trống khi ẩn phần date-header (ngày đăng)

[FD's BlOg] - Đây là 1 thủ thuật nhỏ thích hợp cho các bạn tự chỉnh sửa template cho blog từ những template mà blogger cung cấp sẵn. date-header là phần hiển thị ngày đăng của bài viết ở ngay trên tiêu đề bài viết, trước kia mình có giới thiệu thủ thuật làm ẩn nó đi, tuy nhiên khi nó ẩn đi vẫn để lại 1 khoảng trống nhỏ ở phía trên tiêu đề bài viết. Ở bài này mình sẽ hướng dẫn các bạn loại bỏ nó đi.

Thông thường, ở trang chủ (homepage) thì phần date-header chỉ hiển thị ở ngay trên bài viết mới nhất trong ngày đó, còn trong trang bài viết thì nó luôn hiển thị ở phía trên tiêu đề bài viết.


Trước kia mình có giới thiệu cách ẩn nó là dùng lệnh display:none; để làm ẩn nó, như code bên dưới :

h2.date-header {
font-weight:bold;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
color:#F00;
display: none;

Và ta có kết quả như bên dưới:


Tuy nhiên dùng cách này để làm ẩn nó đi thì sẽ tạo ra 1 khoảng trống nhỏ, các bạn so sánh hình trên với hình bên dưới này sẽ rõ.

Khoảng trống này sẽ làm cho việc hiển thị bài viết ở trang chủ không được đồng nhất. Ví dụ như thủ thuật "Hiển thị bài viết ngoài trang chủ giống Bo-blog (dạng list)" (các bạn có thể xem thủ thuật này ở đây), thủ thuật này mình giới thiệu cách modify lại việc hiển thị các bài viết ở trang chủ, lần trước khi test ở blogtest của mình, mình không thấy được khoảng trống của phần date-header tạo ra, nên thủ thuật chưa hoàn chỉnh (có các khoảng trống giữa các list), vì thế các bạn có thể sử dụng thủ thuật ở bài viết này để khắc phục cho khuyết điểm đó.

☼ Để thực hiện điều này, các bạn chỉ cần thực hiện vài thao tác đơn giản 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 đến đoạn code của phần date-header , nó sẽ tương tự như bên dưới :

<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>

5. Để loại bỏ khoảng trống do nó gây ra, cách đơn giản là loại bỏ nó đi, có 2 cách loại bỏ, 1 là bạn thêm đoạn code để biến nó thành đoạn text chú thích, 2 là xóa hẳn code của nó đi, ở đây mình sẽ dùng cách 1, cách này an toàn hơn (có thể khôi phục lại được). Để thực hiện các bạn chỉ việc thêm đoạn code màu đỏ vào code của phần date-header như bên dưới:

<!--
<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>
-->

6. Save template.

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

More about →

Modify Form Comment : Bài 12 - Một cách đơn giản để trang trí cho khung comment

[FD's BlOg] - Trước kia mình có hướng dẫn các bạn 1 thủ thuật trang trí khung comment với việc sử dụng CSS là chủ yếu, và thủ thuật có vẻ hơi phức tạp, và phục thuộc nhiều vào code của template. Hôm nay mình sẽ hướng dẫn 1 cách đơn giản hơn nhiều, đó là chèn thêm 1 thẻ div lên trên phần nội dung bài viết. Đây là thủ thuật mà mình đang dùng để trang trí cho nội dung các bài comment.

Bài viết này sẽ thiêng về phần hướng dẫn hơn là 1 bài thủ thuật hoàn chỉnh, tức là không chỉ với thao tác "copy paste" code là bạn có thể thực hiện thủ thuật. Để hoàn thiện và phù hợp với blog của bạn thì bạn cần phải bỏ 1 chút thời gian.

Ví dụ hình ảnh minh họa ở blog của mình :

Thủ thuật chính ở đây là ghép nối các hình nền của các thẻ div để tạo nên 1 hình nền hoàn chỉnh. Ví dụ như ở blog của mình, phần thẻ div chèn thêm lên trên phần nội dung comment (comment-body) sẽ có hình nền ko hoàn chỉnh, và ở phần nội dung bài viết thì dùng hình nền và các đường border, nhưng sẽ ko có đường border-top, sự thiếu hụt này sẽ được thẻ div mà ta thêm vào khắc phục.

Xem hình minh họa:

Ở hình minh họa các bạn sẽ thấy khi ra phần ráp lại ta sẽ được 1 khung hình trang trí hoàn chỉnh.

☼ Các bước thực hiện: (mình sẽ hướng dẫn như hình demo)
1. Đầu tiên ta sẽ tạo các đường viền & màu nề cho nội dung comment.

- Hình minh họa:

Khi chưa thực hiện:

Sau khu thực hiện :

Ở hình 2, nếu để ý các bạn sẽ thấy ko có đường border-top.

- Để thực hiện các bạn vào trong code template, tìm đoạn code CSS như bên dưới, lưu ý, (đối với 1 số template được convert lại thì code có thể khác)

.comment-body {
margin:0;
padding:5px;
}

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

.comment-body {
margin:0;
padding:5px;
background:#eee;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}

- Sau khi hoàn tất hãy nhớ save template lại.
2. Tạo 1 thẻ div rỗng với hình nền tương ứng với nền của nội dung comment.
- ví dụ như trong hình demo mình sử dụng hình bên dưới :


- Để dễ hình dung các bạn có thể hiểu là hình nền của thẻ div sẽ được thêm vào là đường border-top mà khung chứa nội dung comment còn thiếu, chỉ có khác là đường border-top là 1 đường thẳng đơn thuần, còn hình nền của thẻ div này có hơi cầu kì một chút.
- Cái chính ở bước này là bạn hãy tạo cho mình một hình nền thật phù hợp với khung của comment. Lưu ý tới độ rộng của khung comment để thiết kế hình nền cho khớp và hợp lý nhất.
- Để thực hiện bước 2 này, các bạn làm theo các bước như 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. tìm đoạn code như bên dưới :

<dd class='comment-body'>

e. thêm vào trước nó đoạn code bên dưới:

<div style='height:8px; background:url(link ảnh nền) no-repeat;'/>

- với 8px là chiều cao của hình nền mà bạn đã thiết kế.
f. save template.

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

More about →

Trang trí các widget

[FD's BlOg] - Bài viết này mình sẽ hướg dẫn các bạn trang trí khung cho cách widget ở sidebar. Với 1 chút code CSS là bạn hoàn toàn có thể thực hiện được.
Ở bài này mình sẽ giới thiệu mẫu, để hiển thị tốt nhất trên blog của mình, các bạn phải chỉnh sửa 1 chút về ảnh nền của widget.

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 CSS bên dưới vào trước dòng ]]></b:skin>

.widget_01_title
{
background: url(http://news.zing.vn/news/images/title_01.gif) no-repeat;
height: 26px;
}
.widget_01_title h5
{
color: #FFF;
padding: 4px 0 0 15px;
}
.widget_02_title h5
{
padding: 4px 0 0 15px;
}
.widget_02_title h5 a
{
color: #FFF;
}
.widget_01_content
{
width: 288px;
background: url(http://news.zing.vn/news/images/box_rep_01.gif) repeat-x left bottom;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}


.widget_02_title
{
background: url(http://news.zing.vn/news/images/title_02.gif) no-repeat #f3e5ff;
height: 26px;
}

.widget_02_content
{
width: 288px;
background: #f3e5ff;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}

4. Save template

- Nên download các ảnh nền về và chỉnh sửa kích thước lại cho hợp lý với blog của bạn.

- Về độ rộng của các class chưa nội dung widget, các bạn cũng tùy chỉnh lại so với ảnh nền đã thay đổi, như trong code mẫu, ảnh nền có kích thước là 300px, thì độ rộng của class widget_02_content sẽ là 288px = 300px - 2*5px - 2*1px.

5. Và đây là code để trang trí cho widget, (tạo 1 widget HTML/javascript) và dán code bên dưới vào :

<!-- style 1 -->
<div class="widget_01_title">
<h5><a href="#"> Tiêu đề widget (style 1)</a></h5>
</div>

<div class="widget_01_content">
Nội dung widget
</div>

<!-- Style 2 -->
<div class="widget_02_title">
<h5><a href="#"> Tiêu đề widget (style 2)</a></h5>
</div>

<div class="widget_02_content">
Nội dung widget
</div>

Với bước 5 là áp dụng cho các widget HTML không có tiêu đề (tức là tiêu đề của widget dược tạo ngay trong nội dung của widget), trường hợp các widget HTML/javascript có tiêu đề, thì các bạn có thể vào code template để chỉnh sửa hoặc xóa tiêu đề của nó đi và tạo thẳng trong nội dung của widget.

☼ Hướng dẫn chỉnh sửa ngay trong code template (chú ý, cách này nên áp dụng cho các widget có tiêu đề):
- Vào bố cục
- vào chỉnh sửa code HTML
- Nhấp chọn mở rộng mẫu tiện ích
- tìm tới đoạn code của widget mà bạn muốn trang trí, ví dụ như mình có code bên dưới :

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

- chỉnh sửa lại code trên như bên dưới :

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>

<div class="widget_01_title">
<h5><data:title/></h5>
</div>

</b:if>
<div class='widget_01_content'>
<data:content/>
</div>

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

- Save template.

Tham khảo source từ news.zing.vn

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

More about →

1 Sript đổi màu background khá hay

[FD's BlOg] - Bài này mình sẽ giới thiệu cho các bạn 1 đoạn script nhỏ làm thay đổi màu nền của blog. Với đoạn script này, màu nền sẽ tự động thay đổi 1 cách tuần tự sau 1 khoảng thời gian mà chúng ta đã định trước.

Xem demo : LIVE DEMO


Để tạo nên hiệu hứng đổi màu cho đẹp và liên tục, các bạn sẽ tạo 1 mảng các trị màu thay đổi 1 cách tuần tự.

Để thực hiện thủ thuật này, các bạn chỉ cần chèn đoạn code JS bên dưới vào trước thẻ đóng </head> hoặc sau thẻ mở <head>

<script type="text/javascript">
var c = new Array("00", "11", "22", "33", "44", "55",
"66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "FF");


x = 0;


function bg_eff()
{
col_val = "#56" + c[x] +"00";
document.bgColor=col_val;
x++;
if (x == 16)
{
clearInterval(change_bg);
}
}


change_bg = setInterval("bg_eff()", 300);
</script>

- Các code màu xanh : 16 là số phần tử của mảng, 300 là thời gian delay giữa các lần đổi màu
- Chú ý đoạn code này : col_val = "#56" + c[x] +"00"; : đây là code tạo trị màu nền theo các phần tử trong mảng c , ví dụ khi x = 2 ta sẽ có màu nền là #562200.
- Ngoài ra bạn có thể chỉnh đoạn code trên lại như thế này : col_val = "#5600" + c[x] ; tức là trị màu sẽ thay đổi ở 2 bit cuối. ví dụ khi x=2 ta sẽ có màu nền là #560022

- Nếu muốn màu thay đổi nhiều hơn nưa thì các bạn cứ việc thêm phần tử vào mảng c. Ví dụ ta có 20 màu sẽ được thay đổi như bên dưới:

<script type="text/javascript">
var c = new Array("00", "10", "15", "20", "25", "30",
"35", "40", "45", "50","55", "60", "65", "70", "75", "80", "85", "90", "95", "AA");

x = 0;

function bg_eff()
{
col_val = "#56" + c[x] +"00";
document.bgColor=col_val;
x++;
if (x == 20)
{
clearInterval(change_bg);
}
}

change_bg = setInterval("bg_eff()", 300);
</script>

- Hãy tạo cho mình 1 list màu để việc thay đổi trong cho đẹp mắt.

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

More about →

Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung

[FD's BlOg] - Tiếp theo bài "Chèn tiện ích vào header" ở bài này mình lại sử dụng lệnh position để tạo bóng đổ cho ảnh hoặc cho các khối văn bản. Làm cho ảnh hoặc vùng văn bản đó trở nên bắt mắt hơn. Thủ thuật để tạo bóng đổ trong bài này là ta sẽ tạo các background nằm dè lên nhau, và lệch nhau vài pixel, như thế sẽ tạo nên hiệu ứng bóng đổ.

Ví dụ ở đây mình sẽ dùng 3 class để tạo bóng. Class đầu tiên sẽ là màu nền chính, các class tiếp theo sẽ có màu nền nhạt dần vào lệch với class đầu tiên.

Ví dụ ta có đoạn code CSS và HTML sau :

//Code CSS
<style type="text/css">
.shade1{
width:136px;
height:105px;
background-color:#e8e8e8;
}
.shade2{
position:relative;
width:136px;
height:105px;
background-color:#cbcbcb;
top:-3px;
left:-3px;
}
.shade3{
position:relative;
width:136px;
height:105px;
background-color:#a0a0a0;
top:-2px;
left:-2px;
}


</style>
//Code HTML
<div class="shade1">
<div class="shade2">
<div class="shade3">
Test for shadow - FD's BlOg
</div>
</div>
</div>

Kết quả hiển thị:

- Chú ý các code màu xanh, nếu ta thay đổi nó thành như bên dưới :

top:-6px;
left:-6px;
..
..
top:-5px;
left:-5px;

Ta sẽ có kết quả như sau:

- Nếu ta tăng giá trị trong các đoạn code màu xanh lên ta sẽ thấy rõ được thủ thuật.
- Để lớp màu của lớp bóng đổ này liên tục, bạn có thể tạo thêm nhiều class khác như shade4, shade5, ...
- Ngoài ra bạn có thể chọn hướng đổ bóng khác như:
+ Top, right :

top:-6px;
right:-6px;
..
..
top:-5px;
right:-5px;

ta sẽ có kết quả :

+ bottom, right :

bottom:-6px;
right:-6px;
..
..
bottom:-5px;
right:-5px;

ta sẽ có kết quả :

+ bottom, left :

bottom:-6px;
left:-6px;
..
..
bottom:-5px;
left:-5px;

ta sẽ có kết quả :


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

More about →

Một ứng dụng của lệnh position : Chèn tiện ích vào banner (Header)

[FD's BlOg] - Lệnh position là 1 lệnh có lẽ là lạ với nhiều người, do nó ít được sử dụng thường xuyên. Phần lớn ta thường dùng lệnh padding hoặc margin để tùy chỉnh vị trí của khối. Hôm nay mình sẽ giới thiệu cho các bạn một ứng dụng của lệnh position, để tùy chỉnh việc hiển thị của nó trên nền 1 div khác.

Ở thủ thuật này ta sẽ sử dụng thuộc tính relative của lệnh position, trong đó ta dùng thêm các lệnh top, left, right, bottom để điều chỉnh vị trí hiển thị.

Xem hình minh họa thủ thuật:

Khi chưa dùng lệnh position thì các div sẽ hiển thị như bên dưới:

Thông thường khi kết thúc 1 thẻ div thì nó sẽ tự động xuống hàng, tức là các thẻ div sẽ được xếp theo tứ tự từ trên xuống.

- Để xác định vị trí của 1 thẻ div, các bạn có dùng 4 cặp lệnh sau để xác định vị trí cho nó :

+ left, top : căn theo góc trái trên. ví dụ thẻ div được đặt ở vị trí cách lề trên 30px; lề trái 30px; thì ta có code sau :

#div1 {
position:relative;
top:30px;
left:30px;
}

+ left, bottom : căn theo góc trái dưới. ví dụ thẻ div được đặt ở vị trí cách lề dưới 30px; lề trái 30px; thì ta có code sau :

#div1 {
position:relative;
bottom:30px;
left:30px;
}

+ tương tự với các cặp (right,top) và (right,bottom) ta cũng thực hiện tương tự.
+ Lưu ý ta có thể dùng giá trị âm để xác định vị trí cho nó, ví dụ như hình minh họa trên, khi ta căn lề trên cho thẻ div3 giá trị là : top:-25px; thì ta sẽ được kết quả như bên dưới:

- Nếu ta có nhiều thẻ div, và được căn với với các giá trị như nhau thì các thẻ div này sẽ không bị trùng lên nhau, mà sẽ xếp tuần tự nhau từ trên xuống. Ví dụ như hình bên dưới mình thực hiện:

- Các thẻ div2 và div3 đều được xác định vị trí như nhau (top:30px; , left:350px;) , khi ta thay đổi vị trí cho div3 là top:50px; left:300px; thì ta sẽ có kết quả như bên dưới:


Và sau đây là kết quả mà mình đã test cho header của blog test của mình :

Ban đầu khi chưa áp dụng thủ thuật:

Sau khi ẩn phần Header có sẵn của blog, và thêm các thành phần mới vào thì mình có được kết quả như bên dưới :

Đây là kết quả mình thêm box search vào header :

☼ Và sau đây để cụ thể mình sẽ hướng dẫn cho các bạn cách chèn Box search vào Header :(lưu ý, thủ thuật này mình hướng dẫn theo các template mà blogger cung cấp, nếu bạn nào xài template convert thì làm tương tự)
1. Bước 1 là làm ẩn Header có sẵn của blog :
- Vào bố cụ
- Vào chỉnh sửa code HTML
- Thêm các đoạn code màu đỏ vào code CSS của phần Header và code CSS của phần chứa header (header-wrapper):

#header-wrapper {
height:150px;
...
...
...
}

#header {
display:none;
...
...
...
}

- độ rộng (150px;)của phần header bạn có thể tùy chỉnh lại.

2. bước 2 : chèn box search vào header:
- tiếp tục ở bước trên, tạo 1 code css cho phần chứa box seach.
- Dán đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

#box-search {
position:relative;
top:80px;
left:380px;
}

- tùy chỉnh lại code màu đỏ để box search có 1 vị trí thích hợp nhất trên header.
- Tiếp tục xuống dưới tìm đoạn code sau:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='FD's BlOg (Header)' type='Header'/>
</b:section>

</div>

- Thêm đoạn code bên dưới vào ngay sau dòng </b:section> ở đoạn code tìm được:

<div id='box-search'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<table border='0' cellpadding='0'>
<tbody><tr><td>
<center><input maxlength='255' name='q' size='25' style='width: 141px;' type='text' value=''/><input type='submit' value='Tìm Kiếm'/></center></td></tr>
<tr>
<td align='left' style='font-size: 100%;'>
<input checked='checked' name='sitesearch' type='checkbox' value='fandung.blogspot.com'/>Tìm kiếm trên FD's BlOg</td>
</tr>
</tbody>
</table>
</form>
</div>

- Thay code màu đỏ lại thành địa chỉ URL của blog bạn.
- Tùy chỉnh lại code màu xanh theo ý bạn.

3. Cuối cùng, save template lại.

Khi chèn box search này, ngoài việc hiển thị ở ngoài layout, nó còn hiển thị ở ngay trong phần "Phần tử trang", như hình bên dưới:


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

More about →

Modify Form Comment : Bài 11 - Gắn Tem cho bài comment đầu tiên

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

[FD's BlOg] - Tương tự thủ thuật trước, thủ thuật "Tạo màu nền riêng biệt cho các comment", hôm nay mình tiếp tục giới thiệu cho các bạn thủ thuật "Gắn tem cho bài comment đầu tiên" của mỗi bài viết. Ở bài này mình cũng dùng jQuery để chọn tag, nhưng khác với bài trước, ở bài này mình sẽ chỉ chọn 1 tag đó là tag đầu tiên.

Có 1 điểm mình chưa khắc phục được, đó là tạm thời 2 thủ thuật ở bài 10 và bài 11 chưa thể sử dụng chung được. Tức là không thể áp dụng cùng 1 lúc 2 thủ thuật này. Sau này mình sẽ khắc phục sau.

Đây là hình ảnh minh họa kết quả mình đã thực hiện:

☼ 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 CSS bên dưới vào trước dòng code ]]></b:skin>

.comment-body.first {
background:url(http://farm3.static.flickr.com/2589/3761562886_8357d61da8_o.gif) no-repeat right top;
}

4. Tiếp tục chèn đoạn code javascript bên dưới vào sau dòng code ]]></b:skin>

<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:first").addClass("first");
});
</script>

- Lưu ý : đối với 1 số template, class chứa các bài comment không phải là comment-body vì thế các bạn hãy thay đổi tên của các class chứa các comment lại cho thích hợp, khi đó thủ thuật mới hiển thị được.

5. Save template.

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

More about →

[ Yêu cầu ] : Giới hạn việc xem blog cho trình duyệt IE

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

[FD's BlOg] - Theo yêu cầu của bạn Ngân, bài này sẽ hướng dẫn 2 việc : 1 là ngăn không cho các User dùng trình duyệt IE phiên bản 6 trở xuống, 2 là hiện 1 bảng thông báo nhỏ yêu cầu các user này phải sử dụng các trình duyệt khác như FireFox, chrome,... hoặc yêu cầu nâng cấp IE lên phiên bản mới để xem được blog.

Hình ảnh minh họa kết quả thực hiện :

Khi dùng trình duyệt khác IE , cụ thể là FireFox

Khi dùng trình duyệt IE6

Cơ bản của thủ thuật này là ta điều chỉnh việc hiển thị các ID cho từng trình duyệt, khi ở các trình duyệt khác IE hoặc IE với các phiên bản lớn hơn 6 thì ta sẽ xem được blog bình thường, và bảng thông báo được ẩn đi. Khi dùng trình duyệt nhỏ hơn hoặc bằng IE6 thì phần nội dung blog sẽ bị ẩn và thay vào đó là bảng thông báo sẽ được hiển thị (như trong hình mà mình đã minh họa)

☼ 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 CSS bên dưới vào trước dòng code ]]></b:skin>

#noticeIE6 {
width:500px;
background:#eee url(http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/07/23/10/76591248319987.gif) no-repeat top;
border:2px solid #ccc;
padding:100px 10px 10px 10px;
font-size:15px;
display:none;
}

- đây chính là ID chứa nội dung của bảng thông báo.
- Có thể tùy chỉnh lại các thuộc tính của ID này.
- Lưu ý đoạn code display:none; code này là để mặc định cho bảng thông báo luôn luôn được ẩn.

4. tiếp tục chèn đoạn code bên dưới vào sau dòng code ]]></b:skin>

<!--[if lt IE 7]>
<style type='text/css'>
#noticeIE6 {display:block;}

#lessIE6 {display:none;}
</style>
<![endif]-->

- trong đoạn code ở bước 4 này ta thấy có 2 ID với việc hiển thị trái ngược nhau. ID noticeIE6 chính là ID chứa nội dung của bảng thông báo, ID lessIE6 chính là ID để ẩn nội dung blog với trình duyệt bé hơn IE7.
- Mình sẽ giải thích thêm về ý nghĩa của đoạn code màu xanh ở trên:

+ Đoạn code màu xanh ở trên có nghĩa là nếu trình duyệt hiện hành là trình duyệt IE với các phiên bản nhỏ hơn 7 thì các lệnh bên trong nó sẽ được thực thi.
+ Ngoài ra ta còn có các lệnh khác như :
- if IE 7 : trình duyệt là IE 7
- if gt IE 7 : trình duyệt IE với các phiên bản lớn hơn 7
- if gte IE 7 : trình duyệt IE với các phiên bản lớn hơn hoặc bằng 7
- if lt IE 7 : trình duyệt IE với các phiên bản bé hơn 7
- if lte IE 7 : trình duyệt IE với các phiên bản bé hơn hoặc bằng 7

5. Tiếp tục tìm đến thẻ <body> và thêm các đoạn code được đánh dấu highlight và code màu đỏ vào như bên dưới:

...
...
<body>
<center>
<div id='noticeIE6'>
{Nội dung của bảng thông báo}
</div>
</center>

<div id='lessIE6'>
...
...
...
</div>

</body>
</html>

- với code Highlight là code của bảng thông báo.
- Code màu đỏ là code dùng để ẩn nội dung blog khi người dùng truy cập blog bằng trình duyệt IE với các phiên bản nhỏ hơn 7.

6. Save template.

P/S: mở rộng ra ta có thể áp dụng thủ thuật này cho việc hiển thị từng tiện ích ở các trình duyệt khác nhau, như yêu cầu của bạn Tài đã nhờ mình.

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

More about →

[ Yêu cầu ] chỉ hiển thị tiện ích với quản trị blog

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

[FD's BlOg] - Đây là 1 thủ thuật cũng khá đơn giản, tương tự như với nút edit widget. Chỉ khi đã đăng nhập quyền quản trị blog thì khi load blog bạn mới thấy được widget mà bạn đã ẩn đi. Lưu ý là chỉ nhưng người được cấp quyền admin cho blog mới thấy được tiện ích, còn những tác giả thông thường cũng sẽ không thấy được tiện ích này.

Hình ảnh minh họa :

Khi chưa đăng nhập quyền Admin

Khi đã đăng nhập quyền Admin

Ví dụ ta có 1 widget có ID là HTML 1. Các bạn vào Bố cục -> chỉnh sửa code HTML -> Nhấp chọn mở rộng mẫu tiện ích -> và các bạn sẽ thấy code của nó như bên dưới:

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:includable>
</b:widget>

- Ở đọan code trên, dòng <b:include name='quickedit'/> chính là code của icon chỉnh sửa widget. Như mình đã nói ở trên, thủ thuật này sẽ dùng cách tương tự như icon chỉnh sửa widget, nhưng các bạn cũng thấy, trong code của widget HTML1 này ko có đọan nào cho thấy icon chỉ hiển thị với quản trị blog.

- Muốn thấy được code này, các bạn hãy view source của blog thì sẽ thấy được ngay, và code của nó sẽ là đọan code này :

<span class='item-control blog-admin'>
...
...
...
</span>

- khi đã tìm được dòng code này, giờ ta chỉ việc thêm nó vào trong code của widget là xong,

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->

<span class='item-control blog-admin'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</span>

</b:includable>
</b:widget>

- Save template lại sau khi thực hiện xong.

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

More about →