Cách Thêm Popular Posts (bài đăng phổ biến) với hiệu ứng Đẹp Và Chuyên Nghiệp cho blogspot

Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ cách thêm tiện ích Popular Posts (bài đăng phổ biến) với hiệu ứng đẹp và chuyên nghiệp cho blogspot.
Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot

Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot
Cách Tạo Hiệu Ứng Popular Posts

CÁCH THỰC HIỆN

Bước 1: Vào Blog - Bố cục - Thêm tiện ích - Bài đăng phổ biến
Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot
Các bạn chọn 10 bài và đặt tên cho tiện ích xong lưu
Bước 2: Chèn đoạn CSS bên dưới trước thẻ ]]></b:skin>
/* CSS PopularPosts */
.left{float:left;text-align:left}
.right{float:right;text-align:right}
.center{text-align:center}
#PopularPosts1 ul{padding:0;margin-top:10px;counter-reset:popcount}
#PopularPosts1 ul li{position: relative; height: 60px; padding-left: 45px; line-height: 20px;}
#PopularPosts1 ul li:last-child{height:44px}
span.title-top{margin-top:-3px;font-size:15px;line-height:20px;float:left;max-height:40px;overflow:hidden}
#PopularPosts1 ul li:before{content:counter(popcount,decimal);counter-increment:popcount;text-align:center;list-style-type:none;position:absolute;display:inline-block;font-weight:600;top:0;left:0;border-width:1px;width:34px;height:34px;line-height:40px;font-size:16px;background:#f1f1f1}
#PopularPosts1 ul li:after{content:"";position:absolute;top:34px;left:0;width:0;height:0;border-style:solid;border-width:10px 17px 0;border-color:#f1f1f1 transparent transparent}
#PopularPosts1 ul li:nth-child(1):before{background:#f34444;color:#fff}
#PopularPosts1 ul li:nth-child(1):after{border-color:#f34444 transparent transparent}
#PopularPosts1 ul li:nth-child(2):before{background:#58a59e;color:#fff}
#PopularPosts1 ul li:nth-child(2):after{border-color:#58a59e transparent transparent}
#PopularPosts1 ul li:nth-child(3):before{background:#7577a9;color:#fff}
#PopularPosts1 ul li:nth-child(3):after{border-color:#7577a9 transparent transparent}
#pp-show{
display:block
}
#pp-hide{
display:none
}
#pp-hide,#pp-show{
text-align: center;
padding: 10px;
margin: 0;
cursor: pointer;
color: #888;
background: #fff;
border-top: 1px solid #eee;
}
Bước 3: Vào HTML - Chuyển đến tiện ích - PopularPosts1
Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot
Các bạn sẽ thấy một đoạn code
<b:widget id='PopularPosts1' locked='false' title='Xem nhiều trong tuần' type='PopularPosts' version='1'>...</b:widget>
mở rộng tiện ích PopularPosts1 ra, các bạn tìm đến thẻ </b:includable> và chèn đoạn code bên dưới trước nó
<a id='pp-show' title='Xem thêm PopularPosts'>Xem thêm <i class='fa fa-angle-down' style='margin-left:5px'/></a>
<a id='pp-hide' title='Ẩn bớt PopularPosts'>Rút gọn <i class='fa fa-angle-up' style='margin-left:5px'/></a>
Bước 4: Chèn đoạn code bên dưới trước thẻ </body>
<script type='text/javascript'>
//<![CDATA[
$("#pp-show").click(function()
{
$("body").append('<style id="pp1">#pp-show{display:none!important}.PopularPosts ul li:nth-child(1n+6),#pp-hide{display:block!important}</style>');
$("#pp2").remove()
}
);
$("#pp-hide").click(function()
{
$("body").append('<style id="pp2">.PopularPosts ul li:nth-child(1n+6),#pp-hide{display:none!important}#pp-show{display:block!important}</style>');
$("#pp1").remove()
}
);
//]]>
</script>
Lưu HTML và xem kết quả
Code: BacSiWindows
Share:

35 nhận xét:

  1. nhớ cái này của Star Bình mà ta?

    Trả lờiXóa
    Trả lời
    1. lấy của ai ghi người đó :)

      Xóa
    2. Nặc danh15/2/18 17:13

      Star Bình lấy từ Bác Sĩ Windows nha

      Xóa
    3. không biết nữa, lấy của ai thì em ghi của người đó thôi mấy bác làm căng

      Xóa
  2. Năm mới tết đến chúc Quân có nhiều sức khỏe và thành công trong cv nha

    Trả lờiXóa
    Trả lời
    1. Cảm ơn ô.
      Klq, nhưng mà Quân là sao ý Ô tôi tên Quí mà

      Xóa
  3. Năm mới tết đến chúc Dũng có thật nhiều sức khỏe và thành công trong năm 2018 :)

    Trả lờiXóa
    Trả lời
    1. Rep nhanh vậy
      Nhầm rùi Dũng chúc nhé không phải chúc Dũng chúc đâu nhé :/

      Xóa
    2. đang trực blog :v với lại fix vài cái nên thấy cmt là rẹp :v hiểu mà ông Tính cũng vậy á :v copy qua qua lại chắc không để ý :v

      Xóa
    3. Lười quá bác, thông cảm nhé bác hì hì :v

      Xóa
    4. Ừm, dạo này bận việc không tt với mấy blogger được

      Xóa
  4. Cái click me mới thấy đâu r :v

    Trả lờiXóa
  5. Năm mới đến chúc bác vui vẻ nhé có nhiều sức khỏe và thành công trong cv nha

    Trả lờiXóa
  6. New Year vui vẻ và hạnh fuck nhé Wuí :V

    Trả lờiXóa
  7. Năm mới vui vẻ dồi dào sức khỏe nha em

    Trả lờiXóa
  8. Năm mới vui vẻ nhé ông Qúi

    Trả lờiXóa
  9. Chúc mừng năm mới , chúc bạn có 1 năm tuyệt vời, có nhiều sức khỏe và luôn thành công trong cuộc sống

    Trả lờiXóa
  10. chúc bác năm mới vui vẻ
    blog ngày càng phát triển nhé

    Trả lờiXóa