• 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

Ghép 2 tiện ích Popular Posts với nhau

31
17/08/2011

Tiện ích Bài đăng phổ biến (Popular Posts) rất quan trọng đối với blogspot, nó giúp gây sự chú ý của độc giả, giúp dễ tìm đọc những bài viết nổi bật nhất trong tuần, trong tháng hoặc toàn thời gian đồng thời tăng cường traffic cho blog của bạn.

Ngoài cách bố trí các bài viết phổ biến theo chiều nằm ngang, mình sẽ giúp các bạn một cách bố trí khác và có phần lạ lẫm, đó là ghép 2 tiện ích Popular Posts lại với nhau; theo đó sẽ tạo định dạng bài đầu tiên có ảnh đại diện và tiêu đề bài viết, các bài còn lại hiển thị danh sách tiêu đề bài viết, kết hợp thuộc tính title là đoạn trích dẫn bài viết (snippet). Định dạng này không thể thực hiện được trên một tiện ích Popular Posts riêng biệt, vì thế ý nghĩ ghép 2 tiện ích đã giúp mình thực hiện thành công thủ thuật này. Bạn có thể xem Demo trên trang chủ của Thủ thuật Blogger.

Nào, chúng ta cùng 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 nào đó mà bạn muốn bố trí tiện ích này gần với nó, sau đó đặt sau thẻ đóng </b:widget> này bằng đoạn code bên dưới:

<b:widget id='PopularPosts101' locked='false' title='Bài xem nhiều' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li><div class='PPcontent'>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<div class='item-thumbnail'>
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
<b:else/>
<img class='item-nothumb' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://3.bp.blogspot.com/--s-CisdXjz8/TgrlZsE63hI/AAAAAAAAAX8/ytAMvwLyL9Q/s1600/no-image.png'/>
</b:if>
</div>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a> <g:plusone expr:href='data:post.href' size='small'/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</div></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
<b:widget id='PopularPosts102' locked='false' title='Bài đăng phổ biến' type='PopularPosts'>
<b:includable id='main'>
<!--
<b:if cond='data:title'><h2><data:title/></h2></b:if>
-->
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li><div class='PPcontent'>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</div></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Chú ý dòng <g:plusone expr:href='data:post.href' size='small'/> là mình khuyến mãi thêm cái nút G+ trên tiêu đề bài viết đầu tiên, muốn nó hiện thì thêm đoạn code sau đây trước thẻ </body>.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>

Nếu không thích hàng khuyến mãi này thì bạn có thể xóa nó đi nhé. :51)

Bước 2. Đặt code CSS dưới đây vào trước dòng ]]></b:skin>.
#PopularPosts101 .popular-posts ul{list-style-type:none;margin:0;padding:0}
#PopularPosts101 .widget-content ul li{margin;border-bottom:1px dotted #DDD}
#PopularPosts101 .item-thumbnail{padding-left:5px}
#PopularPosts101 .item-title{padding:18px}
#PopularPosts102 ul li a{color:#069;text-decoration:none;background:url(http://bp2.blogger.com/_Zuzii37VUO4/R94r_03jkfI/AAAAAAAACrE/fh5TKfYfd5E/s1600/arrow.gif) no-repeat left 5px;padding-left:20px;display:block;margin:0;float:left}
Lưu Template.

Bước 3. Vào Page Elements, chỉnh sửa tiện ích có tiêu đề Bài xem nhiều, hiển thị dạng All time, chọn image thumbnail, snippet và chỉ hiển thị 1 bài viết. Tiếp tục chỉnh sửa tiện ích có tiêu đề Bài đăng phổ biến, hiển thị dạng Last 7 days, chọn snippet (không chọn thumbnail) và cho hiển thị 5-7 bài viết. Làm như thế này để tránh trường hợp bài viết phổ biến thứ nhất có ảnh đại diện lặp lại ở danh mục các bài viết phổ biến không có ảnh đại diện do sử dụng đến 2 tiện ích Popular Posts.

{31 bình luậnAdd yours ?}

09:41:00, 17 thg 8, 2011

quá đẹp, :53)

Reply
15:18:00, 17 thg 8, 2011

Phù, vừa mới hoàn thành 90% Template đầu tiên, chỉ còn mấy cái râu ria nữa là finish. Mong ngày công bố quá xá. :51)

Reply
15:30:00, 17 thg 8, 2011

Template đầu tiên sẽ dành tặng Author đầu tiên đạt 10 bài viết và một độc giả có bài đánh giá (review) hay nhất, bài đánh giá do ban giám khảo là các tác giả của TTB bầu chọn. Tất nhiên phiên bản dành cho độc giả sẽ có tùy biến cho khác với phiên bản của Author để tránh đụng hàng. :67)

Reply
16:59:00, 17 thg 8, 2011

À,về cái temp giúp mình làm nó "nóng bỏng" hoặc "ấm áp" chút nhé.Blog mình nó phải thế mừ.Chạy vù vù thìtốt,giao diện pro nữa càng tốt

Reply
18:54:00, 17 thg 8, 2011

