Một số mẫu trang trí Popular Post đẹp có đánh số cho blogspot

Bài viết liên quan:

Popular Post hay còn được gọi là Bài đăng phổ biến, Xem nhiều trong tuần,...tùy theo cách gọi của mỗi bạn. Là một thành phần ko thể thiếu trong Blog của các bạn. Nó giúp các bạn thống kê được những bài viết có lượt xem nhiều nhất trong Blog mình nhằm tạo sự chú ý đến người xem Blog.
Và để góp phần tạo nhiều sự chú ý hơn, Niệm Đợp Troai sẽ chia sẻ đến các bạn 1 số mẫu Popular Post tương đối là đẹp cho các bạn sử dụng khi cần thiết.
Một số mẫu trang trí Popular Post đẹp có đánh số cho blogspot

Để thực hiện các bạn tìm đến ]]></b:skin> và dán đoạn code mình thích lên trên thẻ nhé!

Kiểu 1

Một số mẫu trang trí Popular Post đẹp có đánh số cho blogspot
Code
/*--- Popular Posts --- */.popular-posts ul {padding-left: 0px;counter-reset: popcount;}.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 16px;background: #292D30;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #dddddd;box-shadow: 1px 2px 9px #666666; }.popular-posts ul li {border-bottom: 1px dashed #dddddd;}.popular-posts ul li:hover {border-bottom: 1px dashed #696969;}.popular-posts ul li a {text-decoration:none; color:#5A5F63;} .popular-posts ul li a:hover {text-decoration:none;}

Kiểu 2

Một số mẫu trang trí Popular Post đẹp có đánh số cho blogspot
Code
#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;}

Kiểu 3

Một số mẫu trang trí Popular Post đẹp có đánh số cho blogspot
Code
#PopularPosts1 h2{position:relative;right:-2px;padding:8px 63px 6px 17px; width:100%;margin:0;font-size:16px;background:#4F4F4F;color:#f2f2f2;text-align:left;text-indent:18px;}#PopularPosts1 h2:before{position:absolute;content:"";top:36px;right:0px;width: 0px;height: 0px;border-bottom:12px outset transparent;border-left:12px solid #000000; }#PopularPosts1 h2:after{position:absolute;content:"";top:-6px;left:-5px;width: 0px;height: 0px;border-bottom:24px outset transparent;border-top:24px outset transparent;border-left:24px solid #ffffff; /* Arrow background color on the left */}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:100%;}#PopularPosts1 li{ width:100%;position:relative;left:0;margin:7px 0 16px 12px;padding:10px  4px 0 5px;}#PopularPosts1 ul li:before{ content:counter(li);counter-increment:li;position:absolute;top:-2px;left:-20px;font-size:35px;width:20px;color:#888888; } #PopularPosts1 ul li a{display:block;font-size:16px;color: #666;text-decoration:none;transition: all .1s ease-in-out;font-weight: bold;}#PopularPosts1 ul li a:hover{color:#3366FF;margin-left:3px;}

Kiểu 4

Một số mẫu trang trí Popular Post đẹp có đánh số cho blogspot
Code
#PopularPosts1 h2{position:relative;padding:8px 10px 6px 10px;width:100%;margin-bottom: 5px;font-size:17px;color:#757575; /* Color of the widget's title */text-align:left;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:100%;}#PopularPosts1 li{ /* Styles of each element */width:100%;position:relative;left:0;margin:0 0 1px 12px;padding:4px 5px;}#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute; left: -30px;top: 50%;margin-top: -13px;background: #8E8E8E; /* background color of the numbers */height: 1.9em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;color: #fff;font-size: 14px;}#PopularPosts1 ul li:after{position: absolute;content: '';left: -2px;margin-top: -.7em; top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left:10px solid #8E8E8E; /* background color of the right arrow*/}#PopularPosts1 ul li a{color: #444;text-decoration: none;   font-size:15px;}#PopularPosts1 ul li {position: relative;display: block;padding: .4em .4em .4em .8em;*padding: .4em;margin: .5em 0 .5em 0.4em;background: #ddd;transition: all .3s ease-out;text-decoration:none;transition: all .1s ease-in-out;}#PopularPosts1 ul li:hover{background: #eee; /* Background color on mouseover */}   #PopularPosts1 ul li a:hover{color:#444; /* Link color on mouseover */margin-left:3px;}

Kiểu 5

Một số mẫu trang trí Popular Post đẹp có đánh số cho blogspot
Code
#PopularPosts1 h2{padding:8px 10px 3px 0;width:100%;margin:0;font-size:16px;position:relative;left:-20px;display:block;border-bottom:2px solid #ccc;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;width:100%;}#PopularPosts1 li{ /* Styles of each element */width:100%;position:relative;left:0;margin:0 0 6px 10px;padding:4px 5px;}#PopularPosts1 ul li:before{ /* Style of the numbers */content:counter(li);counter-increment:li;position:absolute;top:3px;left:-39px;font-size:21px;width:28px;height:28px;border-radius: 50%;color:#777; /* Text color */border: 2px solid #ddd; /* Rounded border color */padding:0;text-indent:9px;}#PopularPosts1 ul li a{display:block;position:relative;left:-45px;width:100%;margin:0;min-height:28px;padding: 5px 3px 3px 39px;color:#333; /* color of the links */text-decoration:none;font-size:14px; /* Font size of the links */font-style: italic; }#PopularPosts1 ul li a:hover{color:#3366ff;margin-left:3px;}

Kiểu 6

Một số mẫu trang trí Popular Post đẹp có đánh số cho blogspot
#PopularPosts1 ul li:first-child:after{content:"1";color:#ff6262!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li:after{content:"2";color:#55579e!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";color:#FDB713!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#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:#fff}
#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:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li: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 + 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:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after{position:absolute;top:8px;text-align:center;line-height:1em;font:300 20px "Roboto",sans-serif;padding:5px 12px;border-radius:50%;color:#888;border:2px solid #eee}
#PopularPosts1 ul li a{display:block;margin-left:55px}
Các bạn có thể tùy chỉnh CSS cho phù hợp theo Blog của mình nha!
Nếu các bạn có mẫu nào khác đẹp hãy để lại Link Notepad mình sẽ cập nhật thêm vào bài viết và ghi nguồn về Blog các bạn. Cám ơn các bạn!

Phan Niệm

Không muốn hoặc không thích, không tồn tại hoặc không thể! Cám ơn các bạn đã ghé thăm, chúc các bạn có những phút giây thoải mái và bổ ích trên blog của mình! Thanks for... Xem thêm về tôi

  1. Trả lời
    1. áp dụng chỉnh sửa zô từng Blog là ok thôi

      Xóa
    2. - Đơn giản những chất chơi :v

      Xóa
  2. Đỡ phải tìm đâu xa :)

    Trả lờiXóa
  3. Xấu quá, kiểu của Bác Sĩ Windows đẹp hơn :v

    Trả lờiXóa
    Trả lời
    1. để lại link notepad code

      Xóa
    2. Nhận xét này đã bị quản trị viên blog xóa.

      Xóa
    3. Đã hoàn tất cập nhật :)

      Xóa
  4. Trả lời
    1. lấy bên nước ngoài về khỏi ghi nguồn luôn :)

      Xóa
  5. không có cái nào ưng ý hết ta :3

    Trả lờiXóa
  6. Phá phách bay mất thanh nav :))

    Trả lờiXóa
  7. Mấy cái này nhìn đơn giản mà đẹp phết

    Trả lờiXóa
  8. 1 câu thôi chất :v giờ Blog anh Niệm đẹp mắt rồi

    Trả lờiXóa