• 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 đăng phổ biến bố trí chiều ngang

47
14/08/2011

Các bạn có thể thấy tại trang chủ của Thủ thuật Blogger có một list 5 bài viết nóng nhất trong tháng được bố trí theo chiều ngang. Tiện ích này được hình thành từ ý tưởng thiết kế một tiện ích riêng tặng cho bạn Nguyễn Đức, là một tác giả vừa gia nhập Thủ thuật Blogger. Ban đầu mình còn nghĩ sẽ tạo thêm hiệu ứng trượt ngang cho tiện ích này, nhưng rồi mình không phát triển ý tưởng này vì vốn dĩ mình không thích các hiệu ứng rất tốn tài nguyên, hơn nữa tiện ích này sử dụng bản gốc tiện ích Popular Posts chỉ hiển thị tối đa 10 bài đăng nên hiệu ứng trượt có thể không cần thiết. Nhờ ý nghĩ về quà tặng cho các tác giả đã gia nhập Thủ thuật Blogger mà mình có thêm cảm hứng mới, rốt cuộc đã cho ra đời thêm một tiện ích như vậy, các bạn có thể chiêm ngưỡng và bắt đầu cài đặt cho blogspot của mình nếu thấy cần thiết.




Tiện ích này cần được đặt dưới phần Header và trên phần content-wrapper vì thế chúng ta cần tạo thêm một phần crosscol-wrapper nằm giữa 2 thành phần nói trên. Về việc tạo riêng crosscol-wrapper cho blogspot, bạn có thể đọc thêm ở bài viết này. Ở đây mình đã tích hợp gắn tiện ích Popular Posts vào phần crosscol-wrapper này rồi.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates.

Tìm dòng <div id='content-wrapper'> và đặt trước nó với đoạn code bên dưới.
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' preferred='yes'>
<b:widget id='PopularPosts200' locked='false' title='' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<!-- Horizontally Styled Popular Posts widget by www.thuthuatblogger.info -->
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<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:src='data:post.thumbnail'/>
</a>
<b:else/>
<a expr:href='data:post.href' target='_blank'>
<img src='http://4.bp.blogspot.com/-ASKpcq8jY0M/Tkf1rc-ANWI/AAAAAAAAAio/sIZDP8x4FZY/no-image.png'/>
</a>
</b:if>
</div>
<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>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div style='clear: both;'/>
Bước 2. Đặt đoạn code CSS bên dưới vào trước dòng ]]></b:skin>.
#crosscol-wrapper{margin: 0 auto; padding:0}
#PopularPosts200{width: 100%; margin: 0px auto; padding: 5px 0px}
#PopularPosts200 h2{display:none}
#PopularPosts200 .widget-content{float:left;margin:0; padding:0}
#PopularPosts200 .widget-content ul {margin: 0 auto;padding:0;width: 100%; list-style:none}
#PopularPosts200 .widget-content ul li {margin:0 6px 10px 6px;width: 175px;padding:10px;height: 100px; overflow:hidden;list-style:none; float:left; border: 1px solid #DDD;}
#PopularPosts200 .item-content{font-size: 14px; text-align:left; padding: 5px 10px}
#PopularPosts200 img{margin:0;padding:0; background: #fff; float:left;width:65px;height:65px;border: 1px solid #DDD}
#PopularPosts200 .item-title{line-height:1.3em}
Lưu Template là xong. Sau đó có thể vào Page Elements chỉnh sửa tiện ích để chọn bài phổ biến theo tuần, theo tháng hoặc toàn thời gian. Riêng về CSS nói trên, mình để ngỏ để các bạn tùy ý tùy biến sao cho phù hợp với giao diện blogspot của bạn. Nếu gặp vấn đề gì (đối với newbie) xin vui lòng lưu lại thông tin ở phần Comments để mình sắp xếp giải đáp.

{47 bình luậnAdd yours ?}

05:24:00, 15 thg 8, 2011

Lại thủ thuật hay đây :55)

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

Một thủ thuật nữa của anh Hà khá hay! :55). Theo anh Hà thì em có nên thay slide bằng tiện ích này ở blog của em ko?

Reply
08:26:00, 15 thg 8, 2011

Nếu LD muốn nhẹ hơn thì nên thay chứ, những bài viết phổ biến nhất nên đặt theo kiểu này rất tăng cường traffic.

