Định dạng CSS riêng cho các tag có số bài viết nhiều hơn một số nhất định

Tiện ích đám mây nhãn (Tag Cloud) rất cần thiết cho blogspot, giúp người dùng dễ dàng tìm kiếm bài viết theo từng chuyên mục. Trước đây mình đã từng hướng dẫn tùy biến màu sắc cho các tag trên tiện ích này. Hôm nay mình sẽ hướng dẫn bạn cách định dạng CSS riêng cho các tag có số bài viết nhiều hơn một con số nhất định nào đó. Bạn có thể xem demo ở tiện ích Tag Cloud trên Thủ thuật Blogger. Ở đây mình định dạng cho các tag có số bài viết lớn hơn số 10.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates. Tìm thẻ đóng </b:widget> của một tiện ích bất kỳ mà bạn muốn đặt tiện ích Tag Cloud này gần với nó, rồi đặt sau thẻ </b:widget> đã tìm bằng đoạn code bên dưới:

1. <b:widget id='Label100' locked='false' title='Tag Cloud' type='Label'>
2. <b:includable id='main'>
3.   <b:if cond='data:title'>
4.     <h2><data:title/></h2>
5.   </b:if>
6.   <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
7.       <b:loop values='data:labels' var='label'>
8.         <b:if cond='data:label.count &gt; 10'>
9.  <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
10.           <b:if cond='data:blog.url == data:label.url'>
11. <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
12. <b:else/>
13. <style>
14. a#more10post_label {background:#777;padding: 0 3px 0 3px}
15. </style>
16. <b:if cond='data:showFreqNumbers'>
17. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.count + &quot; bài viết trong nhãn &quot; + data:label.name' id='more10post_label'><data:label.name/></a>
18. <b:else/>
19. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;'><data:label.name/></a>
20. </b:if>
21. </b:if>
22.         </span>
23.   <b:else/>
24. <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
25.           <b:if cond='data:blog.url == data:label.url'>
26. <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
27. <b:else/>
28. <b:if cond='data:showFreqNumbers'>
29. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.count + &quot; bài viết trong nhãn &quot; + data:label.name'><data:label.name/></a>
30. <b:else/>
31. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;'><data:label.name/></a>
32. </b:if>
33. </b:if>
34.         </span>
35. </b:if>
36.  </b:loop>
37.      </div>
38. </b:includable>
39. </b:widget>

Ở đây mình gán id='more10post_label' để chuyên biệt hóa liên kết của các tag có số bài viết lơn hơn 10. Từ đó bạn có thể thêm thuộc tính CSS (ở dòng code số 14) để tạo bản sắc cho tiện ích.

Lưu Template.

Bước 2. Vào Page Elements. Chỉnh sửa tiện ích Tag Cloud, cho tiện ích hiển thị dưới dạng Cloud và chọn Show number of posts per label theo như hình minh họa bên dưới.

Về phần CSS, bạn có thể tham khảo thêm ở bài viết Tùy biến tiện ích đám mây nhãn.

More about →

Tiện ích nhãn chỉ hiển thị một số nhãn chỉ định khi duyệt xem một trang nhãn nhất định

Khi duyệt xem một trang nhãn bất kỳ, chúng ta chỉ muốn một tiện ích nhãn chỉ hiển thị một số nhãn nào đó mà thôi, theo đó tiện ích nhãn này sẽ không xuất hiện ở tất cả các trang khác, mà chỉ hiển thị ở một trang nhãn chỉ định nào đó; đây là tình huống lắc léo cho thủ thuật tạo tiện ích nhãn chỉ hiển thị một số nhãn chỉ định khi duyệt xem một trang nhãn nhất định.

Lấy ví dụ ở trang DEMO (kéo xuống đáy trang để xem), mình tạo một tiện ích nhãn (Label) và khi duyệt xem nhãn Simple Present (thì hiện tại đơn) thì tiện ích nhãn này chỉ hiển thị các nhãn liên quan đến thì hiện tại.

Tình huống này nghe có vẻ lạ lẫm song vẫn rất hữu ích cho blogspot trong một số trường hợp vận dụng. Để thực hiện thủ thuật này, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm đến thẻ đóng </b:widget> của một tiện ích bất kỳ mà bạn muốn đặt tiện ích nhãn gần với nó, rồi đặt đoạn code sau đây vào sau thẻ </b:widget>.

1. <b:widget id='Label111' locked='true' title='Tiêu đề tiện ích' type='Label'>
2. <b:includable id='main'>
3. <b:if cond='data:blog.searchLabel == &quot;Tên nhãn 111&quot;'>
4. <b:if cond='data:title'><h2><data:title/></h2></b:if>
5. <ul>
6. <b:loop values='data:labels' var='label'>
7. <li>&#187; <a expr:href='data:label.url' expr:title='&quot;Xem tất cả &quot; + data:label.count + &quot; bài viết trong nhãn &quot; + data:label.name' rel='category tag'><data:label.name/></a></li>
8. </b:loop>
9. </ul>
10. </b:if>
11. </b:includable>
12. </b:widget>

Trong đoạn code trên bạn cần thay Tên nhãn 111 bằng tên nhãn chỉ định và thay tiêu đề tiện ích cho phù hợp.

Lưu Template.

Bước 2. Vào Page Elements >> Chỉnh sửa tiện ích nhãn mới thêm vào. Tùy chọn cho hiển thị số bài đăng trên mỗi nhãn và lựa chọn các nhãn cần thiển thị trong tiện ích.

Có thể vận dụng linh hoạt để áp dụng cho nhiều trang nhãn khác nhau để tạo nét độc đáo cho blogspot của bạn.

More about →

Tạo trang homepage riêng cho trang nhãn nhất định

