trang web chia se thong tin9: Label

Showing posts with label Label. Show all posts

Thursday, October 27, 2011

Đị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:

<b:widget id='Label100' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.count > 10'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<style>
a#more10post_label {background:#777;padding: 0 3px 0 3px}
</style>
<b:if cond='data:showFreqNumbers'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=10"' expr:title='data:label.count + " bài viết trong nhãn " + data:label.name' id='more10post_label'><data:label.name/></a>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=10"'><data:label.name/></a>
</b:if>
</b:if>
</span>
<b:else/>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<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 + "?max-results=10"' expr:title='data:label.count + " bài viết trong nhãn " + data:label.name'><data:label.name/></a>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=10"'><data:label.name/></a>
</b:if>
</b:if>
</span>
</b:if>
</b:loop>
</div>
</b:includable>
</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.

Wednesday, October 5, 2011

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

<b:widget id='Label111' locked='true' title='Tiêu đề tiện ích' type='Label'>
<b:includable id='main'>
<b:if cond='data:blog.searchLabel == "Tên nhãn 111"'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<ul>
<b:loop values='data:labels' var='label'>
<li>» <a expr:href='data:label.url' expr:title='"Xem tất cả " + data:label.count + " bài viết trong nhãn " + data:label.name' rel='category tag'><data:label.name/></a></li>
</b:loop>
</ul>
</b:if>
</b:includable>
</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.

Sunday, September 11, 2011

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:

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

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:

<b:if cond='data:blog.url == "URL_đến nhãn nào đó"'>
<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>

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:

<b:if cond='data:blog.url == "URL_đến nhãn A"'>
<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 == "URL_đến nhãn B"'>
<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 == "URL_đến nhãn C"'>
<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>

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.

Wednesday, September 7, 2011

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 != "true"'>,</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='<data:label.name/>';</script>
<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>

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 == "item"'>
<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>

<b:if cond='data:title != ""'>
<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 != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:label.isLast == "true"'>
<style type='text/css'>
#HTML1 {display:block}
</style>
</b:if>
</b:if>
</b:loop>
</b:if>
</span>

Thursday, August 25, 2011

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:

<b:if cond='data:blog.pageType == "index"'>

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

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

</b:if>
</b:loop>
<b:else/>

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

<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 != "true"'>,</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 != "HiddenLabel"'>
<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>

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.

Tuesday, August 23, 2011

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 != "true"'>,</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 = "Tên nhãn"'>
... đ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 == "Tên nhãn 1"'>
<script type='text/javascript'> specifyLabel1('<data:post.id/>') </script>
</b:if>
<b:if cond='data:label.isLast != "true"'>,</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 == "Tên nhãn 1"'>
<script type='text/javascript'> specifyLabel1('<data:post.id/>') </script>
</b:if>
<b:if cond='data:label.name == "Tên nhãn 2"'>
<script type='text/javascript'> specifyLabel2('<data:post.id/>') </script>
</b:if>
<b:if cond='data:label.isLast != "true"'>,</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é.

Thursday, March 31, 2011

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)

Thursday, March 24, 2011

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='"label-size label-size-" + 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 + " bài viết trong nhãn " + 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.

Sunday, February 27, 2011

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

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

* 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;
}