Reply
08:31:00, 15 thg 8, 2011

Em sẽ thử nghiệm xem sao? Tiện ích slide để đã khá lâu rồi, chắc cũng nên thay :53)

Reply
08:39:00, 15 thg 8, 2011

Đoạn code trước content-wrapper nếu mình muốn chèn trực tiếp vào Page Elements luôn thì phải ntn anh? Trên thanh sidebar của em đã có tiện ích bài viết xem nhiều thì có cần bỏ khi dùng thủ thuật này?

Reply
08:48:00, 15 thg 8, 2011

code XML phải đặt ở chế độ Edit HTML chứ Page Elements sao được e. Nếu có tiện ích bài xem nhiều thì để ở trang item, còn trang chủ thì đặt cái này. Có thể chọn bài phổ biến theo tuần, theo tháng để tạo sự khác biệt cho tiện ích Popular Posts.

Reply
08:51:00, 15 thg 8, 2011

Nếu muốn tiện ích này chỉ hiển thị ở trang chủ thì đặt code bước 1 thế này:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Code ở bước 1.
</b:if>

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

em muốn thủ thuật này nó hiện nhiều hàng ngang thì làm sao bác. Khoảng 2 3 hàng gì đấy

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

Nếu 2 hàng thì vào Page Elements edit cho hiển thị 10 bài, mỗi hàng sẽ có 5 bài. (nó sẽ tự động phân hàng mà). Nếu muốn 3 hàng (mỗi hàng 3 bài) thì chỉnh width: 175px cho rộng thêm để đẩy thành 3 hàng, nói chung là tự động rồi.

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

Cậu chưa add nhưng Template đã có sẵn cái crosscol rồi, phải xóa nó đi rồi mới cài đặt tiện ích này: Tìm đến đoạn code này nhé:

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<div class='crosscol section' id='crosscol'></div>

</div>

Và xóa đoạn code liên quan crosscol dưới thẻ <div id='content-wrapper'>.

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

khá gọn và nhẹ, cái này mình sẽ ngâm cứu sau

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

Anh Hà xem giúp em sao phần tiêu đề của bài viết bị che lấp 1 khoảng vậy ạ! Ở site em nha anh!

Reply
13:26:00, 17 thg 8, 2011

Ảnh đây anh: https://lh5.googleusercontent.com/-qMLCQ0XfnIU/Tkte2n0_J0I/AAAAAAAABwg/mEcDqOR-KC8/loi.png. Nguyên nhân là do em để padding ở ảnh anh ạ!

Reply
13:53:00, 17 thg 8, 2011

Không phải do padding ảnh mà do tiêu đề bài viết quá dài, mà ở đây cái li có height: 100px mặc định, do đó em phải chỉnh số 100 thành số lớn hơn để tương xứng thôi mà. Lưu ý k nên đặt tiêu đề bài viết quá dài k tốt cho SEO.

Reply
14:36:00, 17 thg 8, 2011

Lúc trước em có đặt tiêu đề ngắn nhưng mà theo em tìm kiếm trên google thì nếu tiêu đề bài viết dài thì tìm kiếm sẽ dễ dàng hơn!

Reply
21:34:00, 17 thg 8, 2011

Mấy ngày rồi không lên được, hi, em lấy xài nha :54)

Reply
21:39:00, 17 thg 8, 2011

Cái này là tặng e mà. Cái Template đầu tiên sẽ tặng Peace, cái thứ 2 đến lược e đấy.

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

Pác Hà chăm sóc + tác viên "béo" quá :55)

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

@Huỳnh Nhật Hà Em cứ muốn nghe câu này hoài :51)

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

Không phải chăm sóc mà các author đáng được như thế vì những nỗ lực và sự tin cậy.

Reply
22:34:00, 18 thg 8, 2011

muốn giới hạn cái tiêu đề nào dài quá thì đằng sau có dấu "..." được ko bạn ^^ , như của tiện ích read more ý

Reply
19:21:00, 23 thg 8, 2011

Bác Hà ơi làm sao cho cái tiêu đề (PopularPosts) nằm dưới image vậy Bác hà

Đại đa số là chỉ tiêu đề nằm ngang mà không có nằm dưới image, Bác hướng dẫn cho em nha cám ơn bác!

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

