Tạo hiệu ứng bài đăng phổ biến (Popular Posts) cho blogspot

Các Widget Popular Post (hay tiện ích bài đăng phổ) mặc định của Blogger thì vô cùng đơn điệu, giờ bạn muốn xây dựng Widget Popular Post độc đáo và bắt mắt với người dùng theo một phong khác mới. Hôm nay windows2it sẽ giúp các bạn làm đều đó với 3 phong cách mà các blogger thường hay dùng nhất.

Đầu tiên bạn cần tạo một Widget Popular Posts/Bài viết phổ biến cho blog của mình (Nếu Blog bạn có rồi thì thôi)

Cách đơn giản, đầu tiên các bạn vào  Blog => Bố cục => Thêm tiện ích => Bài đăng phổ biến

Đọc thêm:


Tiếp tục chèn CSS sau vào HTML của Blog/Website bạn

Đầu tiên các bạn vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm kiếm ]]></b:skin>. Sau đó dán đoạn mã Code sau lên trên ]]></b:skin>Lưu mẫu lại.

Code theo phong cách 1:
Hiệu ứng Popular Posts nhiều màu sắc cho blogger

<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->  

Code theo phong cách 2:
Hiệu ứng mờ khi rê chuột

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:1px solid #6BB5FF;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Code theo phong cách 3:

Hiệu ứng mờ khi rê chuột và say tròn các số

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);   
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Kết luận: Các Code trên hoàn toàn sử dụng CSS, không sử dụng Javascript nên các bạn cứ yên tâm về tốc độ tải, cũng như độ thân thiện với SEO nhé.

Có vấn đề gì cứ để lại comment nhé @!
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

