Thứ Năm, 23 tháng 5, 2019

Tinh chỉnh Blogger Template: Tối ưu template G Vusion 2


Dù bạn sử dụng bất cứ theme, template nào, của WordPress hay Blogger đi chăng nữa, kể cả premium lẫn free, thì bạn cũng đều muốn có dấu ấn cá nhân của mình trên đó. Nếu không thì bạn cũng chỉ là bản sao của những bản sao, chìm trong muôn vàn trang na ná nhau, dù nội dung có là gì đi nữa. Hãy cùng IT Bình Dân đi Tinh chỉnh và Tối ưu blogger template.



Xem thêm:



Template chính là ấn tượng đầu tiên của bạn đối vời người đọc, nên chắc không ai muốn mình luộm thuộm và... đụng hàng. Việc tinh chỉnh template không những giúp trang blog bắt mắt hơn mà nó còn giúp blog mượt mà hơn, thích ứng hơn với các trình duyệt, phương tiện truy cập,...


Trong bài viết này mình sẽ hướng dẫn các bạn tinh chỉnh, tối ưu template của mình dù đó là template bạn lấy từ nguồn nào đi chăng nữa.

Đây là bài hướng dẫn customize bản template có sẵn. Bạn có thể thiết kế template cho blogger hoặc Chọn template đúng chuẩn cho blog

Để chỉnh sửa blogger template, bạn cần vào phần Edit HTMLSetting - Mục này dành cho những ai đã từng chỉnh sửa, thao tác với html template nhiều lần rồi, còn nếu bạn mới nghe đến từ này lần đầu, tôi khuyên bạn nên tạm gác lại để đó đã.

Bài viết sử dụng code gốc của trang này: http://gvusiondua.blogspot.com/

Template đã được chỉnh sửa sẽ chia sẻ cho bạn nào có nhu cầu. Các bạn có thể liên hệ qua phần Contact nhé.

Khi trang blogger của tôi dùng template G Vusion 2:



Sau khi tinh chỉnh, tối ưu:




Rõ ràng có sự thay đổi đáng kể về mặt chất lượng, hiệu quả.

Dưới đây cũng là một trang blog khác của mình đang sử dụng chung template này trước và sau khi tối ưu template:




Còn đây là điểm số của itbinhdan.com thời điểm hiện tại:



Sự thay đổi này về mặt điểm số là đáng để thử đúng không? Tôi sẽ tường trình lại những việc mình làm đối với cái template gốc của G vusion 2


1. Bỏ bớt những tag thừa


Template G vusion 2 được thiết kế và nâng cấp bởi Arlina, một designer người Indonesia với dòng template miễn phí cho Blogger khá đẹp mắt. Tôi từng thử và tốn rất nhiều công sức cho bộ template Invision 2016 để rồi sau vài tháng nhận ra, hệ thống comment hoàn toàn vô dụng.

Không rõ có sự nâng cấp hay thay đổi gì nhưng hệ thống comment của Invision (dùng Disqus) không load được. Sau vài ngày mày mò, tôi đành bỏ cuộc. Có liên hệ với tác giả nhưng không có phản hồi, mà quay lại dùng comment của Blogger lại không được vì template đã được tùy biến khá sâu phần comment. Tôi không biết gỡ Disqus ra và chừa lại Blogger comment thế nào nên cuối cùng đành tiếc đứt ruột bỏ của chạy lấy người.

Tôi tiếp tục tìm kiếm một template chuẩn với Structured Data của Google mà điểm số cũng phải ổn nữa, rồi cả comment nữa,... Sau một lúc tôi tìm thấy G vusion 2.

Bản gốc cũng tàm tạm, mỗi tội nó hơi màu mè và khó đọc. Tôi lại thích chuẩn FlatTypography nên quyết định sẽ tùy chỉnh lại, bỏ hết các viền khung, ô màu mè, chọn tông màu xám đậm một chút, và kết quả là có trang blog như hiện nay.