Không biết phong cách template của a.Hà là ntn đây,:71) wait...

Reply
19:50:00, 17 thg 8, 2011

Hy vọng là Temp của bác Hà sẽ có bố cục độc đáo, tính năng hấp dẫn, quan trọng là phải "lạ". Chứ chỉ trang trí bằng css thôi e ko khoái lắm :53). Công nhận bác là người có tâm huyết với blogger thật, bận rộn vẫn ko quên dành thời gian viết bài và trả lời comment, hâm mộ bác ở điểm này :55)

Reply
20:22:00, 17 thg 8, 2011

Phong cách của mình là load nhanh, đơn giản mà vẫn đẹp, tất nhiên có cái lạ.

Reply
20:32:00, 17 thg 8, 2011

Một chút chờ đợi, một chút tò mò, chẳng biết template hình dáng sẽ ra sao? :51)

Reply
20:48:00, 17 thg 8, 2011

sao cả ngày hôm nay em vào post bài không dc là sao nhỉ

Reply
20:49:00, 17 thg 8, 2011

@Phim Online Mạng hôm nay hình như sao ấy, mình cũng rất khó khăn trong việc comment.

Reply
22:09:00, 17 thg 8, 2011

Có ai ở đây không,chỉ giúp mình cách đưa cái Menu về chỗ cũ với

Reply
22:17:00, 17 thg 8, 2011

Chỗ cũ là chỗ nào thế little flame.

Reply
22:22:00, 17 thg 8, 2011

Mình xóa bỏ mấy page cái cũ(vì không cần nữa) rồi nó xuống đó luôn

Reply
22:31:00, 17 thg 8, 2011

Vào Edit Template >> Expand Widget templates. Dùng từ khóa PageList1 tìm đến tiện ích Pages xóa hết cái code liên quan tới nó đi là hết ý mà.

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

No, mình không xóa mà làm thế nào để nó về chỗ cũ thui,chỗ cũ không có section,à chỉ luôn giúp mình cách xóa chỗ:"được cung cấp bởi Blogger" với

Reply
22:55:00, 17 thg 8, 2011

Xóa cái tiện ích Attribution1 là hết "được cung cấp bởi Blogger". Menu muốn về chỗ cũ là về đâu về đâu e ơi. Xỉn mất rồi.

Reply
23:00:00, 17 thg 8, 2011

Lưu ý nếu trong Template có code

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Thì phải đổi thành

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

Rồi vào Page Element là có thể xóa triệt sản nó luôn. :51)

Reply
23:06:00, 17 thg 8, 2011

Cái Menu:Trang chủ,Liên lạc...bây giờ nó đang ở bên chỗ :"BÀI XEM NHIỀU 7 NGÀY QUA",cậu chỉ cách đưa dùm về chỗ bên trên cái Menu :Nối Lửa cho đời ...
Cảm ơn nhiều nhé

Reply
23:11:00, 17 thg 8, 2011

Đúng là dễ xỉn quá, thì vào Page Elements kéo nó xuống dưới chỗ cũ đó đi, đổi Template khác xài cho nó đã,

Reply
23:15:00, 17 thg 8, 2011

Haizzzzzzzzzzzzz

Reply
23:25:00, 17 thg 8, 2011

Cái menu đó có thể kéo đi chỗ khác dc mà. Ko co section vẫn kéo về dc. :51)

Reply
23:29:00, 17 thg 8, 2011

OK,được roài,công nhận mềnh ngu có đẳng cấp ghê

Reply
09:46:00, 18 thg 8, 2011

Hài blogger từ hôm qua tới giờ không vào gửi, chỉnh sửa bài đc, có phải nó bảo trì không nhỉ bác Hà

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

Chắc là thế. Mình làm đủ mọi cách vẫn ko post bài dc. Nhưng mình có 3 nick, 2 nick post bài không dc, còn môt nick vẫn post bài bt. Lạ quá

Reply
23:02:00, 18 thg 8, 2011

Đến tận bây giờ vẫn chưa post bài được, mình thử cả hai nick, sau đó phát hiện ra vào blogger thử nghiệm post bài vô tư, bó tay, chắc nó định chuyển sang dùng cái mới rồi

Reply
23:14:00, 18 thg 8, 2011

Có thể đang thử nghiệm tính năng gì đó, mỗi lần bị vậy cứ vào Blogger in Draft sẽ k sao. Mà mình đâu có bị vậy hôm nay hè, dùng FF k bị, dùng IE thì bị, IE cùi bắp.

Reply
23:18:00, 18 thg 8, 2011

Mình dùng ff mà có bao giờ dùng cái anh ie dở hơi đâu, sao lạ nhỉ, có chỗ bị chỗ không, giờ thì đành dùng Draft thôi

Reply
00:13:00, 19 thg 8, 2011

em cũng bị ko post bài được, cái form post bài cứ xoay vòng vòng...lúc đầu cứ tưởng mạng yếu

Reply
00:17:00, 19 thg 8, 2011

Anh cũng vậy nè em :51)

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

choy lun tt ni.hyhy :51)

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