22 tháng 5, 2019

Tinh chỉnh và Tối ưu Blogger template cho itbinhdan (Simplify 2)


Trong bài này tôi sẽ hướng dẫn các bạn tinh chỉnh một template của Blogger bằng HTML, và lấy ví dụ bằng chính template của IT BinhDan đây. Khi mới tải về một bản free template của blogger, áp dụng vào cho trang blog của mình, đa phần mọi người sẽ muốn chỉnh sửa lại một chút, để nó được "cá nhân hóa".




Tinh chỉnh Blogger template gồm nhiều quá trình nâng cấp và thay đổi đã diễn ra từ lâu, và dần dần từng bước. Nay tôi muốn lưu lại đây để sau này chia sẻ cho mọi người template này, các bạn sẽ biết phải tùy biến lại giao diện và thông số như thế nào.

Đa phần mọi người sẽ tùy biến lại template, để tạo dấu ấn cá nhân, để trang blog/web có một cá tính nhất định mà không lẫn lộn và trùng lặp với hàng nghìn trang blog khác có cùng template nguồn đó. Quá trình này sẽ giúp bạn nắm vững kiến thức, bố cục của một trang blog và lâu dần, bạn có đủ khả năng để tự sản xuất ra một trang blog của riêng mình.


Mục lục:


Những điều cần lưu ý trước khi chỉnh sửa HTML template

Để chỉnh sửa trực tiếp lên các dòng HTML của Blogger template, bạn vào phần sau



Đây là khung code của template, rất khủng khiếp và choáng ngợp, ngay cả với lập trình viên



Việc đầu tiên là hãy chọn cả khung code, copy nó, rồi dán ra một file txt nào đó để lưu trữ. Mỗi lần chỉnh sửa hoàn thiện gì đó, lại copy ra 1 bản lưu như vậy rồi đặt tên, để phòng trường hợp lỗi code, điều rất thường xuyên xảy ra, hay bạn muốn nhảy giật lùi lại một bước nào đó.

OK, sau khi đã chuẩn bị những việc đó, giờ là lúc ta tùy biến template của blogger thôi, và ở cuối cùng, tôi sẽ chỉ bạn cách "crack" full mọi template blogger, bằng một thuật toán tuyệt vời.

Tối ưu template G Vusion 2


G Vusion 2 là một template của lò Arlina. itbinhdan tôi khá thích template này vì nó clean, responsive và có các shortcode chất lượng, đẹp mắt. Tuy nhiên, bản gốc của nó còn vài khiếm khuyết, mà nếu bạn tối ưu được code thì sẽ có một cái template tuyệt cú mèo.

Bài viết chi tiết quá trình tối ưu template G Vusion 2


Chỉnh sửa khung Quote


Giao diện khung quote ban đầu

Search dòng post-body blockquote và tùy chỉnh các thông số

post-body blockquote:before{left:20px;border:4px solid rgba(239,207,173,0.7)}

border:4px chỉnh thành border:0px sẽ cho ra hình dưới

Quote sau khi cho border về 0

Giờ đổi lại border = 4 và left = 0 thì ta được như sau


Vậy chứng tỏ quote của template này dùng 2 hình chữ nhật chồng lên nhau, cái thứ 1 là before, cái thứ 2 là after.



Dạng quote CSS này có kiểu cái trên đè cái dưới để tạo hiệu ứng như dưới


Nhưng câu lênh trong IT BinhDan template bị kẹt chỗ nào đó nên cái dưới không xoay được. Mà tiêu chí Bình Dân nên tôi sẽ gỡ bỏ cái dưới cho nó lành.

Và sau cùng tôi cho nó về thành như thế này cho đúng chất simply:

