Chào các bạn !
Bài viết hôm nay tôi sẽ hướng dẫn các bạn nâng cấp khung bình luận của Blogspot lên phiên bản mới với thiết kế mới, giao diện mới cùng các tính năng mới. Thủ thuật này sẽ chỉnh sửa 1 số thứ quan trọng trong template vì vậy tôi khuyên các bạn hãy sao lưu lại template trước khi thực hiện đề phòng lỗi xảy ra hay hư hỏng template.
Bài viết hôm nay tôi sẽ hướng dẫn các bạn nâng cấp khung bình luận của Blogspot lên phiên bản mới với thiết kế mới, giao diện mới cùng các tính năng mới. Thủ thuật này sẽ chỉnh sửa 1 số thứ quan trọng trong template vì vậy tôi khuyên các bạn hãy sao lưu lại template trước khi thực hiện đề phòng lỗi xảy ra hay hư hỏng template.
 |
| Hướng dẫn nâng cấp và tùy biến khung comments Blogspot v3 |
Hiện VOZBLOGGER cùng đang dùng phiên bản v3 này nhé. Nào cùng xem và thực hiện!!!
Bước 1. Tìm và thay cả đoạn
Bước 2. Tìm thẻ
Còn đây là CSS tùy biến của Blog VOZBLOGGER đang dùng nhé:
À mà nếu gặp lỗi nhớ để lại bình luận tại đây để mình hỗ trợ nhé
NÂNG CẤP KHUNG NHẬN XÉT PHIÊN BẢN MỚI
Bước 1. Tìm và thay cả đoạn <html thành đoạn bên dưới
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='fancy.xml' b:templateVersion='1.2.0' expr:dir='data:blog.languageDirection' oncontextmenu='return true' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Bước 2. Tìm thẻ <b:skin><![CDATA[ và thêm toàn bộ CSS sau vào bên dưới nó.
/* <Group description="Body"> <Variable name="body.background" description="Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left" value="#ffffff url(#) no-repeat scroll top center /* Credit: Mae Burke (http://www.offset.com/photos/389967) */;"/> <Variable name="body.background.color" description="Background color" type="color" default="transparent" value="transparent"/> <Variable name="body.title.font.small" description="Title font (small)" type="font" default="$(garamond20)" value="normal 400 14px Roboto, sans-serif"/> <Variable name="body.title.font.large" description="Title font (large)" type="font" default="$(garamond24)" value="normal 400 24px Roboto, sans-serif"/> <Variable name="body.title.color" description="Title color" type="color" default="#000" value="#000000"/> <Variable name="body.action.font.small" description="Action font (small)" type="font" default="$(Roboto12)" value="normal 400 12px Roboto, sans-serif"/> <Variable name="body.action.font.large" description="Action font (large)" type="font" default="$(Roboto14)" value="normal 400 14px Roboto, sans-serif"/> <Variable name="body.action.color" description="Action color" type="color" default="#4267b2" value="#4267b2"/> <Variable name="body.text.font" description="Text font" type="font" default="$(garamond20)" value="normal 400 14px Roboto, sans-serif"/> <Variable name="body.text.color" description="Text color" type="color" default="#000" value="#000000"/> <Variable name="body.link.color" description="Link color" type="color" default="#4267b2" value="#4267b2"/> <Variable name="body.widget.title.font.small" description="Gadget title font (small)" type="font" default="$(Roboto12)" value="normal 400 12px Roboto, sans-serif"/> <Variable name="body.widget.title.font.large" description="Gadget title font (large)" type="font" default="$(Roboto14)" value="normal 400 14px Roboto, sans-serif"/> <Variable name="body.widget.title.color" description="Gadget title color" type="color" default="rgba(0, 0, 0, 0.54)" value="rgba(0, 0, 0, 0.54)"/> <Variable name="body.filter.background.color" description="Filter background color" type="color" default="#302c24" value="#302c24"/> <Variable name="body.filter.text.font.small" description="Filter text font (small)" type="font" default="$(Roboto12)" value="normal 400 12px Roboto, sans-serif"/> <Variable name="body.filter.text.font.large" description="Filter text font (large)" type="font" default="$(Roboto14)" value="normal 400 14px Roboto, sans-serif"/> <Variable name="body.filter.text.color" description="Filter text color" type="color" default="rgba(255, 255, 255, 0.54)" value="rgba(255, 255, 255, 0.54)"/> <Variable name="body.filter.keyword.font.small" description="Filter keyword font (small)" type="font" default="$(RobotoBold12)" value="normal 700 12px Roboto, sans-serif"/> <Variable name="body.filter.keyword.font.large" description="Filter keyword font (large)" type="font" default="$(RobotoBold14)" value="normal 700 14px Roboto, sans-serif"/> <Variable name="body.filter.keyword.color" description="Filter keyword color" type="color" default="rgba(255, 255, 255, 0.87)" value="rgba(255, 255, 255, 0.87)"/> <Variable name="body.filter.link.font.small" description="Filter link font (small)" type="font" default="$(RobotoBold12)" value="normal 700 12px Roboto, sans-serif"/> <Variable name="body.filter.link.font.large" description="Filter link font (large)" type="font" default="$(RobotoBold14)" value="normal 700 14px Roboto, sans-serif"/> <Variable name="body.filter.link.color" description="Filter link color" type="color" default="#4267b2" value="#4267b2"/> </Group> */
Bước 3. Lưu mẫu và hoàn tất nâng cấp khung nhận xét.
TÙY BIẾN KHUNG NHẬN XÉT MỚI
Thông thường sau khi nâng cấp thì khung nhận xét sẽ dùng css mặc định, nếu bạn muốn trông bắt mắt hơn, khác biệt hơn thì bạn có thể viết thêm CSS cho nó theo mẫu dưới đây:.comments iframe {
/* CSS */
}
Còn đây là CSS tùy biến của Blog VOZBLOGGER đang dùng nhé:
.comments iframe {background: #fafafa;display: -ms-flexbox;display: -webkit-flex;display: flex;border: 1px solid rgba(0,0,0,0.12);border-radius: 3px;padding: 0 12px;}
TỔNG KẾT
Thật ra thì không có gì quan trọng để tổng kết, các bạn chỉ cần làm đúng như hướng dẫn là ok.chúc bạn một ngày vui vẻ!À mà nếu gặp lỗi nhớ để lại bình luận tại đây để mình hỗ trợ nhé
Created by Voz Blogger
Một số lưu ý khi bình luận
Không đăng bình luận có nội dung khiêu dâm, 18+
Không đăng bình luận có liên quan đến chính trị, nhà nước.
Không đăng bình luận có nội dung phản động, kích động chiến tranh, thù địch.
Không đăng bình luận có nội dung phản cảm, bêu rếu, nói xấu.
Không đăng bình luận có nội dung tục tiểu, bậy bạ hay thậm chí "vô học".
Không đăng bình luận có liên kết spam, dẫn đến những trang có nội dung xấu.
Được đăng bình luận có mang tính đóng góp, xây dựng bài viết / blog.
Được đăng bình luận có liên quan đến nội dung bài viết.
Có thể góp ý, hay báo lỗi bài viết (thiếu ý, sai chính tả hay thiếu hình ảnh minh họa).
Hướng dẫn nâng cấp và tùy biến khung comments Blogspot v3
ReplyDeleteĐây Là Demo
DeletePost a Comment