• 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

Tiện ích Bài viết mới nhất có ảnh đại diện không dùng Javascript

11
29/01/2011

Lẽ ra lúc này tôi đã có thể nghỉ ngơi để chuẩn bị tất niên và đón tết Tân Mão, nhưng trước khi vui xuân, tôi cũng muốn tặng quý bạn đọc một món quà nhân dịp Tết cổ truyền của dân tộc Việt Nam. Món quà đó là tiện ích Bài viết mới nhất có ảnh đại diện không dùng Javascript (Recent Posts with Thumbnails Widget without Using Javascript).

Như các bạn biết thì để tạo một tiện ích Bài viết mới nhất có ảnh đại diện, chúng ta cần phải sử dụng đến Javascript để có thể tạo những tùy biến hoàn thiện cho tiện ích này. Tuy nhiên tôi có thể lợi dụng những tính năng sẵn có của Blogger để tạo ra tiện ích Bài viết mới nhất có ảnh đại diện không dùng Javascript, nhờ đó tiện ích được load nhanh hơn so với các tiện ích cùng dạng có sử dụng Javascript. Ở đây tôi sử dụng tiện ích BlogList (Danh sách Blog) của Blogger.

Bạn có thể xem Demo dưới đây.


Để tạo được tiện ích này, bạn cần đọc qua bài viết Tiện ích Bài viết mới nhất có ảnh đại diện sử dụng Blog List.

Bước 1. Trước tiên bạn hãy thực hiện theo bài viết nói trên. Sau đó vào Design >> Edit HTML chọn Expand Widget Templates.

Dùng từ khóa BlogList (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList1' locked='false' title='Bài viết mới nhất' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

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

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>
<!-- ảnh đại diện float về bên trái -->
<div class='RPthumbnail'>
<b:if cond='data:item.itemThumbnail'>
<!-- nếu bài viết có hình ảnh thì dùng -->
<img class='RPifthumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- nếu bài viết không có hình ảnh thì dùng ảnh riêng -->
<!-- ở đây ta đặt URL ảnh đại diện riêng -->
<img class='RPnothumb' src='URL_ảnh đại diện_mặc định'/>
</b:if>
</div>
<!-- tiêu đề bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a>
</div>
<!-- đoạn trích dẫn bài viết -->
<div class='RPsummary'><data:item.itemSnippet/></div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Bạn cần thay URL_ảnh đại diện_mặc định bằng URL đến ảnh đại diện mặc định cho trường hợp bài viết không có ảnh. Bạn có thể dùng ảnh riêng của bạn rồi upload lên chính Blogspot để lấy URL, hoặc bạn có thể dùng ảnh này.

Bước 2. Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.

.recentposts-ha ul{border-bottom:1px dotted #555;list-style-type:none;margin:0;padding:0}
.recentposts-ha ul li{background-color:transparent;border-top:1px dotted #555;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#123}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:50px}
.recentposts-ha .RPtitle a{color:#5CB3FF;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#CDE;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}
.recentposts-ha .RPsummary{clear:both;color:#999;font-family:Arial;font-size:12px;text-align:justify}

Lưu Template là OK.

Tùy biến: Nếu bạn muốn bố cục tiện ích này chỉ gồm tiêu đề bài viết, không có ảnh đại diện và đoạn trích dẫn, ngoài ra tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết (tức là khi rê con trỏ vào tiêu đề bài viết, bạn sẽ nhìn thấy nội dung đoạn trích dẫn bài viết), thì ở Bước 1, bạn dùng đoạn code dưới đây và ở Bước 2 bỏ đi đoạn code được đánh dấu màu đỏ.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>
<!-- tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Hy vọng quý bạn đọc hài lòng với món quà tất niên này.

Happy New Year and Everything to Your Liking! :55)    :66)    :68)

{11 bình luậnAdd yours ?}

12:55:00, 29 thg 1, 2011

khi nào bác làm cho tớ cái menu vậy tớ đang mong chờ đây

Reply
13:06:00, 29 thg 1, 2011

@Minh Quân Cái cậu cần lúc này là 1 Template ưng ý nhất, chứ k phải Menu. Có một cái nền nhà thật tốt thì mới có 1 cái nhà đẹp.

Tết tới nơi rồi mà, để qua tết tính đi cậu.

:51)

Reply
13:36:00, 29 thg 1, 2011

Cái này đúng là sáng tạo :55)

Mà theo em tiện ích Recent Post vốn hơi bị thừa, chỉ cần để bài đăng ở trang chủ nhiều nhiều là được rồi. Hay anh sáng tạo thêm Random Posts with thumbnail without js thử xem :51)

Reply
15:50:00, 29 thg 1, 2011

Recent Posts không thừa đâu Noct, nếu tùy biến trang chủ và các trang Label theo kiểu riêng thì đâu có thừa. Random Posts with thumbnail mà k xài javascript thì khó đấy, nếu luyện công quá sức là bị tẩu hỏa nhập ma đấy.

Reply
16:17:00, 29 thg 1, 2011

Cậu tính làm cho tớ cái template à

Reply
18:35:00, 29 thg 1, 2011

@Minh Quan : ko nhầm thì bác nói 2 tháng cũng dc mà :51) , có gì cứ để qua tết rồi anh Hà làm cho , chứ giờ đang không khí Tết nhất đến nơi rồi , phải ko anh Hà :51)

Reply
20:49:00, 29 thg 1, 2011

1 tháng 15 ngày đi , vụ làm template này căng lắm , chừng nào chưa có template ngon tớ chưa yên được :D

Reply
21:10:00, 29 thg 1, 2011

Linh nói đúng đấy, từ 27 AL bắt đầu nghỉ tết rồi, đến mùng 6 mới đi làm lại. Ăn tết cho thả ga đã chứ. :69)

Reply
21:31:00, 19 thg 2, 2011

Xin cảm ơn tác giả, bài viết rất hay. Nhưng mình thấy hình như đoạn tạo thumb ở bước 1 phải là thế này mới đúng


<div class='RPthumbnail'>
<b:if cond='data:item.itemThumbnail'>
<!-- nếu bài viết có hình ảnh thì dùng -->
<img class='RPifthumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- nếu bài viết không có hình ảnh thì dùng ảnh riêng -->
<!-- ở đây ta đặt URL ảnh đại diện riêng -->
<img class='RPnothumb' src='URL_ảnh đại diện_mặc định'/>
</b:if>
</div>


Mong tác giả kiểm tra lại.

Reply
22:48:00, 19 thg 2, 2011

Đúng rồi, cảm ơn bạn, lúc trước đăng bài là như thế, chắc 1 lần vào edit lại bài có thêm phần chú thích k cẩn thận làm cắt mất đoạn đó, do k chú ý nên thiếu.

Reply
16:24:00, 4 thg 3, 2011

anh ơi em muốn xoay ngang cái winget ra thì làm thế nào

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