Trang chủ \10.12.17

Đánh số thứ tự cho Popular Posts

Bài viết gần nhất trên Duy Pham đã tận 3 năm, điều mà khi lập blog này mình không nghĩ lại "treo" lâu vậy. Phần vì Blogger thời điểm đó ít tính năng và dần bão hòa, phần vì công việc mình bận không chăm chút cho blog được. Ở bài viết này ngoài tạo cho Popular Posts một diện mạo và tính năng mới mình còn giới thiệu cho mọi người biết về XML Blogger với hàm resize ảnh và hiển thị số đếm. Ở bài viết Cool Popular Posts mình có dùng CSS để đánh số đếm, tuy nhiên nó không được "thân thiện". Như việc với 5 bài viết các bạn thấy CSS dài như vậy thì 10 bài viết CSS thật rườm rà. Hay như kích thước ảnh 72x72 chỉ được thu nhỏ bằng thuộc tính width, height của CSS. Với bài viết này việc đánh số đếm sẽ hiển thị dưới mã HTML, cũng như ảnh sẽ lấy kích thước ảnh theo đúng kích thước mình chọn.

Popular Posts

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#PopularPosts1 ul{margin:0;background:#fff;padding:0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:0;border:0;background:transparent;padding:10px 0 0 0}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin:0 10px 0 0;padding:0;width:50px;height:50px}
#PopularPosts1 ul li .numb{z-index:999;position:absolute;bottom:0;left:0;background:#ddd;opacity:0.8;width:20px;height:20px;line-height:20px;text-align:center;font-size:16px;color:#000}
#PopularPosts1 ul li .top0{background:#F4FA58}
#PopularPosts1 ul li .top1{background:#BDBDBD}
#PopularPosts1 ul li .top2{background:#FA8258}

Bước 2: Vào Chỉnh sửa HTML chọn Chuyển đến tiện ích PopularPosts1. Thay thế <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>...</b:widget> bằng đoạn mã dưới đây.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
 <b:widget-settings>
  <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
  <b:widget-setting name='showThumbnails'>true</b:widget-setting>
  <b:widget-setting name='showSnippets'>true</b:widget-setting>
  <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
 </b:widget-settings>
 <b:includable id='main'>
  <b:if cond='data:title'>
   <h2><data:title/></h2>
  </b:if>
  <div class='widget-content popular-posts'>
   <ul>
    <b:loop index='i' values='data:posts' var='post'>
     <li>
      <!---->&lt;span class='numb<b:if cond='data:i &lt; 3'> top<b:eval expr='data:i'/></b:if>'&gt;<!----><b:eval expr='data:i + 1'/><!---->&lt;/span&gt;<!---->
      <b:if cond='data:showThumbnails'>
       <a expr:href='data:post.href' rel='bookmark'><img class='item-thumbnail' expr:alt='data:post.thumbnail ? data:post.title : "no image"' expr:src='data:post.thumbnail ? resizeImage(data:post.thumbnail,50,"1:1") : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JJ_CbmxP74f5e43k-Od8yJ1ve_x9UarWrDcT39qR0hzXnxQG-sBbFgdwOMylVC4sNYQnq86KT7qMyB-jwxQxofTfMpbF8GHV4o6lo7sYI2Ipk6yCB4yPqW5FKvyU6NNZsYDMKw2TaRS-/s50/no-image.png"'/></a>
      </b:if>
      <a expr:href='data:post.href' expr:title='data:showSnippets ? data:post.snippet : data:post.title' rel='bookmark'><data:post.title/></a>
      <b:if cond='data:showThumbnails'>
       <div class='clear'/>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div>
 </b:includable>
</b:widget>

Đối với vòng lặp <b:loop> khi gán giá trị index='i' chúng ta sẽ tạo bộ đếm mà khi cần gọi dùng data:i để đưa số đếm ra. Ngoài ra có thể dùng với các phép toán (+), (-), (x), (:) và so sánh để viết thuật toán khi cần.

resizeImage là một hàm thay đổi kích thước ảnh rất hay của Blogger, mình sẽ giới thiệu chi tiết hơn vào những bài viết sau.

Sau một thời gian dài quay lại mình thấy Blogger có nhiều hàm XML mới rất hay khiến mình có cảm hứng viết tiếp những thủ thuật khác.

Hướng dẫn thủ thuật Blogger, Blogspot

44

Nhận xét
1

