Tự động đánh số thứ tự bài đăng phổ biến Blogger – Blogspot

Blogger

{ 1 comment }

Bài đăng phổ biến là tiện ích được Blogger phát hành vào năm 2011. Kể từ đó đến nay đã có khá nhiều thay đổi được thực hiện bởi các nhà phát triển giúp người sử dụng có nhiều tùy chọn hơn như hiển thị phần trích dẫn, hiển thị hình ảnh thu nhỏ, tùy biến số bài được hiển thị…

Đánh số thứ tự bài đăng phổ biến Blogger - Blogspot

Đánh số thứ tự bài đăng phổ biến Blogger – Blogspot

Tuy nhiên Blogger lại không cho phép bạn thêm Plugin để tùy chỉnh tiện ích đó mà bạn cần phải tự chỉnh sửa HTML và CSS để có được tiện ích theo ý mình. Trong bài viết này mình sẽ chia sẻ với các bạn cách hiển thị tiện ích bài đăng phổ biến có đánh số thứ tự

Tự động đánh số thứ tự bài đăng phổ biến Blogger – Blogspot

Thêm tiện ích bài đăng phổ biến – Popular Posts

Truy cập Bảng điều khiển (Dashboard) chọn Bố cục (Layout) và nhấn Thêm tiện ích bên Sidebar

Thêm tiện ích Blogger - Blogspot

Thêm tiện ích Blogger – Blogspot

Trong cửa sổ hiện ra chọn Bài đăng phổ biến – Popular Post và thiết lập cấu hình tiện ích này như hình:

Tùy chỉnh Popular Posts

Tùy chỉnh Popular Posts

Nhấn lưu để hoàn thành việc thêm tiện ích

Xem thêm  [Blogger] Warning: Missing required field "updated" in Blogger Rich Snippet Webmaster Tool

Tùy chỉnh tiện ích Bài đăng phổ biến với CSS

Trước khi tiến hành bước này bạn nên sao lưu lại Template. Sau khi sao lưu hãy nhấn vào phần Mẫu (Template) và chọn Chỉnh sửa HTML (Edit HTML)

Chỉnh sửa HTML Blogger

Chỉnh sửa HTML Blogger

Tìm tới đoạn: ]]></b:skin> và thêm lên trên:
Blogger Popular Posts Style 1

Blogger Popular Post Style #1

Blogger Popular Post Style #1

/*--- tohaitrieu.net 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;
}

Blogger Popular Posts Style 2

Blogger Popular Posts Style #2

Blogger Popular Posts Style #2

 #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;
}

Blogger Popular Posts Style 3

Popular Posts Style #3

Popular Posts Style #3

#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;
}

Blogger Popular Posts Style 4

Popular Posts Style #4

Popular Posts Style #4

#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px; 
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
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; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

Blogger Popular Posts Style 5

Popular Post Style #5

Popular Post Style #5

#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;
}

Sau khi thêm Code thì nhấn lưu mẫu và xem kết quả ở trang chủ.

Xem thêm  Tạo trang Blogspot - blogger với url đẹp và các loại trang cần phải có

Tùy chỉnh màu sắc và cách hiển thị

Đoạn code trên sẽ hiển thị số thứ tự với hình vuông bao bên ngoài và có đổ bóng. Để thay đổi màu sắc của hình vuông bao ngoài chữ bạn tìm #292D30 và đổi thành mã màu bạn thích.

Để đổi màu của số bạn tìm #ffffff và đổi thành màu tùy chọn

Đổi hình vuông thành hình tròn như demo bạn tìm box-shadow: 1px 2px 9px #666666;

Thêm xuống dưới: border-radius:15px;

Như vậy các bạn đã có một Widget Bài đăng phổ biến được đánh số thứ tự khá đẹp rồi. Nếu bạn muốn tùy biến hơn nữa thì còn phụ thuộc vào kỹ năng sử dụng CSS của bạn nữa.

Góp ý cho Tô Triều

  • dlinh 24/08/2015, 21:47

    Anh ơi em muốn dùng cái này ( kiểu 2 )cho thuộc tính li của wigget của wordpress thì phải làm sao vậy anh

    Reply