Có một điểm chung trong template của Arlina đó là anh ta thường dùng... thừa tag, chồng tag hoặc cả lỗi tag nữa. Việc này vô hình chung khiến template mất thời gian để thực hiện việc đã làm hoặc làm việc này chồng lên việc kia rồi lại trở lại việc đầu, tốn quá nhiều bước (vẽ đường viền border chẳng hạn). Vậy nên tôi search và xóa các dòng sau:


  • border ... solid... 
  • border-radius:...px;
  • text-transform:... (cái này thường vớ vẩn nhất, vì bạn có thể nhập sẵn chữ hoa ở đây nếu muốn, sẽ không phải dùng đến bước này)
  • bachkground:... nếu bạn đã xác định tông màu nền (là trắng chẳng hạn) thì bạn chỉ cần khai báo một lần duy nhất ở phần CSS cho template, chứ không phải mỗi widget hoặc bất cứ thành phần nào khác lại phải khai báo lại, tức blog của bạn sẽ phải thực hiện rất nhiều lần thừa thãi. Bạn xóa hẳn cái phần background trong template nếu nó lại chồng lắp cái màu nền.


Có khá nhiều tag thừa trong template của Arlina, như kẻ chồng border, tô màu nhiều lần cho cùng một loại hyperlink,... bạn cứ duyệt toàn bộ phần CSS<head> sẽ phát hiện thấy.

Việc kẻ thêm dù chỉ một dòng kẻ thôi, cũng khiến blog của bạn phải làm thêm một việc. Đừng nghĩ chỉ một dòng nhỏ bé, vì nếu trang web load nhiều lần, nhiều dòng thì đó sẽ là lượng công việc không nhỏ. Tôi tinh chỉnh với tiêu chí Tối ưu


2. Xóa drop menu


Thuở mới học blogger, tôi rất thích các kiểu drop menu với đủ hình dạng, màu sắc. Nhưng càng đi sâu vào thế giới blog chuyên nghiệp, tôi nhận ra mọi người có xu hướng sử dụng thanh điều hướng đơn, tức là chỉ click vào để đến trang nào đó chứ không dùng drop menu vì:


  • Quan trọng nhất 70% lượng truy cập vào một trang blog là từ điện thoại, thiết bị di động, thiết bị không dùng chuột,... Lúc đó thì làm gì có hiệu ứng Hover để mà hiển thị drop menu? Nếu điện thoại có phần mềm hỗ trợ đi chăng nữa thì cũng rất khó sử dụng. Lúc đó thì web của bạn thường sẽ hiện menu theo kiểu lột trần, tức sub-menu cũng hiện hết trên thanh điều hướng của điện thoại, khiến nó trong thật... rối rắm và mất cảm tình.
  • Tăng tốc độ tải trang: việc bớt đi một dòng menu cũng là bớt đi một việc, đằng này bỏ cả nên bớt hẳn nhiều việc phải làm, blog sẽ nhanh hơn.
  • Bỏ bớt thư viện tham chiếu: để dùng drop-menu, vài người sử dụng rất nhiều dòng code CSS hoặc javascript để tạo hiệu ứng. Thật phí của trời.


Mình xóa bớt đoạn này trong template:

#gvmenu ul.menus{height:auto;overflow:hidden;width:160px;background:#fff;position:absolute;z-index:99;display:none;color:#dadce0;box-shadow:0 0 1px 0 rgba(0,0,0,0.2)}
#gvmenu ul.menus a{background:#fff;color:#666;display:block;padding:10px;line-height:20px;border-bottom:1px solid #f5f5f5}
#gvmenu ul.menus a:hover{padding-left:17px;color:#53606f;}
#gvmenu ul.menus li{display:block;width:100%;font-size:13px;font-weight:400;text-transform:none;border-right:0;transition:all 0.1s ease-in-out}
#gvmenu ul.menus li:hover{width:100%}
#gvmenu ul.menus li:first-child a{border-top:none}
#gvmenu ul.menus li:last-child a{border-bottom:none}
#gvmenu ul.menus li:hover a{color:#53606f}
#gvmenu li:hover ul.menus{display:block}
danh cho nut HOME
#gvmenu .homers a{background:#015f9e}
#gvmenu .homers a:hover{background:#0165a9;}


Một chuyên gia thiết kế blog đã nói:
Nếu bạn phải dùng đến drop menu để điều hướng nội dung, tức là bạn đã trở thành nhà thiết kế tồi. Đúng thật là rất nhiều trang sừng sỏ chỉ có duy nhất một tầng menu, vậy mà người dùng vẫn dễ tìm nội dung mới hay chứ!


3. Những thẻ CSS thường dùng