Để tạo ra những thủ thuật vừa mới vừa độc thì mình luôn luôn khuyến khích các bạn đóng góp ý tưởng, bởi một lẽ hiển nhiên là “một cây làm chẳng nên non – ba cây chụm lại nên hòn núi cao” và trí óc mình dù có sáng tạo mãi thì nó cũng cạn đấy bạn ạ. Thế nên sự đóng góp của các bạn rất hữu ích cho cộng đồng.

Mới đây bạn Minh Triết có hỏi rằng, có cách nào tạo hẳn một trang giao diện riêng cho một nhãn gồm cả phần main blog hay không, và nếu cái này mà làm được nữa thì vô đối. Lấy ví dụ blog của mình có 3 chủ đề chính: là A, B, C gồm các bài viết theo các nhãn A, B và C. Mình muốn trang homepage riêng và mỗi khi vào trang có dạng http://abc.blogspot.com/search/label/A thì sẽ tạo ra một trang homepage riêng cho nhãn A (tương tự với B và C).

Quả thật thì ý tưởng này rất hay và rất độc đáo. Trước tiên xin cảm ơn bạn Minh Triết đã đóng góp ý tưởng này. Và sau đây là trang Demo để các bạn xem trước.

Nào chúng ta cùng tìm hiểu vấn đề nhé bạn. Hẳn bạn cũng biết, mỗi trang chủ của blogspot được định dạng trong phần main (gồm tiện ích Blog Posts và các tiện ích khác có thể được thêm vào). Code của phần main này ở chế độ Edit HTML của Template không mở rộng mẫu tiện ích có dạng chuẩn như sau:

<!-- Main content -->

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>

</b:section>

</div>

<!-- /Main content -->

Như vậy muốn tạo kiểu trang chủ riêng cho một nhãn thì chúng ta tạo thêm một phần main khác (có ID khác phần main chính của blogspot) và dùng lệnh điều kiện để chỉ hiển thị phần main mới tạo ở trang nhãn đó. Khi đó bạn sử dụng code như sau (thay đoạn code nói trên bằng đoạn code bên dưới:

<!-- Main content -->
<b:if cond='data:blog.url == &quot;URL_đến nhãn nào đó&quot;'>
<style>
#main2-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
<b:else/>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>

</b:section>

</div>

</b:if>
<!-- /Main content -->

Lưu ý phần code CSS ở trên bạn có thể tạo giống như CSS của phần main ở trang chủ hoặc có thể tạo khác nếu bạn muốn nó khác biệt.

Bạn cần phải nhớ rằng phần main mới tạo chỉ hiển thị ở trang nhãn chỉ định nên khi vào phần Page Elements để thêm tiện ích thì bạn sẽ không thấy được phần main này. Do đó nếu muốn tùy biến cho phần main này thì bạn phải chỉnh sửa ở chế độ mở rộng mẫu tiện ích hoặc thêm tiện ích ở trang chủ và hoàn thiện nó rồi sau đó vào Edit HTML để di dời nó đến phần main mới tạo. Lấy ví dụ mình tạo một tiện ích có ID là HTML100 ở trang chủ, sau đó mình vào Edit HTML và di dời nó đến phần main mới tạo như sau:

<b:section class='main' id='main2' showaddelement='yes'>

<b:widget id='HTML100' locked='false' title='' type='HTML'/>

<b:widget id='Blog2' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Hoặc

<b:section class='main' id='main2' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Bài đăng trên Blog' type='Blog'/>

<b:widget id='HTML100' locked='false' title='' type='HTML'/>

</b:section>

Như vậy nếu bạn muốn một trang nhãn nào đó có định dạng rất phức tạp với nhiều tiện ích thì trước tiên bạn thêm chúng ở trang chủ, xong rồi bạn di dời chúng đến phần main mới tạo theo cách như trên.

Tương tự nếu bạn muốn tạo kiểu trang chủ cho nhiều nhãn, ví dụ các nhãn A, B, C thì bạn dùng code như sau:

<!-- Main content -->
<b:if cond='data:blog.url == &quot;URL_đến nhãn A&quot;'>
<style>
#main2-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</b:if>

<b:if cond='data:blog.url == &quot;URL_đến nhãn B&quot;'>
<style>
#main3-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main3-wrapper'>
<b:section class='main' id='main3' showaddelement='yes'>
<b:widget id='Blog3' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</b:if>

<b:if cond='data:blog.url == &quot;URL_đến nhãn C&quot;'>
<style>
#main4-wrapper {

… đặt code CSS ở đây …

}
</style>
<div id='main4-wrapper'>
<b:section class='main' id='main4' showaddelement='yes'>
<b:widget id='Blog4' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</b:if>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>

</b:section>

</div>

<!-- /Main content -->

Xin lưu ý một điều rằng, thủ thuật này chỉ dành cho các bạn đã có chút kiến thức về blogspot và có máu phiêu lưu với Template của mình, đồng thời đầu óc phải sáng suốt khi Edit HTML nếu không bạn sẽ phá tanh bành lên đó. Hãy nhớ Download Full Template để sao lưu dữ liệu trước khi thực hiện thủ thuật.

More about →

Hiển thị widget khi xem bài viết thuộc nhãn nhất định

Chỉ hiển thị widget khi xem bài viết một nhãn nhất định là cách giúp tạo sự khác biệt cho các bài viết thuộc một nhãn nào đó. Theo đó tiện ích được chọn hiển thị sẽ mặc định được ẩn đi, khi nào vào xem các bài viết thuộc nhãn nào đó, nếu lệnh lặp nhãn tìm thấy nhãn đã chỉ định thì tiện ích sẽ được hiển thị.

Bạn có thể xem Demo khi xem các bài viết thuộc nhãn Thông báo tại Thủ thuật Blogger, chú ý tiện ích Cập nhật từ blog khác.

Để thực hiện thủ thuật này, trước tiên bạn cần xác định ID của một tiện ích (widget) mà bạn muốn chỉ hiển thị khi xem các bài viết thuộc nhãn nào đó. Lấy ví dụ ở đây là một tiện ích có ID là HTML1.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Đặt đoạn code sau đây vào trước thẻ </head>:

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