.post-body blockquote{position:relative;margin:0 auto;padding:15px 15px 15px 25px;line-height:24px;text-shadow:0 1px 1px white;background-color:#EFEFEF;border:0px solid rgba(0,0,0,0.05);}
.post-body blockquote:before,.post-body blockquote:after{content:'';position:absolute;top:0;bottom:0}
.post-body blockquote:before{left:0px;border:1px solid rgba(0,0,0,0.5)}
.post-body blockquote:after{z-index:-1;left:0;right:0;background:rgba(0,0,0,0.9);border:1px solid rgba(0,0,0,0.7);transform:rotate(2deg)}

Sửa lại Footer của Template


tinh-chinh-blogger-footer-template


Với một trang blog, thì phần template cũng là một nơi chứa nhiều backlink, và thường là nơi để đóng dấu bản quyền nữa (với các blogger template có phí). Có vài cách để crack phần này, và tôi sẽ đề cập ở cuối bài này, và đây là vấn đề nhạy cảm, cũng không được hoan nghênh ở cộng đồng blogging. Với những template blog miễn phí, khi click vào link ở phần footer, bạn sẽ được điều hướng về trang chủ của người tạo ra template. Dù bạn có cố chỉnh sửa lại trong HTML template thì vẫn không được, vì cái code của nó đã được mã hóa Hex và lưu ở đâu đó.

Còn trong phần này, tôi sẽ hướng dẫn các bạn tùy biến lại cái footer của một template.

Như trên hình trên, bạn copy dòng "Copyright..." hoặc "Inspired by...". Rồi vào phần edit html template. Nhấp chuột trái vào khung soạn thảo html, rồi nhấn tổ hợp phím Ctrl+F để mở ô tìm kiếm và dán đoạn bạn copy ở trên vào. Ví dụ tôi copy đoạn Inspired by, dán vào rồi nhấn Enter, con trỏ sẽ nhảy tới nơi nó tìm thấy dòng chữ đó.



Để thay đổi dòng chữ "Inspired by" bằng cái gì thì bạn thay ở đây, và cả cái anchor link đằng sau nữa (Chế Bình Dân)

Sau đó bạn lưu lại và mở trang blog xem thử.

Việc tùy biến những thông tin text ở blogger template diễn ra đơn giản như vậy đó, bạn có thể tìm, copy mọi dòng text xuất hiện trên giao diện của template, và rồi dán vào trong phần HTML editing để search xem nó nằm ở đâu, chỉnh lại được không,...

Ví dụ như những cái nhãn ở khung bên phải, bạn cũng có thể thay đổi chúng bằng cách trên:



Chỉnh sửa icon, biểu tượng và link của chúng



Trên là khung bên phải, với các icon mặc định của template gốc. Một icon trên cùng bị mất hình, 2 dòng icon dưới quá dư thừa với itbinhdan.com blog, nên tôi sẽ xóa bớt đi cũng như cập nhật link cho các icon mình dùng như sau:

1. Chuột phải biểu tượng bị broken, chọn "Copy Link location" hoặc "Copy Image address" đều được.


Sau đó vào phần HTML editing tìm tới đoạn chứa URL của icon bị broken đó:


Giờ thì ta đã hiểu lờ mờ rằng vì sao cái image này không hiện, vì có lẽ nó đã bị postimg.org chặn, khóa hoặc hết hạn sử dụng miễn phí.

Hãy dùng chính Blogger để lưu trữ image, tuy URL có dài, nhưng ảnh của bạn được bảo đảm không gặp những trường hợp chết ảnh như này

Bây giờ thì bạn muốn sửa, xóa, hoặc thay ảnh bằng một dòng chữ nào đó thì tùy.
Với những icon của mạng xã hội bên dưới cũng vậy, bạn có thể tùy biến chúng tùy ý.
Dưới đây là giao diện đơn giản sau khi chỉnh sửa của itbinhdan.com


Chỉnh sửa màu sắc cho Header và Footer


Màu sắc của template gốc thường không được ưng mắt, bạn muốn thay màu của chúng thì phải làm sao?

Như itbinhdan có 2 cái viền trên và dưới màu xám đen

website-color

Giờ tôi muốn đổi sang màu xanh hay đỏ thì phải làm thế nào?

Có nhiều cách, trong đó cách đầu tiên bạn cần phải xác định được cái code màu của 2 cái viền. Nó có màu đen nhưng không phải đen xì nên ta cần cài một phần mềm hay một ứng dụng dạng "color picker" (là một ứng dụng click vào vùng màu nó sẽ cho ta mã code của màu đó theo dạng HEX, rgb,..)

Tôi thường dùng Chrome extension có tên Eye Dropper

Eye Dropper

Sau khi cài ứng dụng này, bạn mở trang blog ra, click vào biểu tượng cây bút nhỏ mực đó để mở cửa sổ thao tác, và chọn "Pick color from web page"

pick-color-from-web-page

Con trỏ chuột sẽ xuất hiện thêm một ô vuông kèm theo. Click chuột vào vùng bạn muốn lấy màu, nó sẽ cho bạn code đầy đủ của Hex, hsl, rgb.

Thường template sẽ lưu mã màu sắc dưới dạng HEX (một số dùng egb), nên bạn hãy copy cái code màu có được, vào phần Edit HTML template và search cái mã màu đó ra. Ở đây tôi search mã màu 262626

color-template


Xác định được chỗ chứa code màu rồi, giờ bạn muốn thay đổi sang màu nào thì chỉ cần copy mã màu đó rồi ghi đè lên thôi. Tôi thường dùng trang web HTML color codes để tìm màu trực quan nhanh chóng. Sau khi ghi đè, lưu lại template bạn đã có thể thưởng thức giao diện mới của trang blog của mình rồi.

Cách dùng color picker để tìm màu này ở một số trường hợp sẽ không chính xác, màu được "pick" không chuẩn. Nếu vậy bạn có thể dùng cách 2.

Cách 2 là tìm kiếm vùng code HTML của header và footer. Tất cả các lập trình viên đều đặt tên có liên quan để dễ quản lý và bảo trì, phát triển mã của mình, vậy nên bạn nhập vào header và footer bạn sẽ được đưa tới nơi đó.

header-wrapper

footer-wrapper

Ở đây, bạn không những tùy biến về màu sắc, mà còn có thể thay đổi kích thước, phông chữ, icon,... rất hay.

.... bài viết đang tiếp tục được cập nhật

Related Posts