30 nhận xét:

  1. sao mình tìm không thấy dòng này "]]>" vậy bạn? Thanks bạn!

    ReplyDelete
    Replies
    1. chắc đây là trang của Bạn http://lean4vn.blogspot.com/ có lẻ dòng đó ko nằm liền kề với thẻ b:skin nên bạn tìm ko ra đó... Thực hiện thủ thuật này dòng này ]]> ko quan trọng___Bạn cần Paste đoạn Code trên vào trong Phần CSS của template của bạn là được :)

      Delete
    2. Thanks ban! Minh copy vao duoc roi, nhung mà ko có j thay đổi cả, vẫn như bản bình thường?

      Delete
    3. Mình mới kiểm tra CODE trang bạn xong nhưng ko thấy bạn thực hiện thủ thuật ((làm bị lỗi bạn đã xóa rồi chăn)__ Bạn vui lòng để lại cho mình xem thử nó bị lỗi gì....:)

      Chứ mình thấy IP Popular Posts bạn đúng rùi >>>Chỉ Paste Code vào đúng vị trí là nó hoạt động thui :)

      Delete
  2. Mình bỏ vào mà không nhận CSS là sao nhỉ

    ReplyDelete
    Replies
    1. phải nói là nhận, mà nó lại không ra như bản demo....lạ nhỉ.

      Delete
    2. Địa chỉ Blogspot bạn đâu cho mình xem quá tí ,,,, Nếu bạn ko muốn công khai thì bạn gửi Blogspot của bạn qua gmail để mình xem thử: [email protected] ... Chứ nói như thế này mình ko thể giúp bạn được :)

      Delete
    3. Mình đã gửi mail cho bạn rồi, bạn check rồi giúp mình với nhé! Cám ơn bạn nhiều

      Delete
    4. Đã trả lời rùi Bạn check gmail nhé @! :)

      Delete
  3. ad ơi sao blog mình add vao mà nó bị mất 1 phần làm sao chỉnh rộng ra tí vậy ad giúp mình vs thanks http://notebookmmo.blogspot.com/

    ReplyDelete
    Replies
    1. Có 2 cách để thực hiện:

      Cách 1: Auto đó là do cột sitebar của bạn thôi... do cột sitebar kích thước bạn nhỏ nên trông thấy vậy bạn chỉ cần cho kích thước cột sitebar rộng ra thì tự động nó rộng ra thôi....

      Cách 2: cố định kích thước bạn tìm dòng

      .sidebar .widget{
      clear:both;
      font-size:16px;
      line-height:26px;
      margin-bottom:25px;
      }

      Sữa thành:

      .sidebar .widget{
      clear:both;
      font-size:16px;
      line-height:26px;
      margin-bottom:25px;
      width:300px; (Sữa 300 px thành kích thước bạn muốn)
      }

      >>> lưu mẫu vậy là [email protected]!! :)
      >>> Còn chỗ nào ko rõ thì cứ để lại comment nhé @!

      Delete
    2. ok ad đả chinh lại dc rồi hj thanks ad

      Delete
    3. mà ad ơi sào cái hình trong khung của mình nó ko tròn mà nó méo thế nào ấy ad biết cách sửa lại ko ạ cảm ơn ad
      notebookmmo.blogspot.com

      Delete
    4. Cái này cũng có 2 cách sữa:

      Cách 1: Kích thước cố định:

      Xóa phần này:

      .sidebar .widget img {
      max-width: 80%;
      }

      và điều chình phần này:
      .PopularPosts img {
      margin-right: 5px;
      width: 90px; Sữa 90px thành kích thước bạn muốn
      height: 90px; Sữa 90px thành kích thước bạn muốn
      border-radius: 3px;
      }

      >>> height = width => hình tròn

      Cách 2: Chỉnh phụ thuộc

      .sidebar .widget img {
      max-width: 80%; đều chỉnh phần trăm cho phù hợp
      }

      .PopularPosts img {
      margin-right: 5px;
      width: 90px; Sữa 90px thành kích thước bạn muốn
      height: 90px; Sữa 90px thành kích thước bạn muốn
      border-radius: 3px;
      }

      Delete
    5. ad giỏi thật ấy hj thanks ad nhiều đả sữa và thành công

      Delete
    6. Bạn tìm hiểu thêm một tí kiến thức CSS là làm được ngay :)

      Delete
    7. còn chiều cao sao mình thu thấp lại ko dc nhỉ mình thêm height : ..px mà ko được

      Delete
    8. Mình chưa hiểu ý bạn... chiều cao chiều rộng bạn tùy biến được mà :)

      Delete
  4. đẹp lắm cơn anh nhìu lắm ạ

    ReplyDelete
  5. thường thường bài đăng phổ biến chỉ được tối đa 10 bài, giờ muốn nhiều hơn thì làm thế nào ad

    ReplyDelete
    Replies
    1. Chỉ tối đa 10 bài thôi... ko có cách nào vượt hơn 10 bài đâu bạn !!

      Delete
  6. bác ghé blog của em xem em áp dụng DEMO 3 mà bị thụt đầu vào khắc phục thế nào ạ
    https://foxnightcore.blogspot.com/

    ReplyDelete
    Replies
    1. Bạn sữa đoạn CSS này

      #PopularPosts1 li{
      position:relative;
      margin:0 0 10px 0;
      padding: 3px 2px 0 17px;
      left:-5px; >>> -5 thành 3
      width:285px; >>> 285 thành 361
      }

      và sữa cái này

      #PopularPosts1 ul li:before{
      content: counter(li);
      counter-increment: li;
      position: absolute;
      top: 50%;
      margin: -1.3em;
      height: 2em;
      width: 2em;
      line-height: 2em;
      font-size: 15px;
      color: #fff; /* text color of numbers */
      background: #FB8835; /* background color of numbers */
      border: .2em solid #fff; /* border color */
      -webkit-box-shadow: 0 8px 5px -7px #888;
      -moz-box-shadow: 0 8px 5px -7px #888;
      box-shadow: 0 8px 5px -7px #888;
      text-align: center;
      font-weight: bold;
      border-radius: 2em;
      position: absolute;
      left: 0; >>> 0 thành 16px
      transition: all .3s ease-out;
      }

      >>> lưu mẫu load lại template nhìn sẽ ổn hơn >>> Các vấn đề trên là do các đoạn CSS thui bạn muốn đẹp hơn chỉnh sữa 1 tí lại là xong :)

      Delete
    2. bạn ơi mình chỉnh lại rồi cơ mà cái màu nền xám nó tràn ra cả cái ô tròn số rồi :( fix thế nào ạ :D

      Delete
    3. với cả số thứ tự không nằm vào giữa ô tròn ạ ^^

      Delete
    4. Bạn sữa line-height: 2em; >>> line-height: 1.5em; Bạn vui lòng tự sữa giúp mình :P

      Delete
  7. Mẫu 1 thử ko được ad nhé

    ReplyDelete
  8. mình làm theo kiểu phong cách 1 ak, nhưng biểu tượng nó kg xoay khi rê chuột vào là sao bạn? mong bạn trả lời giúp.

    ReplyDelete
  9. Blog của em - nó không hoạt động ad ơi :(( khắc phục sao :( chỉ e với - Help

    ReplyDelete