Các kiểu bài đăng phổ biến dành cho Blogger

Trong hầu hết các bạn blogger muốn blog của mình đơn giản và sạch sẽ (không có mã độc hại) nhưng bạn vẫn muốn thêm một số tiện ích quan trọng nhất như Widget bài đăng phổ biến. nó là phần thiết yếu và quan trọng nhất của bất kỳ blog blogger nào. nó hiển thị các bài đăng được xem hoặc bình luận nhiều nhất từ ​​một blog, nó giúp giảm tỷ lệ thoát và mang lại cho blog của bạn một phong cách riêng.
Hôm nay trong hướng dẫn này, tôi hướng dẫn bạn các loại widget bài đăng phổ biến khác nhau mà bạn có thể thêm vào blog của mình. Chờ gì nữa hãy bắt đầu nào!!
Việc đàu tiên là Thêm tiện ích bài viết phổ biến (Bắt buộc) 
SAu đó vào Tiêu đề Blog → Bố cục → Thêm Widget → Bài viết phổ biến. Thêm widget vào vị trí mong muốn và lưu mẫu.
Hãy nhớ kiểm tra tùy chọn Item Snippet (hiển thị đoạn trích bài đăng) và Image Thumbnail(hiển thị hình ảnh).
Ta bắt đầu với các bước sau nhé!
Bước 1 ( Thêm CSS ) 
Trước khi chỉnh sửa,bạn nên tạo bản sao lưu mẫu của mình, để mọi thứ không ổn, bạn vẫn có quay lại lúc ban đầu.
Đầu tiên bạn cần làm là đăng nhập vào tài khoản Blogger của bạn và truy cập →Mẫu →Chỉnh sửa HTML và tìm kiếm thẻ kết thúc ]]> </ b: skin> và ngay phía trên nó dán một trong các kiểu mã sau đây.
Loại 1: Ảnh ở phía trên đoạn trích phía dưới xếp 1 hàng dọc
////////////////////////////////////////////////////////////////
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
position: relative;
}
.sidebar .PopularPosts .item-title {
display:block;
clear:both;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
display: block;
margin: 0 auto;
padding: 5px 10px;
font-size:15px;
font-family: 'Playfair Display', serif;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px "Times New Roman",Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
.img-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(40,35,40,0.05);
}
.PopularPosts .item-thumbnail:hover a .img-overlay {
background-color:rgba(40,35,40,0.3)
}
////////////////////////////////////////////////////////////////
Loại 2: Ảnh ở phía trên đoạn trích phía dưới xếp 2 hàng dọc
////////////////////////////////////////////////////////////////
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
margin-right: 10px;
width: 48.4%;
float: left;
}
.sidebar .PopularPosts ul li.odd {
margin-right: 0;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
position: relative;
}
.sidebar .PopularPosts .item-title {
display:block;
clear:both;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-thumbnail:before {
content: "\f02d";
font-family: FontAwesome;
line-height: 32px;
width: 32px;
height: 32px;
font-size: 18px;
color: #fff;
text-align: center;
font-weight: 400;
position: absolute;
top: 45%;
left: 40%;
opacity: 1;
padding: 0;
z-index: 2;
border: 2px solid #fff;
border-radius: 50%;
transition: all 0.25s ease-in-out 0s;
}
.sidebar .PopularPosts .item-title a {
display: block;
margin: 0 auto;
padding: 5px 0;
font-size:15px;
line-height: 20px;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}
.sidebar .PopularPosts .item-snippet {
color: #333333;
margin: 0px auto;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
.PopularPosts .img-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color:#d86843;
opacity:0.5;
}
.PopularPosts .item-thumbnail:hover a .img-overlay {
background-color: rgba(40,35,40,0.3);
opacity:1;
}
.sidebar .PopularPosts .widget-content ul li:first-child,
.sidebar .custom-widget li:first-child {
padding-top: 0;
border-top: 0;
}
.sidebar .PopularPosts .widget-content ul li:last-child,
.sidebar .custom-widget li:last-child {
padding-bottom: 0;
}
////////////////////////////////////////////////////////////////
Loại 3: Hình và chữ theo hàng ngang
////////////////////////////////////////////////////////////////
.PopularPosts .item-thumbnail{margin:0 15px 0 0 !important;width:90px;height:65px;float:left;overflow:hidden;position: relative}
.PopularPosts .item-thumbnail a{position:relative;display:block;overflow:hidden;line-height:0}
.PopularPosts ul li img{width:90px;height:65px;object-fit:cover;padding:0;transition:all .3s ease}
.PopularPosts .widget-content ul li{overflow:hidden;padding:10px 0;border-top:1px solid #f2f2f2}
.sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child,.tab-widget .PopularPosts .widget-content ul li:first-child,.tab-widget .custom-widget li:first-child{padding-top:0;border-top:0}
.sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child,.tab-widget .PopularPosts .widget-content ul li:last-child,.tab-widget .custom-widget li:last-child{padding-bottom:0}
.PopularPosts ul li a{color:#333333;font-weight:400;font-size:14px;line-height:1.4em;transition:color .3s}
.PopularPosts ul li a:hover{color:#FF4400}
.PopularPosts .item-title{margin:0 0 4px;padding:0;line-height:0}
.item-snippet{display:none;font-size:0;padding-top:0}
.PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: "";
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font-size: 70px;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
////////////////////////////////////////////////////////////////
Bước 2 : Thêm SCRIPT  (Thay đổi kích thước hình )
Bây giờ là phần bổ sung cho tiện ích này về cơ bản blogger tạo ra hình ảnh chiều rộng 72px không phù hợp trong một số trường hợp.Vì vậy chúng ta sẽ thay đổi nó với kích thước ban đầu của hình ảnh để có chất lượng tốt hơn. Trong Mẫu hãy tìm kiếm thẻ </ body> và ngay phía trên nó dán mã HTML sau đây.
////////////////////////////////////////////////////////////////
<script type='text/javascript'>
//<![CDATA[ 
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
$(document).ready(function(){
 $('.PopularPosts img').each(function(){
  var srcUrl = $(this).attr('src');
  $(this).attr('src', srcUrl.replace('default', 'maxresdefault'));
 });

});
//]]>
</script>
////////////////////////////////////////////////////////////////
Vậy là đã xong!! Chúc các bạn thành công!Hy vọng bạn thích hướng dẫn này, nếu bạn thích thì hãy chia sẻ nó với bạn bè của bạn và đừng quên ghé trang thường xuyên để xem những hướng dẫn mới nhất nhé!  
Bình Luận()