Bước tiếp theo, tìm đoạn code tương tự đoạn code sau đâ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>

Rồi đổi nó thành thế này:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>

<script>var getLabel=&#39;<data:label.name/>&#39;;</script>

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

Bước 2. Kế đến dùng từ khóa HTML1 tìm đến cấu trúc XML của tiện ích này rồi thêm vào thành như sau (phần được đánh dấu màu đỏ là phần thêm vào):

<b:widget id='HTML1' locked='false' title='Tên tiện ích' type='HTML'>
<b:includable id='main'>

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

<script>

//<![CDATA[

// Code to display widgets on posts from a label by www.thuthuatblogger.info

if(getLabel=="Tên nhãn") {

document.getElementById("HTML1").style.display = "block";

}

//]]>

</script>

</b:if>

<!-- 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:includable>
</b:widget>

Thay Tên nhãn thành tên của nhãn mà bạn muốn áp dụng thủ thuật. Lưu Template là hoàn thành.

Từ thủ thuật này, chúng ta có thể suy luận ra nhiều vấn đề. Lấy ví dụ theo ý của bạn Linh Dung có hỏi rằng nếu bài viết có nhiều nhãn thì có thể thêm điều kiện để tiện ích chỉ hiển thị đối với nhãn cuối cùng hay không. Câu trả lời của mình là chỉ cần sử dụng Bước 1 với code nhãn như sau:

<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.isLast == &quot;true&quot;'>

<style type='text/css'>

#HTML1 {display:block}

</style>

</b:if>

</b:if>

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

More about →

Không hiển thị bài viết thuộc nhãn nhất định ở kiểu trang index

Chúng ta đều biết Blogger đã có tính năng tạo trang tĩnh (static_page) giúp người dùng tạo các trang chuyên biệt như trang giới thiệu (About), trang liên hệ (Contact)… Đặc trưng của các trang tĩnh là không được duyệt hiển thị trên trang chính (kiểu trang index gồm trang chủ, trang nhãn và trang lưu trữ). Tuy nhiên Blogger giới hạn số trang tĩnh tối đa được tạo cho mỗi blogspot là 10 trang. Dường như con số này quá khiêm tốn so với nhu cầu sử dụng của bạn. Nào là trang nén CSS, trang mã hóa, trang mã màu, trang liên kết, trang sản phẩm, trang dịch vụ, trang diễn đàn, trang liên hệ, trang giới thiệu, trang góp ý, trang lưu bút … Tính ngót ra cũng đến trên dưới hai chục trang như vậy. Thế thì làm sao để thỏa mãn nhu cầu tạo trang riêng biệt như thế.

Bạn có thể xem DEMO (Chú ý ở tiện ích Recent Posts có hiển thị 2 bài viết đầu tiên thuộc 1 nhãn song đến trang chủ thì không nhìn thấy chúng nữa).

Lời giải đáp lại đụng đến các lệnh điều kiện trong cấu trúc XML của Template. Ở đây mình sẽ gán một nhãn chung cho các bài viết được dùng để tạo trang riêng biệt giống trang tĩnh, ví dụ tên nhãn là HiddenLabel. Nào chúng ta hãy bắt đầu thực hiện như sau:

Bước 1: Đăng nhập Blogger, vào chỉnh sửa Template ở chế độ mở rộng mẫu tiện ích. Tìm đến dòng code này:

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

Lệnh include ở trên sẽ giúp duyệt hiển thị các bài viết ở tất cả các kiểu trang. Vậy ta bắt đầu thay nó bằng đoạn code bên dưới:

<!-- Điều kiện nếu ở kiểu trang index -->

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

<!-- Điều kiện nếu ở các bài viết có gắn nhãn -->

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;HiddenLabel&quot;'>

<!-- Ở đây đặt điều kiện cho các nhãn, hiển thị bài viết của tất cả các nhãn ở trang index, trừ nhãn có tên HiddenLabel -->

<b:include data='post' name='post'/>
<!-- Kết thúc điều kiện cho các nhãn -->
</b:if>
</b:loop>
<b:else/>

<!-- Nếu các bài viết không gắn nhãn thì cũng cho hiển thị ở trang index -->

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

<!-- ở kiểu trang còn lại là các trang item thì -->

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

Bước 2. Tiếp theo là ẩn liên kết nhãn HiddenLabel ở cuối bài viết hoặc dưới tiêu đề bài viết để khi ta đọc đến các bài viết thuộc nhãn HiddenLabel thì sẽ không nhìn thấy liên kết của nó. Tìm tất cả các đoạn 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 != &quot;true&quot;'>,</b:if>
</b:loop>

Rồi thay nó bằng đoạn code bên dưới.

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;HiddenLabel&quot;'>
<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>
</b:loop>

Lưu Template là hoàn thành. Bằng cách này chúng ta có thể tạo được rất nhiều trang riêng biệt có tính năng không hiển thị ở kiểu trang chính như trang tĩnh vậy, miễn là ta gán cho các bài viết đó chung cho một nhãn nhất định.

More about →

Thiết lập CSS chung cho các bài viết thuộc nhãn nhất định

Khi mổ xẻ phân tích cấu trúc XML liên quan đến nhãn trong Template của blogspot, có khối chuyện để tùy biến và sáng tạo. Ở đây mình sẽ cùng bạn “nghịch ngợm” qua vấn đề thiết lập CSS chung cho các bài thuộc một nhãn nhất định.

Xem Demo.

Trước tiên chúng ta cần biết được đoạn code liên quan đến liên kết nhãn trong Template ở chế độ mở rộng mẫu tiện ích như sau:

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

Lưu ý, trong Template có thể có nhiều đoạn code như vậy, trường hợp này chỉ chú ý đến đoạn code nằm ở phần post-footer, tức là nằm sau thẻ <div class='post-footer'>.

