LinkWithin là một plugin tuyệt vời có thể được tích hợp trong cả Wordpress và Blogger để hiển thị những bài viết liên quan bằng cách lấy các bài viết thuộc về cùng thể loại/nhãn hoặc thẻ. Nó nhanh cvà giúp đỡ trong việc gia tăng sự tham gia của người đọc đọc nhiều hơn. Trước đây, chúng tôi giới thiệu một cách mà bạn có thể tùy chỉnh giao diện của plugin này bằng cách ghi đè kiểu mặc định của nó. Bạn chắc chắn có thể ghi đè lên bất kỳ lớp hoặc ID bằng cách đơn giản bằng cách sử dụng CSS.
Xem minh họa: VIew DemoCSS tùy chỉnh mà namkna cung cấp cho người dùng để thay đổi màu sắc font chữ của tiêu đề văn bản, chỉnh sửa kích thước hình ảnh thu nhỏ, đường viền và nền. Hôm namkna chia sẻ stylesheet cho skin màu đen của widget linkWithin (bài liên quan) được sử dụng trên blogger. VỚi đoạn CSS đơn giản và hiệu quả. Nó thu hút nhiều khách truy cập và cung cấp một số gợi ý gọn gàng và sạch sẽ. Các bước thực hiện rất dễ dàng!
Bước 1: Cài đặt LinkWithin cho blogger
Nếu bạn chưa cài đặt tiện ích bài viết liên quan linkwithin trên blog của bạn thì bước đầu tiên là cài đặt nó:
Bước 2: Tùy chỉnh LinkWithin
☼ Cách tiến hành:1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed)
4- Thêm đoạn code bên dưới vào trước thẻ ]]></b:skin>
/*---Related Posts linkwithin---*/
#linkwithin_logolink_0 {
display:none!important;
}
#lws_0 {
clear: both!important;
margin: 0 0 20px 0!important;
}
.linkwithin_outer {
margin: 1px 0px !important;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOiIbWLM-wgkPdfeNVhEQ5vqOwt8e8mdFzWxrIGihXYlUKQho0HpYj4lnxvOPE_g4ET0paYhVMAoGcFho_VIPW0zXbWM2uNZYlyANbm-FDyKxdBKOl_VATbzLGt3ZJRLNtNxlNfrCsjA/s1600/related-posts-namkna.gif") repeat scroll rgb(42, 42, 42);
height: 260px;
width:590px!important;
padding: 0px !important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
border-radius: 5px 5px 5px 5px;
}
.linkwithin_inner {
width:590px!important;
}
.linkwithin_text {
margin: 0px !important;
padding: 10px !important;
font-family: "Droid Sans",Helvetica,Arial,sans-serif;
font-size: 1.35em;
color: rgb(255, 255, 255);
font-weight: 700;
line-height: 1.35em;
text-transform: capitalize;
background-color: rgb(18, 18, 18);
border-bottom: 1px solid rgb(0, 0, 0);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-image: -moz-linear-gradient(center top , rgb(36, 36, 36), rgb(18, 18, 18));
}
.linkwithin_posts a {
border-right:0px!important;
margin: 10px 0px 10px 20px !important;
}
.linkwithin_posts a:hover {
border-right:0px!important;
margin: 10px 0px 10px 20px !important; background:none!important;
}
#linkwithin_logo_0 {display:none;}
.linkwithin_img_0 {
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 70px !important;
margin-right: 20px !important;
overflow: hidden;
background:#666!important;
}
.linkwithin_img_0:hover {
border: 1px solid #666!important;
opacity:0.8;
}
.linkwithin_img_0 div {
width: 100px !important;
height: 70px !important;
}
.linkwithin_title {
color: rgb(255, 255, 255) !important;
font-size: 1.1em !important;
display: block;
padding: 0px 10px 0px 0px !important;
font-weight: 700 !important;
line-height: 1.45em !important;
margin-top: 10px !important;
font-family: "Droid Sans",Helvetica,Arial,sans-serif !important;
text-decoration:none!important;
width:120px!important;
}
.linkwithin_title:hover {
text-decoration:underline!important;
}
Khuyến nghị các bạn nên dọc thêm!
Bạn cũng có thể muốn kiểm tra Skin đầu tiên Tuỳ chỉnh namkna giới thiệu trước đây.- Đọc: Tùy chỉnh LinkWithin
Câu hỏi của bạn.
Widget sẽ hiển thị lên đến 4 hình thu nhỏ. Nếu bạn muốn hiển thị hình thu nhỏ lớn hơn bạn chỉ cần tăng kích thước chiều rộng (width:590px) đánh dấu màu xanh.
Mặc dù thiết lập hiển thị 4 hình thu nhỏ. Các widget sẽ hiển thị 3 hình thu nhỏ tốt hơn bởi vì các lỗi như vậy hiếm khi xảy ra với một số website/ID và yêu cầu sửa chữa hướng dẫn sử dụng từ nhóm linkwithin.
Tham khảo: mybloggertricks