Chờ đợi bài tiếp theo :(

Reply Xóa nhận xét
4

Temp mới Blogger đẹp mà hiện đại mà bác

Reply Xóa nhận xét
5

Bác làm cái comment form này trong suốt thế nào thế?

Reply Xóa nhận xét
6

Mai kia hướng dẫn nhé bác

Reply Xóa nhận xét
43

Hướng dẫn đi bác! :D
Có nhiều blog hướng dẫn nhưng em làm toàn bị lỗi :(

Reply Xóa nhận xét
8

hóng admin hướng dẫn cập nhật form cmt bản mới cho blogger :v

Reply Xóa nhận xét
7

Lâu quá mới có bài... hay đấy...

Reply Xóa nhận xét
9

Xin lỗi bác vì cái comment không liên quan, em đọc bài này mà khó hiểu quá, liệu bác có thể cho ra bài về đề tài này?

Cảm ơn bác, chúc Giáng Sinh vui vẻ nhá :D

https://www.kompiajaib.com/2017/12/kini-blogger-sudah-mendukung-https.html

Reply Xóa nhận xét
10

Có rồi đấy bác :D

https://www.bacsiwindows.com/2017/12/blogger-chinh-thuc-ho-tro-giao-thuc-bao-mat-sll-cho-ten-mien-tuy-chinh.html

Reply Xóa nhận xét
11

Nó thêm giao thức https cho tên miền tùy chỉnh tương tự như tên miền blogspot mặc định trước đây ấy bác. Một số widget như recent comments, recent posts, related posts... cần sửa code để tương thích theo đấy, e lười update :D

Reply Xóa nhận xét
12

Hồi trước em có dùng SSL của Cloudflare, giờ muốn thay namesevers về mặc định thì phải làm sao bác ui?

Làm mấy ngày nay mà nó không https ở bài viết

Cảm ơn bác

Reply Xóa nhận xét
13

Bác làm ngược với hướng dẫn để xóa name server đi xem

Reply Xóa nhận xét
14

Giờ cách vào name server như thế nào em cũng bó cẳng, bên bán tên miền ngưng hoạt động rồi. Hồi xưa toàn nhờ họ làm giúp. Ahihi

Reply Xóa nhận xét
15

Làm cái template khác cho oách đi pác

Reply Xóa nhận xét
17

3 năm mới ra 1 bài viết :"> Lâu quá bác Duy ơi :D

Reply Xóa nhận xét
20

Chào mừng bác Duy đã trở lại với blogger. Hy vọng sự trở lại này của bác sẽ lợi hại hơn xưa! Góp thêm cho anh em Blogger có nhiều kiến thức. Nhớ lúc trước chỉ có 1 số blogger nổi tiếng như Duypham, namkna, traidatmui, ngocha... nhưng lúc đó blogger sôi nổi lắm. Những comment luôn tập trung về nội dung cần trao đổi.
Còn bây giờ, lũ "trẻ trâu" "sờ ta" "sờ nó" gì đó chủ yếu đi vào comment cướp comment đầu thôi. Nhiều lúc không biết "chúng" làm thế để làm gì nữa! Đọc mà muốn lộn cả ruột gan, chỉ muốn tống cho chúng vài bạt tai!.

Reply Xóa nhận xét
21

a Duy Phạm ko biết năm nay bao nhiêu tuổi rồi?

Reply Xóa nhận xét
22

Mình bia 33 rồi :D

Reply Xóa nhận xét
23

Vậy là cựu của cựu Blogger rồi :v

Reply Xóa nhận xét
24

Lâu h chưa có bài mới luôn hả a?

Reply Xóa nhận xét
Nặc danh 29/6/18 01:37
25

hi.
Chào anh duy bài viết của anh tuyệt quá. Cảm ơn anh vì bài viết .
Tiện anh cho e hỏi cái chỗ này 1 tý .
Làm thế nào để thêm 1 phần tử class hoặc id cho từng link trong tiện ích ***Danh sách liên kết(Link list)***

Reply Xóa nhận xét
26

Thêm được class bạn nhé, còn id thì có thể theo kiểu #id1, #id2. Bạn tìm tới widget id='LinkList1' trong thẻ lặp b:loop bạn thêm class vào tag li. Còn thêm id thì phức tạp hơn chút.

Reply Xóa nhận xét
28

Hê lố bác Duy,
Em xin hỏi ngu tí: mỗi lần vào blogspot nó hay tự bật hỏi tính năng dịch (Google Translate), có cách nào để nó khỏi hiện lên không bác?

Cảm ơn bác.

Reply Xóa nhận xét
29

"resizeImage là một hàm thay đổi kích thước ảnh rất hay của Blogger, mình sẽ giới thiệu chi tiết hơn vào những bài viết sau"

Thực hiện điều này đi Duy, chắc nhiều anh em cũng đang rất mong mỏi những thủ thuật do Duy viết!

Mình thì cứ lâu lâu vào đây xem có bài mới không :D

Reply Xóa nhận xét
32

Sắp được 1 năm chưa có bài mới rồi :D

Reply Xóa nhận xét
30

Chào bác Duy và các ae blogger.
Các Bác giúp em với. Em xin được 1 temp blogspot bán hàng trên mạng, temp free ạ. Nhưng hình thumb ở trang nhãn nó mờ quá, có bác nào biết giúp em với. Em gà quá ko biết chỉnh chỗ nào ạ. Em có hỏi chủ cũng nói là temp xin nên cũng ko biết luôn. Cảm ơn các bác.
Demo nó đây ạ: www.otokienanh.ga
Các bác vào nhãn xem giúp em nhé.

Reply Xóa nhận xét
31

Ảnh thumb Youtube mặc định có 120x90px nên khi bạn chọn size to hơn nó vỡ ảnh. Bạn thay đoạn data:post.thumbnailUrl ở code auto readmore thành data:post.firstImageUrl là được. Vì không rõ code js trong temp bạn nên mình chỉ chung chung vậy :D

Reply Xóa nhận xét
33

Hay quá bác ơi! Cảm ơn bác Duy nghìn lần nhé. Sao comment của bác không có nút like nhỉ. Em thấy 1 số blog khác có mà.

Reply Xóa nhận xét
34

Hi bác Duy, giúp em tí tì ti
Trong blogspot có nên thay:
<script type='text/javascript'> </script> -> <script> </script>

<style type='text/css'>
</style>
thành
<style>
</style>

Em có tìm hiểu trên mạng nhưng đọc chả hiểu gì, người ta toàn viết để cho người có chuyên môn đọc,

Cảm ơn bác nha <3

Reply Xóa nhận xét
35

Bỏ cái type= đi thôi bác. HTML 5 rồi mà

Reply Xóa nhận xét
36

Bác Duy giúp em chỉnh hình thumb của bài viết liên quan cho rõ hơn được không? Sao nó mời quá bác ạ.
Bác xem giúp em với nhé.
https://www.otokienanh.ga/2018/11/chevrolet-vivant-cdx-at-2008-xe-hop-7.html
Cảm ơn bác nhiều nhiều...

Reply Xóa nhận xét
37

Nguồn từ feed mặc định ảnh thumb YouTube là 120x90 rồi. Mình đặt lại css cho ảnh này về 120x90 px cho khỏi vỡ ảnh.

Reply Xóa nhận xét
38

Dạ cảm ơn Bác Duy ạ. Nhưng đặt lại thì có vẻ nhỏ quá. Vậy không còn cách nào làm cho ảnh rõ hơn được nữa ạ!. Em đọc trên mạng thấy có code javascrip gì đó đổi \s72-c-k-no\/ gì gì đó, em không hiểu nên không biết áp dụng.
"

Reply Xóa nhận xét
40

Ảnh tự up Blogger thì thay kích thước được, còn YouTube thì k bạn ạ

Reply Xóa nhận xét
39

Bác Duy có bài nào hướng dẫn tạo 1 template blgger bán hàng không ạ? Các thủ thuật về template tin tức thì nhiều mà temp về bán hàng không có.
Hoặc Bác có tài liệu nào nới về cách tạo template bán hàng thì share cho em với.
Em muốn tự tạo 1 template của riêng mình chứ xin của người khác em hay bị dính mã độc đã được mã hóa nên không biết đường chỉnh sửa.
Cảm ơn bác nhiều ạ!

Reply Xóa nhận xét
41

Chào bác Duy. Hôm nay em nhờ bác giúp em một vấn đề nữa nhé.
Chả là em mới xin được 1 template bán hàng trên mạng temp tinhdau đó bác. Nhưng vì là temp free nên chủ nhân ko hỗ trợ bác ạ. Bác giúp em cho nó hiển thị khung comment mặc định của blogger với. Hiện nay chủ temp cho comment của facebook vào ẩn đi phần comment mặc định của blogger luôn rồi mà em chẳng biến đường nào cho hiện lại cả. Bác vào trang này tìm cách giúp em với nhé.
Cảm ơn bác nhiều, có dịp em sẽ hậu tạ bác nhé!!!
https://hnqa.blogspot.com/2017/01/tivi-led-panasonic-43-inch-th-43d410v.html

Reply Xóa nhận xét
42

Bác Duy ơi, bác biết cách nâng cấp template cũ lên bảng mới không?

Reply Xóa nhận xét

Đăng nhận xét

Cancel