• 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

Gắn ID riêng cho các thành phần trong bài viết

12
11/08/2011

Cấu trúc một bài viết trên blogspot bao gồm tập hợp các lớp (class) và ID khác nhau và một khi chúng ta tạo các thuộc tính CSS cho các lớp và ID đó thì tất cả các bài viết trên blog đều có chung một định dạng. Vậy làm cách nào để có thể tùy biến CSS cho riêng từng (hoặc chỉ một số) bài viết vì trường hợp này cũng rất cần thiết cho một số tình huống khi bạn muốn tạo trang chuyên biệt có những định dạng khác biệt với những trang thông thường khác. Mấu chốt vấn đề là chúng ta cần tạo ID riêng cho mỗi bài viết, và một khi có ID riêng thì chúng ta có thể dễ dàng gán CSS riêng cho chúng.

Khi ở trạng thái đăng bài viết, nếu chú ý trên thanh địa chỉ cùa công cụ trình duyệt, hẳn bạn sẽ thấy nó trông giống như thế này:

http://www.blogger.com/post-edit.g?blogID=XXXXXXXXXXXXXXXXX
&postID=YYYYYYYYYYYYYYYYYYY

Trong đó YYYYYYYYYYYYYYYYYYY là chuỗi số ID của bài viết. Và chuỗi số này được thiết lập trong cấu trúc XML của Template dưới dạng như sau:
<b:includable id='post' var='post'>
<div class='post'> // (hoặc ở 1 số Template là thẻ <div class='post hentry uncustomized-post-template'>)
<a expr:name='data:post.id'/>
[.......]
Thẻ <div class='post'> tạo lớp CSS chung cho toàn bộ bài viết, vậy để chuyên biệt hóa cho từng bài viết thì chúng ta cần gắn ID vào như sau:
<div class='post' expr:id='"post-" + data:post.id'>
Khi định dạng CSS cho toàn bộ bài viết nào đó thì ta đặt thế này:
<style type='text/css '>
#post-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>
Kế đến chúng ta gắn ID cho tiêu đề bài viết, như sau:
<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title' expr:id='"title-" + data:post.id'>
[.......]
Và thiết lập CSS cho tiêu đề bài viết riêng như bên dưới:
<style type='text/css '>
h2#title-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>
Nếu muốn gắn ID cho phần ngày đăng bài viết thì tìm đến đoạn code này:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>
Và bắt đầu gắn lớp riêng cho tiêu đề bài viết bằng cách đổi nó trở thành:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header' expr:id='"date-" + data:post.id'>
<data:post.dateHeader/>
</h2>
</b:if>
Rồi tạo CSS như sau:
<style type='text/css '>
h2#date-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>
Và sau cùng, nếu muốn gắn ID cho phần footer của bài viết thì tìm đến đoạn code trông giống như sau:
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'> [.......] </p>
<p class='post-footer-line post-footer-line-2'> [.......] </p>
<p class='post-footer-line post-footer-line-3'> [.......] </p>
</div>
Rồi đổi thẻ <div class='post-footer'> trở thành:

<div class='post-footer' expr:id='"footer-" + data:post.id'>

Theo đó, định dạng CSS cho nó như sau:
<style type='text/css '>
div#footer-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>
Tựu trung lại, gom hết các phần CSS ở trên như sau:
<style type='text/css '>
#post-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
h2#title-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
h2#date-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
div#footer-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>
Như vậy bằng cách gắn ID riêng biệt cho từng bài viết thông qua việc tận dụng định dạng PostID sẵn có của blogspot, giúp chúng ta dễ dàng tùy biến CSS cho từng bài viết, như màu nền, font chữ, màu chữ, cỡ chữ, kiểu chữ…; hơn nữa cũng là cách chúng ta hiểu sâu thêm về cấu trúc XML của Template, đồng thời nâng cao trình độ “kung fu blogspot” của bạn.

{12 bình luậnAdd yours ?}

09:18:00, 11 thg 8, 2011

Chưa biết mình sẽ áp dụng lúc nào nhưng mình cứ bóc tem bài mới phát đã! Anh Hà trở lại với những bài viết rất hay!

Reply
09:24:00, 11 thg 8, 2011

Cái này rất hữu ích đấy LD, demo thử cho màu nền của bài viết đang đọc.

Reply
09:28:00, 11 thg 8, 2011

Theo em hiểu thì nó sẽ tùy biến 1 thành phần riêng nào đó trong weblog của mình! Dựa vào ID của thành phần đó để tùy biến! :51)

Reply
18:37:00, 11 thg 8, 2011

Vậy sẽ tạo được các bài viết nổi bật, đăc biệt riêng cho một sự kiện nào đó.

Reply
12:26:00, 12 thg 8, 2011

Lại là một bài viết vận dụng khéo léo XML của blogger :55)
Mình rất thích dạng thủ thuật này, thank bác Hà :63)

Reply
12:57:00, 12 thg 8, 2011

Anh rất thích trang blogtruyen của Ngankvn, nhưng hy vọng Ngankvn sắp tới sẽ thiết kế lại dao diện cho ngon hơn nữa nhé.

Reply
16:49:00, 12 thg 8, 2011

Cái này mới ghê anh Hà :58)
Đề nghị bác Ngân sửa lại giao diện cho ngon nhé :65)

Reply
16:53:00, 12 thg 8, 2011

Nói vui thôi chứ trang của Ngân mà giờ xây lại hơi bị mệt đó. :51)

Reply
22:40:00, 12 thg 8, 2011

- THỦ THUẬT HAY, nhưng theo mình chỉ cần chèn thêm dòng CSS:

/* CSS THEM: .banbe
----------------------------------------------- */
.banbe {
margin : 5px 5px 5px 5px;
padding : 1px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://4.bp.blogspot.com/-FgFtypwtZwo/TbxNM2ShXVI/AAAAAAAABmg/Fwp9X2AljCw/s1600/59.jpg.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
color:#000;
}

- Sau đó đặt nội dung vào bài viết
<div class="banbe">
nội dung bài viết
<div>

- Làm như zạy và thay thế tên banbe thành tên Nhãn, thay thế màu sắc nền, font chữ, lúc này blog sẽ có đa sắc, đa màu khiến người xem không nhàm chán.

Ví dụ với Nhãn bài viết:
Thủ Thuật Blog: thì màu nền đen, chữ trắng
Giải Trí: nền xanh lá, chữ vàng
Thông Báo admin: Màu nền xxx, màu chữ yyy.

- Đó chỉ là ý tưỡng, nhưng mình cũng chưa thực hành, để làm được sự đặc sắc đó bạn tham khảo thêm các 4r có màu sắc ưa thích và ăn cắp tông màu, or nếu bạn là dân desiger thì quá dễ.

Reply
23:20:00, 12 thg 8, 2011

hay ở chỗ anh Hà luôn mò ra được cách thao tác trên từng post một, cái này áp dụng cũng hay nhưng có vẻ hơi mệt mỏi, nhỉ

Reply
11:30:00, 14 thg 8, 2011

@ Bác Hà vs Bác Noct : thiết kế giao diện mình còn non và xanh lắm :D
Với lại những tính năng cần thiết của một trang truyện đôi khi làm mất thẩm mỹ :(

Reply
08:20:00, 9 thg 11, 2011

Hay wa, cái ni nên áp dụng đây.:5)

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