Trong đoạn code trên, thẻ dữ liệu <data:label.name/> xác định tên nhãn. Vậy khi cần gán điều kiện nào đó cho một nhãn thì sử dụng lệnh điều kiện như sau:

<b:if cond='data:label.name = &quot;Tên nhãn&quot;'>

... điều kiện được gán nằm ở đây ...

</b:if>

Trên cơ sở này chúng ta có thể gán điều kiện CSS chung cho cho tất cả các bài viết thuộc một nhãn nhất định, qua đó có thể đặt màu nền, màu văn bản, font chữ hay nhiều định dạng CSS khác góp phần tạo nét riêng cho các bài viết thuộc một nhãn nào đó. Để làm được điều này, chúng ta cần gắn ID cho bài viết bằng cách thay dòng <div class='post-body entry-content'>

bằng dòng <div class='post-body entry-content' expr:id='data:post.id'>.

Tiếp theo chúng ta cần đặt CSS chung cho phần bài viết của một nhãn, kết hợp đoạn script có chức năng gán class cho nhãn:

<style type='text/css'>
.postLabel1 {
background: transparent url(URL_hình nền) no-repeat 50% 50%;
color: #d8eaee;
font-size: 14px;
line-height: 18px;
padding: 20px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
function specifyLabel1(strx) { document.getElementById(strx).className='postLabel1'; }
//]]>
</script>

Bước tiếp theo là thay đoạn code liên quan đến nhãn bằng đoạn code 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.name == &quot;Tên nhãn 1&quot;'>
<script type='text/javascript'> specifyLabel1(&#39;<data:post.id/>&#39;) </script>
</b:if>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Đến đây là hoàn tất các bước thực hiện thủ thuật, lúc này bạn có thể bắt đầu tùy biến CSS theo ý thích của mình. Nếu bạn muốn tạo CSS chung cho các bài viết thuộc một nhãn khác, thì bạn tiếp tục thiết lập định dạng CSS và Javascript có thể như sau:

<style type='text/css'>
.postLabel2 {
-moz-border-radius: 10px;
-moz-box-shadow: inset 10px 10px 25px #432, inset -10px -10px 25px #432;
background-color: #101921;
margin: 30px auto;
padding: 30px 0;
text-align: center;
width: 550px;
}
.postLabel2 img {
-moz-border-radius: 10px;
-moz-box-shadow: inset 10px 10px 25px #765, inset -10px -10px 25px #765;
border: none !important;
padding: 20px !important;
}
</style>

<script type='text/javascript'>
//<![CDATA[
function specifyLabel2(strx) { document.getElementById(strx).className='postLabel2'; }
//]]>
</script>

Và cuối cùng sử dụng code chỉ định nhãn 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.name == &quot;Tên nhãn 1&quot;'>
<script type='text/javascript'> specifyLabel1(&#39;<data:post.id/>&#39;) </script>
</b:if>
<b:if cond='data:label.name == &quot;Tên nhãn 2&quot;'>
<script type='text/javascript'> specifyLabel2(&#39;<data:post.id/>&#39;) </script>
</b:if>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Nhớ thay Tên nhãn 1, Tên nhãn 2 bằng các tên nhãn tương ứng mà bạn muốn thiết lập CSS chung cho các bài viết thuộc các nhãn này nhé.

More about →

Chèn icon vào trước nhãn trong tiện ích Label

Tiện ích Label là một tiện ích rất đỗi cần thiết cho một blogspot, nó giúp người đọc dễ dàng tìm đến một chuyên mục riêng biệt nào đó. Ngoài cách tùy biến tiện ích đám mây nhãn, chúng ta có thể tùy biến thêm cho nó bằng cách chèn icon hoặc hình ảnh vào trước hoặc sau tên nhãn trong tiện ích Label. Bạn có thể xem demo trong nhãn Emoticons ở sidebar của trang này.

Để thực hiện điều này bạn phải có một số icon riêng biệt cho một số nhãn bạn cần áp dụng thủ thuật, upload các icon lên web rồi lấy URL để áp dụng.

Thủ thuật này chỉ dùng đến CSS nên rất đơn giản, trước tiên cần biết quy tắc chung cho code.

Dưới đây là định dạng CSS chung:

a[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#XXXXXX;font-size:25px;padding-left: 25px;background: url(URL_icon_nhãn 1) no-repeat center left;}
a:hover[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#YYYYYY;font-size:25px;}

Trong định dạng CSS ở trên, a chỉ định liên kết, a:hover để tạo hiệu ứng khi rê trỏ qua liên kết, bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn, thay Tên nhãn 1 bằng tên nhãn cần chèn icon, thay XXXXXX và YYYYYY bằng mã màu bạn chọn, bạn có thể chỉnh font-size theo ý muốn, thay URL_icon_nhãn 1 lả địa chỉ icon đã upload lên web. Theo định dạng như trên, bạn có thể tạo thêm cho các nhãn khác.

Định dạng ở trên áp dụng cho trường hợp chèn icon ở bên trái nhãn, nếu muốn chèn icon bên phải nhãn thì đổi padding-left thành padding-right và đổi center left thành center right.

Hãy chắn chắn trong blogspot của bạn đã có tiện ích Nhãn, nếu chưa có thì có thể thêm vào. Bạn hãy đặt toàn bộ code CSS được áp dụng vào Template ở trước dòng ]]></b:skin>.

Lưu ý: Code ở trên sẽ khiến cho tất cả các liên kết nhãn được áp dụng đều có icon được chèn, nếu bạn giới hạn cho một tiện ích nhãn thì lấy id của tiện ích nhãn (thường có tên là Label1) để gán vào CSS như bên dưới.

#Label1 a[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#XXXXXX;font-size:25px;padding-left: 20px;background: url(URL_icon_nhãn 1) no-repeat center left;}
#Label1 a:hover[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#YYYYYY;font-size:25px;}

Hy vọng thủ thuật "độc" này sẽ giúp ích nhiều cho blogspot của bạn. :44)

More about →

Tùy biến tiện ích đám mây nhãn

Hẳn bạn biết rằng Blogger có một tiện ích gọi là Label Cloud, chính là tiện ích đám mây nhãn khá quen thuộc. Trên sidebar của Thủ thuật Bloggger bạn sẽ thấy một tiện ích như vậy. Tuy nhiên để có style đẹp thì bạn cần phải tùy biến cho tiện ích này.

Thủ thuật sau đây sẽ giúp bạn tùy biến về mầu sắc cho các tag và thêm thuộc tính title hiển thị số bài viết trong nhãn, thay cho cho tính năng mặc định hiển thị số bài viết bên cạnh label.

Trước khi cài đặt bạn hãy xem hình minh họa bên dưới.

Bước 1. Đăng nhập Blogger, vào Design >> Page Elements. Nếu blogspot của bạn chưa có tiện ích Nhãn thì thêm một tiện ích như vậy trên phần sidebar. Lưu ý cho tiện ích hiển thị dưới dạng Cloud và chọn Show number of posts per label.

Bước 2. Vào Edit HTML, chọn Expand Widget Templates. Đặt đoạn code CSS sau đây vào trước thẻ ]]></b:skin>.

/* Label Cloud */
.cloud-label-widget-content {
text-align:center;
font-weight: bold;
}
.cloud-label-widget-content span {
padding: 0 0 0 5px;
}
.label-size-1 a {color: #8b8989; font-size: 11px;}
.label-size-2 a {color: #000000; font-size: 13px;}
.label-size-3 a {color: #ac58fa; font-size: 15px;}
.label-size-4 a {color: #dccdc; font-size: 16px;}
.label-size-5 a {color: #0101df; font-size: 19px;}

Bước 3. Tìm đến đoạn code như bên dưới.

<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>

Thay phần code được đánh dấu màu đỏ bằng đoạn code

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<b:if cond='data:showFreqNumbers'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + &quot; bài viết trong nhãn &quot; + data:label.name'><data:label.name/></a>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
</b:if>

Lưu Template là OK.

More about →

Hiệu ứng M6 cho tiện ích Nhãn

Trang Dhteumeuleu.com có rất nhiều kiểu hiệu ứng rất độc đáo dành cho thiết kế web. Hôm nay xin giới thiệu kiểu menu M6 do Dhteumeuleu.com phát triển. Bạn có thể xem Demo trước khi thực hiện tạo kiểu Menu này.

Bước 1. Đặt đoạn code Javascript dưới đây vào trước thẻ </head>.

<script type="text/javascript">
//<![CDATA[
// ===========================================
// -------- M6 menu ------
// script written by Gerard Ferrandez - Ge-1-doot - December 2005
// http://www.dhteumeuleu.com
// updated Feb 2010 - namespaced
// ===========================================

var M6 = function () {
var P,T;
var over = -1;
var fontSize = 38;
var lensFX = 1;
var num = true;
var color = "#347C17";
var selected = "#800517";
var zoom = function (s) {
if(s!=over){
over = s;
var i = 0,o;
while (o = P[i]) {
o.style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px";
o.style.color=(i==s)?selected:color;
i++;
}
}
}
var init = function () {
P = document.getElementById("menu").getElementsByTagName("a");
var i = 0,o;
while (o = P[i]) {
if(num){
x=i+".";
if(x.length<3)x="0"+x;
o.innerHTML = x+o.innerHTML;
}
o.style.width = "100%";
o.i = i;
o.onmouseover= function() {
zoom(this.i);
}
i++;
}
zoom(0);
}
return {
init : init
}
}();
onload = function() {
M6.init();
}
//]]>
</script>

Bước 2. Đặt đoạn code CSS sau đây vào trước thẻ </head>.

<type type="text/css">
#menu {
height: 300px;
position: relative;
width: 400px;
}
#menu a {
display: block;
font-family: Arial, sans-serif;
text-decoration: none;
white-space: nowrap;
}
</style>

Bước 3. Thiết lập cấu trúc HTML như bên dưới và đặt giữa thân trang web (giữa thẻ <body> và </body>).

<div id="menu">
<a href="URL_Link 1"> Link 1 </a>
<a href="URL_Link 2"> Link 2 </a>
<a href="URL_Link 3"> Link 3 </a>
.......
</div>

* Mở rộng: Ở đây nhận thấy có thể áp dụng hiệu ứng này cho tiện ích Nhãn (Label) trên blogspot. Bạn có thể xem Demo bên dưới.

Để làm được như vậy thì trước tiên Đăng nhập Blogger, vào Design >> Page Elements. Nếu blog của bạn chưa có tiện ích Nhãn (Labels) thì thêm một tiện ích như vậy.

Ở Bước 1, bạn cần thay dòng

P = document.getElementById("menu").getElementsByTagName("a");

Bằng dòng :

P = document.getElementById("Label1").getElementsByTagName("a");

Đến Bước 2 thì đặt code bên dưới vào trước thẻ ]]</b:skin>.

#Label1 {
height:300px;
position:relative;
width:250px;
}
#Label1 li {
list-style-type:none;
margin:0;
padding:0;
}
#Label1 a {
display:block;
font-family:Arial, sans-serif;
text-decoration:none;
white-space:nowrap;
}
#Label1 a:hover {
text-decoration:none;
}

