Tùy chỉnh LinkWithin - Thêm màu sắc!

Customize LinkWithin Stylesheet - Add Some colors!

Trong khi thiết kế template, namkna đã thử tùy chỉnh Linkwithin (Tiện ích bài viết liên quan) và thấy rằng hoàn toàn có thể được tùy chỉnh bằng cách ghi đè lên kiểu mặc định của nó. Namkna sử dụng Google Chrome để xác định các lớp học và ID. Điều này chúng ta hãy thay đổi màu nền của hình ảnh thu nhỏ, thay đổi màu sắc văn bản tiêu đề và mô tả, thêm hiệu ứng khi di chuột và quan trọng nhất là loại bỏ các liên kết tới linkwithin và liên kết biểu tượng xuất hiện ở phía dưới bên phải của các plugin. namkna đã tạo ra một mẫu với chủ đề tối và chia sẻ stylesheet để bạn có thể sáng tạo mới sao cho phù hợp với blog của bạn. Hướng dẫn này hữu ích với cả BlogSpot và wordpress bởi tất cả những gì các bạn cần phải làm là sao chép và dán mã CSS đơn giản sau dán vào blog.
Ảnh minh họa:
Tùy chỉnh LinkWithin - Thêm màu sắc!

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ó:

Đọc: Cài Bài viết liên quan với LinkWithin cho blogspot

Tùy chỉnh LinkWithin

Lưu ý: Với Wordpress bạn sẽ phải dán CSS dưới đây vào Editor => Appearance.
Với blog blogger  các bạn làm như bên dưới:
☼ 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) => Xem video:
4- Thêm đoạn code bên dưới vào trước thẻ  ]]></b:skin> 
/* Linkwithin Stylesheet by http://namkna.blogspot.com/ */
#linkwithin_logolink_0 {
display:none!important;
}
#linkwithin_logo_0 {display:none;}
#lws_0 {
clear: both!important;        margin: 0 0 20px 0!important;    
}

.linkwithin_outer{
margin: 0 0 20px 0!important;    
}
.linkwithin_text {
color:#FF683F!important;
font-size:16px!important;
padding-bottom:5px!important;
}
.linkwithin_posts a {
background:#333333 !important;
border-right:1px solid #404040!important;
}
.linkwithin_posts a:hover {
background:#666666 !important;
}
.linkwithin_img_0 {
border: 2px solid #dddddd !important; padding:2px !important;  width:100px!important; height:100px!important;
}
.linkwithin_img_0:hover {
border: 2px solid #333333 !important; padding:2px !important;
}

.linkwithin_title {
color:#ffffff !important;
font-family:'tahoma', sans-serif !important;
font-size:11px !important;
line-height:14px !important;
text-decoration: none;
border-top:1px solid  #ddd !important;
}
.linkwithin_title:hover {
border-top:1px solid  #333 !important;
}
Thực hiện những thay đổi này để thay đổi màu sắc. Mẹo: Sử dụng màu Công cụ của chúng tôi
  • Để thay đổi màu sắc của văn bản "You Might Also Like" đơn giản thay đổimã màu #FF683F
  • Để thay đổi kích thước phông chữ hãy sửa 16px
  • Để thay đổi màu nền của ô bài viết trong khi chưa dê chuột vào chỉnh sửa #333333
  • Để thay đổi màu nền  của ô bài viết trong khi dê (hover) chuột vào chế độ chỉnh sửa #666666
  • Để thay đổi màu sắc của phân cách giữa mỗi ảnh thu nhỏ, hãy chỉnh sửa #404040
  • Để thay đổi đường viền trên mỗi hình ảnh thu nhỏ trong chế độ hoạt động chỉnh sửa hình ảnh #dddddd
  • Để thay đổi đường viền trên mỗi hình ảnh thu nhỏ khi chuột hover chỉnh sửa #333333
  • Để thay đổi màu sắc liên kết tiêu đề bài viết chỉnh sửa #ffffff
6- Lưu mẫu của bạn và xem kết quả nha.

Cách thức hoạt động?

Đoạn Css trên buộc các trình duyệt bỏ qua stylesheet chính thức của LinkWithin và chỉ để những stylesheet không nằm trong tùy chỉnh của đoạn CSS trên hoặt động. Hay nói cách khác là mã stylesheet (CSS) trên nhằm ghi đè lên tất cả các thuộc tính CSS quan trọng. 

Làm thế nào để thay đổi văn bản "You Might Also Like"?

Phần này mình đã hướng dẫn trong bài viết cách cài đặt tiện ích tại đây. Hoặc thêm đoạn code bên dưới vào trước thẻ </head>
<script>linkwithin_text='Related Posts:'</script>
- Thay dòng chữ màu đỏ Related Posts: thành dòng chữ bạn muốn như: Bài viết liên quan, bạn cũng có thể xem thêm,....

Tăng bài liên quan mà không cần cài đặt lại widget

Khi bạn lần đầu tiên cài đặt plugin này, linkwithin sẽ hỏi địa chỉ Email của bạn và URL blog và sau đó kiểm soát các thiết lập của bạn bằng cách sử dụng một ID người dùng duy nhất. Id này sẽ tồn tại  cho dù bạn xóa hoặc cài đặt lại các plugin trên blog của bạn bao nhiêu lần đi nữa.
Nếu bạn muốn tăng số lượng các hình ảnh thu nhỏ, bạn chỉ cần truy cập vào trang Linkwithin và điền cùng một địa chỉ email mà bạn tạo ra các plugin trong lần đầu tiên đăng ký và cũng có thể gửi URL blog. Nền tảng sử dụng  là tùy chọn. Thiết lập chiều rộng số lượng các bài viết liên quan mà bạn muốn hiển thị. Mỗi bài viết liên quan đại diện cho một Hình thu nhỏ hình ảnh.
Đến khi nhận đượcWidget  là xong! Không sao chép bất kỳ mã nào để dán vào blog và hãy trở về làm mới blog của bạn để xem các plugin cập nhật tự động.
Chúc thành công!