Bác Hà ơi cứu em với sao em cứ bị No image vậy nà huhuhuhu! khóc

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

Karaoke cua tui: Thêm dòng <div style='clear: both;'/> hoặc thẻ <br/> vào trước dòng <div class='item-title'>

Reply
16:29:00, 24 thg 8, 2011

Cám ơn Bác Hà Hiện thời em đang tháo nó xuống vì em dang bị No image,
Để tự post tự up hình thử rồi mới cho cái thủ thuật này lên đầu trang xem sao?
từ ngày biết Blog/Web của Bác thì Bác thay Template lần này là lần thứ tư, đáng lý ra số comments của Bác phải Có Sitelink rồi nhưng vì thay hoài hiện giờ vẫn chưa có Sitelink, không biết tại IE của em hay Temp của bác Mà em test trên IE 7/8 điều bị lỗi trên Menu nó chãy xệ xuông Populer của bác nên không thấy những dòng chữ Menu, Hiện thời em không biết là tại IE trên comp của em hay Code của Bác? vì có một số IE 6/7/8 trên Comp mình thì nhưng cũng IE đó mà trên Comp khác lại không lỗi thế mới đau.

Reply
16:36:00, 24 thg 8, 2011

Chưa có sitelinks k phải do mình thay Template là do thay domain đó, từ lúc xài .blogspot.com đến .tk rồi bây giờ .info nên có sự gián đoạn (nay thì ok rồi, bước sang giai đoạn phát triển bền vững, tạm hài lòng với Template mới này). Cái menu này good trên FF và Chrome, còn cái IE cùi bắp ấy mình chưa fix vì k xài IE nữa, mà theo stat thì người dùng IE để truy cập thuthuatblogger rất ít. Có lẽ IE sẽ sớm die vĩnh viễn rồi nếu k có sự cải thiện.

Reply
16:41:00, 24 thg 8, 2011

Đúng đúng bác thay 3 cái Domain Chứ nhiêu :71)em tưởng có mình em là không cho các Blog nằm yên ai nhè Bác Giống em kakakaka

Reply
22:23:00, 26 thg 8, 2011

Anh Hà cho em hỏi tiện ích này mình có thể chỉ định hiển thị bài viết với nhãn nào đó không? Vì có những bài viết em không muốn đưa vào tiện ích này mà view của nó lại nhiều anh ạ!

Reply
22:45:00, 26 thg 8, 2011

Được chứ e, a đã áp dụng trường hợp này cho Thuthuatblogger đó kìa. Hồi nào rảnh sẽ hướng dẫn nhé.

Reply
23:42:00, 26 thg 8, 2011

Vâng, em cảm ơn anh trước nhé!

Reply
20:59:00, 1 thg 9, 2011

@Huỳnh Nhật HàKhông hiện ở trang chủ mà chỉ hiện ở bài viết. Cũng nằm ngang nhưng ở dưới bài viết đang xem thì sao anh Hà.

Reply
09:51:00, 2 thg 9, 2011

Mình vào Google gõ tìm một vài thủ thuật cho blog thì biết đến trang của bạn, thấy có nhiều thủ thuật hay ghê!^_^
Nhân đây mình muốn hỏi, với thủ thuật trên nhưng mình muốn chỉ hiện cái ảnh Thumbnail (size140x140, có Tooltip khi rê chuột trên ảnh) và đặt nó ở dưới Footer thì phải làm như thế nào?
(Thú thật là mình đã mày mò nhưng không theo ý muốn cho lắm! :D)

Bên blog của bác TienNguyen có thủ thuật này: http://www.vnblogspot.com/2011/05/tao-random-post-widget-de-giup-blog.html
Bạn có thể chỉnh lại cho nó hiển thị theo nằm ngang được không? Trước đó đã có người hỏi nhưng không thấy TienNguyen trả lời, nên mình mang sang đây hỏi cao thủ về code như bác!!!

Cảm ơn bạn trước!

Reply
11:19:00, 15 thg 9, 2011

@vnltueTrả lời ý 1: Muốn chỉ hiện cái ảnh Thumbnail (size140x140, có Tooltip khi rê chuột trên ảnh) và đặt nó ở dưới Footer thì phải làm như thế nào?