More about →

Ẩn hoặc chỉ hiện các bài viết thuộc một nhãn ở trang chủ

Như các bạn biết thì Blogger đã có tính năng tạo trang tĩnh (static page) để dùng tạo các trang giới thiệu, liên hệ, quy định sử dụng, chính sách riêng tư, diễn đàn, … Một đặc điểm đặc trưng của các trang tĩnh là không hiển thị trên trang chủ, các trang nhãn và lưu trữ. Tuy nhiên Blogger cũng giới hạn số trang tĩnh được tạo cho mỗi blogspot là 10 trang.

Sự giới hạn này cũng là một hạn chế. Khi mình sử dụng hết 10 trang tĩnh này thì mình nghĩ ra cách tạo một số trang bài viết cơ bản và làm sao để không cho chúng xuất hiện trên trang chủ, khi đó chúng sẽ giống như các trang tĩnh chính hiệu vậy.

Lấy ví dụ mình viết một loạt bài viết có tiêu đề lần lượt là Bài viết số 1, Bài viết số 2, Bài viết số 3, Bài viết số 4, Bài viết số 5. Mình đặt tên nhãn cho các bài viết này theo thông lệ mỗi khi tạo một bài viết. Ở đây mình muốn Bài viết số 1 và Bài viết số 3 không được hiển thị ở trang chủ, vậy mình đặt thêm một nhãn chung cho hai bài viết này là Z Label. Phải đặt như thế này để trong trường hợp 2 bài viết này được đặt nhiều nhãn (ví dụ Z Label, Nhãn 1, Nhãn 2, …) thì Z Label sẽ hiển thị ở cuối cùng. Thủ thuật của mình là không cho nhãn Z Label xuất hiện trên trang chủ, khi đó Bài viết số 1 và Bài viết số 3 sẽ không xuất hiện ở trang chủ.

Để làm được như vậy, mình đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates (nhớ Backup Template). Bước này gọi là Bước 1.

Tìm dòng <b:includable id='main' var='top'>. Tính từ dòng này trở xuống vài dòng code mình sẽ tìm thấy đoạn code giống hoặc tương tự như đoạn code bên dưới.

<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>

Mình thay nó bằng đoạn code bên dưới.

<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<b:if cond='data:label.name != "Z Label"'>
<b:include data='post' name='printPosts'/>
</b:if>
</b:if>
</b:loop>
</b:if>
<b:else/>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>

Lúc này mình tìm thẻ đóng </b:includable> cho thẻ <b:includable id='main' var='top'>. Thẻ đóng này nằm ngay trước dòng

<b:includable id='commentDeleteIcon' var='comment'>

Mình đặt đoạn code bên dưới vào sau thẻ </b:includable> nói trên.

<b:includable id='printPosts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>

Lưu Template.

Như vậy Bước 1 đã giúp mình ẩn một số bài viết thuộc một nhãn nhất định sao cho không hiện ở trang chủ. Một số điểm cần chú ý ở thủ thuật ở Bước 1 là các bài viết không có nhãn sẽ không hiển thị ở trang chủ, nhãn không hiển thị ở trang chủ phải là nhãn cuối cùng trong chuỗi các nhãn ở bài viết được lọc không cho hiển thị ở trang chủ và nếu tất cả các bài viết mới nhất đều thuộc về một nhãn muốn ẩn thì blog của bạn sẽ trống trơn không hiển thị bài viết nào (vì thế chỉ áp dụng thủ thuật này khi blog của bạn đã có nhiều bài viết được đăng).

Bước 2 là ẩn liên kết nhãn Z Label ở cuối (footer) bài viết để khi ta đọc đến Bài viết số 1 và Bài viết số 3 thì sẽ không nhìn thấy liên kết Z Label ở cuối bài viết.

Ở chế độ Edit HTML chọn Expand Widget Templates. Tìm đoạn 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 != &quot;true&quot;'>,</b:if>
</b:loop>

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

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;Z Label&quot;'>
<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>
</b:loop>

Lưu Template là OK.

Từ thủ thuật này mình luận suy ra một thủ thuật khác là chỉ hiển thị các bài viết thuộc một nhãn nào đó ở trang chủ. Ở Bước 1 thay vì sử dụng đoạn code được đánh dấu màu đỏ thì sử dụng đoạn code sau đây.

<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "Z Label"'>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>
</b:if>
<b:else/>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>

Ở đây thay vì Z Label, bạn có thể đặt tên nhãn bất kỳ cho các bài viết mà bạn muốn ở trang chủ chỉ hiển thị các bài viết này mà thôi. Tiếp tục áp dụng Bước 2 như trên.

Cũng chính từ Bước 2, ta có thể luận suy ra một thủ thuật khác là chỉ hiển thị tiện ích ở các bài viết thuộc một nhãn nhất định nào đó. Trong đoạn code được đánh dấu màu xanh ở Bước 2, đặt đoạn code sau đây vào trước thẻ </b:loop>.

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

Tiếp tục đặt đoạn code sau đây vào sau dòng ]]></b:skin>.

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

Ở đây HTML1 là id của tiện ích mà bạn muốn chỉ hiển thị ở các bài viết thuộc Nhãn 1. Thay Nhãn 1 bằng tên nhãn và thay HTML1 bằng id của nhãn mà bạn muốn áp dụng thủ thuật này.

Mình viết bài này để trả lời câu hỏi của bạn Hieu Bo tại blog Bokute.com.

Bạn ấy hỏi như thế này:

Có cách nào để ẩn bài viết ở trang chủ một cách riêng lẻ không anh?

Ví dụ em có 3 bài viết : bài 1, bài 2, bài 3.

Em không muốn ẩn hết 3 bài mà chỉ muốn ẩn bài số 2 thôi có được không. Mà chỉ ở trang chủ thôi, còn khi xem bài số 2 ở trang xem chi tiết thì vẫn xem bình thường, có điều mình không muốn bài 2 hiện ở trang chủ.

Hy vọng cá nhân bạn Hieu Bo sau khi đọc bài viết này sẽ cảm thấy hài lòng. :14)

More about →

Hiệu ứng lúc lắc cho liên kết Nhãn

Hiệu ứng liên kết lúc lắc là một kiểu hiệu ứng khá độc đáo cho liên kết sử dụng thư viện jQuery do webdesigner David Wash tại Wisconsin (Mỹ) phát triển. Hiệu ứng này có tên là jQuery Link Nudging.

