Tự động đánh số cho các bài đăng

Nhiều bạn chắc cũng đã xem, đã thấy, thậm chí cũng đã từng có quá trình thiết kế Blogger / Websie, ắt hẳn các bạn cũng đã nhìn thấy các Widget tiện ích Popular Post nầy rồi.
Trong thiết kế Blogger tại ứng dụng Google, các Widget tiện ích  trông chừng có vẽ quá đơn giản, cũng không hẳn thế đâu bạn, cũng bởi Google cho ta một lối đi thông thoáng với một mã nguồn mỡ và được phép nhúng vào bên trong đó tất cả những gì mà bạn muốn. Tất cả đều ở trong một ở cái thế giới ngày nay, là như vậy.

Sau đây, là các bước thực hiện:

Thêm vào Popular Posts Widget

1. Vào thiết kế  Blogger > Layout
2. Click "Add a Gadget"
3. Chọn lựa "Popular Posts"  từ trong danh sách.
4. Bạn sẽ cấu hình cài đặt "image thumbnail" và "snippet", đó là tất cả những gì mà bạn có thể để cho Widget hiển thị trên Blogspot.

       5.  Save nó lại. 

Customize Popular Posts Plugin

Bây giờ bạn cần thay đổi một số kiểu dáng mặc nhiên:

1. Vào  Blogger > Template
2. Backup  Template của bạn 
3. Click Edit HTML
4. Nhấn Ctrl + F tìm kiếm ]]</b:skin>.  Click nút mũi tên màu đen bên phải khung Soure code.

   5.  Dán Source Code dưới đây vào trước ]]</b:skin>

/*--- MBT 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;
}

Customization:

• Thay đổi màu nền Backgroun #292D30
• Thay đổi màu chữ Text  #ffffff
• Thay đổi kiểu cách khung Shadow cho ảnh hiển thị: box-shadow: 1px 2px 9px #666666;

border-radius:15px;

    6. Save nó lại, thế là xong!

Nguồn tham khảo My Blogger Trick

Như thiết kế Blogger dưới đây của mình vậy:

Chúc các bạn thành công



Tài liệu tham khảo thêm

7 Stylish Popular Post Widget cho Blogger - Blogspot

Thế nào để có một Popular Post Thumbnail cho blogger blogspot

Làm đẹp tiện ích Popular Posts (hiệu ứng tooltip)
Tùy chỉnh widget Popular Posts thanh lịch cho Blogger
Popular Posts dạng ảnh xoay tròn từ CSS3 cho blogger

Popular post dạng trượt slider đẹp mắt cho blogger

Tạo widget Popular Posts với Automatic Numbering – Bubbles cho Blogspot
Thêm tiện ích bài đăng nhiều nhận xét nhất
Tạo kiểu dáng ảnh hình tròn cho Popular Post trong Blogger

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..