font-family:Georgia
font-size:15px
text-align:center
text-decoration:none
text-transform:none;m
background:#fff
border-radius:2px
border-left:1px solid #333
border-right:1px solid #333


4. Sửa lỗi Page Navigation


G vusion 2 có hệ thống Page Navigation tạm ổn, nhưng có một điều là ở những trang Label, mặc định Blogger sẽ hiển thị 20 bài, bạn cần thống nhất lại con số bài posts mỗi trang tránh trang 1 20 bài, các trang sau lại 7 bài, loạn lên người dùng không biết đâu mà mò.

Để sửa lỗi Page Navigation, bạn tìm đến các đoạn khai báo nhãn sau:

expr:href='data:label.url

Sửa lại thành

expr:href='data:label.url + &quot;?max-results=7&quot;'

Thường thì bạn sẽ phải sửa 2 lần cho widget Label. Nhưng template có sử dụng Breadcum như G vusion 2 thì bạn sẽ phải sửa thêm 2 chỗ như vậy nữa. Tốt nhất bạn cứ tìm đến bất cứ chỗ nào có dạng như trên mà phía sau chưa khai báo max-results thì hãy chèn thêm vào sau, mục đích là khống chế bài viết tối đa cho blog.

Bạn có thể thay con số 7 thành số bạn thích dùng, nhưng tôi khuyên bạn nên chọn con số 7, vì nó là con số đã được tính toán rất kỹ, giúp blog hoạt động tốt hơn, hiệu quả cho việc quảng cáo sau này hơn, dễ dùng cho mobile hơn,...


5. Thêm ghi chú cho đoạn nào cần


Khi bạn tùy chỉnh một blogger template, tức bạn đang cá nhân hóa template. Hãy luôn tạo bản sao lưu qua mỗi bước, như khi bạn sửa CSS của phần header xong, lưu lại một bản vào file txt nào đó và đặt tên templateCuaToi.v.1.1-header.txt chẳng hạn. Sau khi sửa xong phần CSS của sidebar, bạn lại lưu lại một bản và đặt tên templateCuaToi.v.1.2-sidebar.txt,...

Đó chính là các sao lưu chuyên nghiệp để khi bạn phá hỏng một thứ gì, bạn dễ quay trở lại cũng như nắm bắt được tiến trình. Đây chỉ là mẹo dành cho những blogger không chuyên nghiệp như tôi, nên các chuyên gia hãy cho đánh giá nhận xét nhé.

Một ghi chú nữa cũng rất quan trọng là ghi chú trực tiếp trong template, để sau này bạn nâng cấp, xem lại, bạn dễ dàng hiểu đoạn code này dùng để làm gì, không phải đoán mò hoặc thay đổi thông số để test (vì tôi có biết code gì đâu?). Ví dụ như hình trên. Mẹo này rất hay khi tùy biến cho blogger template.


6. Chỉnh sửa blogger credit


Bạn có thấy các blog miễn phí thường có yêu cầu giữ nguyên credit ở phần footer không? Nếu bạn chỉnh sửa, xóa đi thì blog của bạn sẽ bị redirect về trang chủ của tác giả. Mọi người thường chọn cách an toàn là che phần credit đi. Nhưng đó chỉ là vải thưa che mắt thánh, vì vẫn còn đó backlink về tác giả. Vậy nên trong phần này, tôi sẽ hướng dẫn các bạn thay đổi hẳn cấu trúc credit ở footer của blogger thành của mình. Khi đó thì template đó thực sự là của bạn.

Nếu bạn không thể sửa credit, hãy giữ nguyên vì đó vẫn là bản gốc của tác giả. Chỉ khi nào bạn chỉnh sửa thành công credit blogger, bạn mới có thể tự coi bạn là tác giả. Tôi cũng muốn chia sẻ cách gỡ footer credit ở đây nhưng sau một thời gian, tôi được nhiều blogger góp ý và quyết định không phổ biến kiến thức này. Tôi chỉ có thể bật mí cho các bạn là credit ở footer được mã hóa bằng Hex và dấu đâu đó trong code.

Sau các bước trên, tức là bạn đã tự tạo cho mình một template riêng của mình. Bạn có thể gắn credit của mình, nhưng tôi khuyên bạn nên để credit của tác giả gốc lại, trên phần giới thiệu đầu của template. Điều này giúp bạn xây dựng mối quan hệ cộng đồng tốt hơn.

Related Posts