Xem Demo.

Để làm được như vậy, bạn hãy thực hiện như sau.

Bước 1. Đặt đoạn code dưới đây vào trước thẻ </head>.

<script type="text/javascript" src="http://davidwalsh.name/dw-content/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>

Bước 2. Bước tiếp theo là thêm class="nudge" vào bất kỳ một định dạng liên kết nào đó mà bạn muốn có hiệu ứng này, theo cấu trúc HTML như sau.

<a class="nudge" href="URL_liên kết">Text liên kết</a>

Bạn cũng có thể tạo hiệu ứng này với liên kết là hình ảnh, theo cấu trúc như sau.

<a class="nudge" href="URL_liên kết" ><img src="URL_hình ảnh" /></a>

Bạn thực hiện tương tự đối với Blogger. Ngoài ra bạn có thể cài đặt hiệu ứng này riêng cho các liên kết Nhãn nằm trên phần sidebar của Template.

Xem Demo.

Để làm được điều này, trước tiên bạn phải tạo một tiện ích Nhãn trên phần sidebar. Đặt code theo Bước 1 ở trên. Lưu Template. Chọn Expand Widget Templates. Tìm đoạn code đại khái như dưới đây trong Template và thêm vào phần được đánh dấu màu đỏ.

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span class="nudge" expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a class="nudge" expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>

</li>
</b:loop>
</ul>

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

Có thể nói hiệu ứng này được sử dụng nhiều trên thế giới nhưng đối với Blogger thì có lẽ tôi là người đầu tiên tại Việt Nam sử dụng thành công cho liên kết Nhãn.

Nếu bạn thấy thích hiệu ứng này thì còn chờ đợi gì nữa mà không cài đặt cho blogspot của mình đi nào.

More about →

Chèn icon cho nhãn trước tiêu đề bài viết Blogger

Đặt icon cho từng nhãn trước tiêu đề bài viết là một cách giúp nhận diện nhanh chủ đề của bài viết. Trước đây blogger Fan Dung đã có bài giới thiệu về cách thực hiện điều này.

Hôm nay tôi có nghĩ ra một cách có thể nói là có hiệu quả tương đương, sử dụng javascript để gán tự động hình icon đại diện cho từng nhãn và ít can thiệp đến cấu trúc HTML trong Template. Mỗi khi blogspot của bạn có thêm nhãn thì chỉ cần gán thêm hình icon đại diện cho nhãn trong đoạn code javascript một cách đơn giản, tránh đụng đến HTML trong Template và điều này đặc biệt hữu dụng đối với các bạn chưa rành về XML của Blogger Template.

Xem Demo.

Để thực hiện điều này, bạn hãy thực hiện theo các bước sau đây.

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

Đặt đoạn code sau đây vào trước thẻ </head>.

<!--ICON FOR LABEL AUTO BEFORE POST TITLE BY HUYNH NHAT HA-->
<style type='text/css'>
.post-icon{
filter: alpha(opacity=80);
opacity: .8;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
float:left;margin-right:5px;width:20px;height:20px;display:block;border:solid 0px;
}
.post-icon:hover{
filter: alpha(opacity=100);
opacity: 1.0;
-moz-opacity:1.0;
-khtml-opacity: 1.0;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function imagelabel(label) {
type=0;
image = new Array()
image[0] = ""
image[1] = "<img class='post-icon' src='URL_icon_Nhãn 1' title='Chuyên mục: Nhãn 1'/>"
image[2] = "<img class='post-icon' src='URL_icon_Nhãn 2' title='Chuyên mục: Nhãn 2'/>"
image[3] = "<img class='post-icon' src='URL_icon_Nhãn 3' title='Chuyên mục: Nhãn 3'/>"
image[4] = "<img class='post-icon' src='URL_icon_Nhãn 4' title='Chuyên mục: Nhãn 4'/>"
image[5] = "<img class='post-icon' src='URL_icon_Nhãn 5' title='Chuyên mục: Nhãn 5'/>"

if (label == "Nhãn 1"){type=1;}
if (label == "Nhãn 2"){type=2;}
if (label == "Nhãn 3"){type=3;}
if (label == "Nhãn 4"){type=4;}
if (label == "Nhãn 5"){type=5;}
document.write(image[type]);
}
//]]>
</script>

Bạn cần thay những dòng được đánh dấu màu xanh bằng địa chỉ URL icon đại diện cho từng nhãn và những dòng được đánh dấu màu đỏ bằng tên nhãn tương ứng với icon. Mỗi khi blog của bạn có thêm nhãn thì chỉ cần gán thêm vào đoạn code javascript ở trên theo đúng cách thức:

image[n] = "<img style='width:15px;' class='post-icon' src='URL_icon_Nhãn n' title='Chuyên mục: Nhãn n'/>"

if (label == "Nhãn n"){type=n;}

Bước 2. Tìm dòng <div class='post-title'> rồi đặt sau nó với đoạn code bên dưới.

<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><script type='text/javascript'>imagelabel(&quot;<data:label.name/>&quot;);</script></a>
</b:loop>
</b:if>
</div>

Lưu Template là OK.

Chúc bạn thành công nhé! :37)

More about →

Giới hạn số bài viết cho các trang nhãn

Đố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 + &quot;?max-results=10&quot;' 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 + &quot;?max-results=10&quot;'>

Sau đó Lưu Template.

More about →

Tùy biến nhãn ở cuối bài viết Blogger

Ở sau phần cuối bài viết (post footer) trên Blogger thường có liên kết Nhãn (Labels) để cho biết bài viết thuộc nhãn nào. Ở đây bạn có thể đổi từ “Nhãn” thành “Chuyên mục” để tạo sự chuyên nghiệp hơn cho blog của bạn, ngoài ra bạn có thể tùy biến màu sắc cho liên kết nhãn để làm cho nó có vẻ đẹp hơn.

