• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

10
20/12/2010

Đặ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)

{10 bình luậnAdd yours ?}

Huy Freedom
09:12:00, 27 thg 12, 2010

Pro ơi. Thủ thuật này không áp dụng được cho lable tiếng việt thì phải :(

Reply
19:53:00, 29 thg 3, 2011

Anh ơi, có cách nào thêm một dòng bất vào trước tiêu đề mổi bài đang tự xuất bản không anh, em thử biến đổi code trên mà vẩn không được, em ví dụ kỳ như :

tiêu đề bài viết
ví dụ : Mày để cho nó một chút
áp dụng cho tấc cả các tiêu đề bài viết đó anh, giúp em nhé !

Reply
07:31:00, 30 thg 3, 2011

Trong Template có đoạn code này liên quan đến tiêu đề bài viết:

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


Nếu em muốn thêm cái gì trước tiêu đề bài viết thì thêm vào trước <data:post.title/>
:67)

Reply
22:55:00, 31 thg 3, 2011

Àh, ra vậy, thanks anh, em làm được rùi, tiện đây anh cho em hỏi , cũng nội dung tương tự như trên nhưng em muốn thêm chử hoặc hình ảnh vào trước mổi dòng chử đầu tiên trong bài viết ví dụ như : [T'blog]-đêm nay mưa lại rơi, từng hạt mưa cô đơn lẻ loi... đó anh, anh giúp em nhé !

Reply
08:12:00, 1 thg 4, 2011

Em vào Cài đặt (Settings) >> Định dạng (Formatting) kéo xuống tại ô Mẫu bài đăng (Post Template) em đặt vào [T'blog]- nếu muốn nổi bật màu khác lên thì dùng <span style="color:#XXXXXX">[T'blog]</span>- em thay #XXXXXX bằng mã màu e thích, tìm trong công cụ mã màu trên Bloggerism e nhé. Sau đó nhấp Lưu Cài đặt (Save Settings) là OK. Mỗi khi đăng bài sẽ có sẵn [T'blog]- ở đầu bài viết.

Reply
20:56:00, 2 thg 4, 2011

úi, thank anh nhiều nha ! hihi

Reply
21:06:00, 2 thg 4, 2011

Anh ơi, tiện đây cho em hỏi lun về cái vụ cũng giống như trên đó anh
Nếu sử dụng như cách trên thì nó chỉ áp dụng cho những bài em sẻ đang kế tiếp chứ không áp dụng cho những bài viết em từng đăng :
Đây là code của tiêu đề bài viết :


Nếu em thêm [ Truyện's Blog ] vào code
[ Truyện's Blog ] thì nó sẻ tự fomat tiêu đề all các bài đăng trên blog của em, vậy anh cho em hỏi có cách nào làm được như vậy để áp dụng cho dòng all bài viết không anh ?

Em có dode sau để thay đổi chử cái đầu dòng:
h2:first-letter {color:#FF1515;font-size:large;}
anh nghỉ có thể tùy biến nó không anh , tại vì em mới chuyển nhà từ blogplus sang nên chẳn biết gì về blogspot này , về CSS thì chỉ một chút xíu thui ah !

Reply
21:36:00, 2 thg 4, 2011

Về vấn đề này em tìm đọc 2 bài liên quan ở tag Post Body:

http://www.bloggerism.tk/search/label/Post%20Body?max-results=10
:71)

Reply
10:00:00, 9 thg 10, 2011

Đã áp dụng thành công trên blog của tớ (nhãn tiếng Việt). Cảm ơn tác giả nhiều.

Reply
13:49:00, 28 thg 7, 2014

:3) Để thử ngay mới đc.Cám ơn HNH nhiều.

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn