Thứ Bảy, 18 tháng 5, 2019

Tinh chỉnh Blogger template

Tags


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.

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.




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











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

Related Posts