Trước tiên Đăng nhập Blogger, vào Thiết kế (Design) >> Chỉnh sửa HTML (Edit HTML) chọn Mỏ rộng mẫu tiện ích (Expand Widget Templates).

Tìm và thêm vào phần được đánh dấu màu đỏ theo đoạn code dưới đây.

<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'><span class='chuyenmuc'><data:label.name/></span></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</b:if>
</div>

Nếu bài viết thuộc nhiều nhãn thì có thể thay dấu phẩy phân cách giữa các nhãn bằng một biểu tượng nào đó, ở đây tôi thay bằng biểu tượng ngôi sao, thì thay dòng

<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>

bằng dòng code sau:

<b:if cond='data:label.isLast != &quot;true&quot;'><span style="vertical-align: middle; color:#000; font-size:24px;text-shadow: 1px 1px 1px #505050">&#9734;</span></b:if>

Tiếp theo chúng ta cần định thuộc tính CSS cho liên kết nhãn, đặt đoạn code sau đây vào trước dòng ]]></b:skin>.

.chuyenmuc {
padding:4px;
color:#ffffff;
opacity:0.6;
text-shadow:0 3px 2px #000000;
background:none repeat scroll 0 0 #990000;
}
.chuyenmuc: hover {
opacity:0.9;
}

Nếu bạn biết về CSS thì có thể điều chỉnh thuộc tính màu sắc trong đoạn code trên. Nếu muốn đẹp hơn một chút thì sử dụng đoạn code dưới đây.

.chuyenmuc {
padding:4px;
color:#ffffff;
-moz-border-radius: 5px 5px 5px 5px;
background:none repeat scroll 0 0 #990000;
text-shadow: -1px -1px 1px #555;
-moz-box-shadow: 3px 3px 3px #000000;
}
.chuyenmuc:hover {
opacity:0.9;
}

More about →

Xóa hoặc ẩn số đếm bài viết theo nhãn trên Blogger

Theo mặc định thì đi theo bên phải mỗi nhãn (Label) trên Blogger đều có số bài viết cho mỗi nhãn đó trong dấu ngoặc đơn trong các widget Label.

Bạn có thể xóa số đếm bài viết theo hướng dẫn dưới đây.

Bước 1: Đăng nhập Blogger. Vào Chỉnh sửa HTML (Edit HTML). Chọn Mở rộng Mẫu tiện ích (Expand Widget Templates). Lưu ý backup Template của bạn trước khi tiến hành chỉnh sửa.

Bước 2: Tìm đoạn code sau đây (có thể nhấn tổ hợp phím Ctrl+F để tìm cho nhanh):

<span dir='ltr'>(<data:label.count/>)</span>

Cách thứ nhất mà các blogger trên thế giới hay dùng là xoá dòng (<data: label.count />) rồi lưu Template là xong.

Cách thứ hai theo quan điểm riêng của tôi là thay thế toàn bộ đoạn code ở trên bằng đoạn code sau đây:

<span dir='ltr' style='display:none; visibility:hidden;'>(<data:label.count/>)</span>

Ở đây tôi chỉ dùng CSS để ẩn đi phần đếm số bài viết theo nhãn, chứ không xóa nó đi.

Hy vọng bạn sẽ thấy đây là một thủ thuật nhỏ nhưng cũng không kém phần hữu ích cho Blog của bạn.

More about →

Cách xóa phần “Hiển thị các bài đăng có nhãn …”

Khi thiết kế blog trên Blogger, mỗi khi sử dụng liên kết đến các nhãn (label), việc kích chuột vào liên kết nhãn thường dẫn đến một trang mà ở đầu trang xuất hiện một dòng hiển thị trạng thái báo kết quả các bài viết thuộc nhãn đó với nội dung “Hiển thị các bài đăng có nhãn … Hiển thị tất cả bài đăng.” Đặc điểm này dường như làm mất đi vẻ hấp dẫn của một blog chuyên nghiệp.

Sau đây tôi sẽ hướng dẫn một thủ thuật đơn giản để loại bỏ trạng thái này.

Bước 1: Vào Bố cục (Layout) - Chỉnh sửa HTML (Edit HTML). Bạn cần backup Template của mình trước khi chỉnh sửa. Chọn Mở rộng Mẫu tiện ích (Expand Widget Templates). Sau đó tìm đoạn mã dưới đây:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:includable id='status-message'> << Bước 2 (2): Xóa dòng này<b:if cond='data:navMessage'> << Bước 2 (1): Xóa dòng này<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if> << Bước 2 (1): Xóa dòng này
</b:includable> << Bước 2 (2): Xóa dòng này

Bước 2: Xóa một số đoạn mã riêng biệt theo 2 hướng dẫn:
(1) Trước tiên hãy xóa 2 phần code đánh dấu màu xanh, lưu Template rồi đăng xuất Blogger để xem kết quả trên blog của bạn.
(2) Nếu bước 2 (1) không thành công thì do thiết kế Template của bạn có lỗi gì đó. Lúc này hãy thực hiện tiến trình tương tự từ Bước 1 sang Bước 2 rồi xóa luôn 2 phần code đánh dấu màu đỏ. Lưu Template rồi đăng xuất Blogger để xem kết quả trên blog của bạn.
(3) Chú ý một số Template mới lấy từ các nguồn cung cấp Blogger Template miễn phí thì phải tìm xóa đoạn code dưới đây:

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

(4) Nếu các bước trên không thành công thì bạn có thể tham khảo cách này, bằng việc sử dụng thủ thuật CSS đơn giản: Chèn đoạn mã sau vào trước dòng ]]></b:skin>.

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

Hy vọng bạn sẽ tìm thấy sự thú vị từ thủ thuật này. Và nhớ backup Template của bạn sau khi thực hiện thành công thủ thuật này nhé.

More about →