Dừng Code bước 1:

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' preferred='yes'>
<b:widget id='PopularPosts200' locked='false' title='' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<!-- Horizontally Styled Popular Posts widget by www.thuthuatblogger.info -->
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<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' expr:title='data:post.title' target='_blank'>
<img alt='' border='0' expr:src='data:post.thumbnail'/>
</a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img src='http://4.bp.blogspot.com/-ASKpcq8jY0M/Tkf1rc-ANWI/AAAAAAAAAio/sIZDP8x4FZY/no-image.png'/>
</a>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div style='clear: both;'/>
(chờ còm kế tiếp)

Reply
13:06:00, 15 thg 9, 2011

@vnltueCode Bước 2:

crosscol-wrapper{margin: 0 auto; padding:0}
#PopularPosts200{width: 100%; margin: 0px auto; padding: 5px 0px}
#PopularPosts200 h2{display:none}
#PopularPosts200 .widget-content{float:left;margin:0; padding:0}
#PopularPosts200 .widget-content ul {margin: 0 auto;padding:0;width: 100%; list-style:none}
#PopularPosts200 .widget-content ul li {margin:0 6px 10px 6px;width: 160px;padding:10px;height: 160px; overflow:hidden;list-style:none; float:left; border: 1px solid #DDD;}
#PopularPosts200 .item-content{font-size: 14px; text-align:left; padding: 5px 10px}
#PopularPosts200 img{margin:0;padding:0; background: #fff; float:left;width:140px;height:140px;border: 1px solid #DDD}


Nếu muốn đặt ở Footer thì đặt code Bước 1 trước thẻ <div id='footer'> hoặc thẻ <div id='footer-wrapper'>

Reply
14:28:00, 15 thg 9, 2011

Cảm ơn bác nhiều!
Đã làm thành công, chỉ tiếc cái hình Thumbnail chất lượng tệ quá, có cách nào lấy hình Thumbnail chất lượng cao không bác Hà?

Reply
16:02:00, 15 thg 9, 2011

@vnltueMuốn ảnh chất lượng cao thì đặt code này trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("PopularPosts200");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c\//gi, "");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Reply
17:46:00, 2 thg 10, 2011

mình không làm được code này trên blog của mình, mình đã xoá đi cái crosscol cũ, thì khi save code hiển thị ra được trang web, nhưng cái popular post nằm ngang nó bị lỗi (vẫn hiện bài) nhưng nó lại tạo ra 1 khoảng cách và 1 bố cục khác khiến website mình bị bể ..... bó tay

Reply
17:39:00, 23 thg 10, 2011

làm sao để thay đổi màu nền của nó đc vậy a hà?
post full!:3)

Reply
05:23:00, 30 thg 11, 2011

Bác Hà hướng dẫn chi nhiều thế,
tạo Tiện ích Bài đăng phổ biến,
pas CODE VÀO CSS là sẻ hiển thị như vậy rồi.

#PopularPosts1{width: 100%; margin: 0px auto; padding: 5px 0px}
#PopularPosts1 h2{display:none}
#PopularPosts1 .widget-content{float:left;margin:0; padding:0}
#PopularPosts1 .widget-content ul {margin: 0 auto;padding:0;width: 100%; list-style:none}
#PopularPosts1 .widget-content ul li {background: #fff; margin:0 2px 5px 2px;width: 165px;padding:5px;height: 80px; overflow:hidden;list-style:none; float:left; border: 1px solid #DDD;}
#PopularPosts1 .item-title{line-height:1.3em}
#PopularPosts1 img{border: 1px solid #DDD}
#PopularPosts1 .item-title a{font-family:Georgia, Serif;font-style:italic;font-weight: bold;color:#000;text-shadow: 1px 1px 3px #fff;text-decoration:none}
#PopularPosts1.item-title a:hover{color:#c22400;text-decoration:none}

còn đặt cho nó ở đâu thì tùy mọi người, miển là chổ đó có độ rộng bằng tiên ích là 910px

Reply
09:25:00, 6 thg 2, 2012

Anh Ha cho em xin cai yahoo dc ko .........

Reply
10:50:00, 17 thg 3, 2012

ko tìm thấy content-wrapper

Reply
20:51:00, 5 thg 9, 2016

Một thời dấu chân tối nào cũng in lên đây. Cái thời newbie, cái gì cũng hỏi :1) :3)

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