Làm thế nào Firebug giúp bạn Thiết kế Blogger Blog của bạn

4:40 PM

Đối với hầu hết các blogger, ý tưởng về việc điều chỉnh các mã hóa của blog của họ để cải thiện trải nghiệm người dùng là khó khăn ở tốt nhấ...

Đối với hầu hết các blogger, ý tưởng về việc điều chỉnh các mã hóa của blog của họ để cải thiện trải nghiệm người dùng là khó khăn ở tốt nhất và thường khá đáng sợ. HTML5, CSS, và các yếu tố mã hóa khác là ngôn ngữ ảo của riêng mình và cho người sử dụng Blogger trung bình tìm kiếm để cập nhật blog cá nhân, các thiết lập tự động là khoảng tốt như nó được. Nếu có một cách tốt hơn để mã một blog, cho dù một người mới bắt đầu hay dân chuyên nghiệp, có thể được thực hiện bên trong trình duyệt riêng của mình? 

Nếu bạn đang sử dụng Firefox hoặc Chrome, sau đó bạn cũng nên sử dụng Firebug. Nó cho phép bạn mã hóa trang web của bạn trong thời gian thực, vì vậy bạn có thể tối đa hóa UX của blog của bạn trong thời gian không ở tất cả các.

Bạn không còn cần sửa Thông qua Blogger!

Nếu bạn đã từng cố gắng để cập nhật một chủ đề Blogger thông qua các chức năng chỉnh sửa của trang web, sau đó bạn biết khó khăn như thế nào nó có thể được. Bạn có thể xem trước thiết kế của bạn, nhưng bạn không thể lưu bất kỳ thay đổi để chính thức xem những gì sẽ xảy ra với trang web của bạn cho đến khi bạn xuất bản các chỉnh sửa. Nếu bạn đã bỏ lỡ chỉ một dòng mã hoặc quên một yếu tố nhỏ, bạn sẽ phải quay trở lại vào ma trận chỉnh sửa, tìm ra lỗi, cập nhật nó một lần nữa, và lặp lại cho đến khi bạn có một blog đáp ứng một lần nữa. 

Có gì Firebug cho phép bạn làm là xem tất cả những yếu tố tạo nên một trang web trong thời gian thực. Thay vì chỉnh sửa và sau đó xuất bản, bạn có thể chỉnh sửa trong thời gian thực và xem các cập nhật xảy ra, tất cả mà không ảnh hưởng đến trải nghiệm người dùng của khách truy cập được đến trang web của bạn trong khi bạn đang chỉnh sửa. Bạn có thể thay đổi phông chữ, màu sắc, hoặc hầu như bất cứ điều gì khác trong việc thiết kế các trang web một cách nhanh chóng và xem kết quả công việc của bạn khi nó xảy ra. Bạn không thích nó? Chỉ cần lùi lại thay đổi của bạn. 

Nó thực sự là dễ dàng.

Sử dụng Firebug để tùy chỉnh CSS trong Blogger

Hướng dẫn này sẽ cho bạn thấy làm thế nào để thay đổi mã CSS của một mẫu Blogger. Thông thường, các tờ khai phong cách Blogger Template CSS có thể chỉnh sửa thông qua các tập tin style.css, được tìm thấy giữa <b:skin> and </b:skin> .

Để tải về Firebug và tìm hiểu thêm chi tiết về các tính năng mạnh mẽ của nó, hãy truy cập: Firebug cho Firefox, hoặc nếu bạn đang sử dụng Chrome, có các ứng dụng Firebug Lite. Tôi sẽ khuyên bạn nên sử dụng Firefox, đó là hoàn chỉnh hơn và nhanh chóng, nhưng, tuy nhiên, cả hai đều làm việc như nhau. 

Sau khi Firebug được cài đặt, một biểu tượng lỗi nhỏ sẽ có mặt tại phía trên bên phải của thanh địa chỉ của trình duyệt web của bạn. Nhấp chuột vào nó, một màn hình chia theo chiều ngang sẽ được hiển thị ở dưới cùng của cửa sổ trình duyệt. Các trang web sẽ tiếp tục thể hiện ở nửa trên, trong khi nửa dưới sẽ hiển thị mã HTML của trang web hiện thời.

firebug

Để tùy chỉnh bất kỳ yếu tố web từ một mẫu Blogger, chỉ cần nhấp vào hoặc vào biểu tượng trên thanh công cụ Firebug, hoặc "Kiểm tra Element với Firebug" mục trong menu ngữ cảnh. Tiếp theo, nhấn vào nút màu xanh để con trỏ Kiểm tra và đặt con trỏ bên phải trên các yếu tố để tùy chỉnh. 
Ví dụ, chúng ta nói rằng chúng tôi muốn thay đổi tiêu đề của "Blog Archive" tiện ích. Sau khi chúng tôi đã kiểm tra các nút kiểm tra, chuột lên "Lưu trữ Blog" danh hiệu đó sẽ được đánh dấu như trong hình dưới đây. Để thay đổi các yếu tố này, click vào nó:

inspect element using firebug

Bây giờ chúng tôi quyết định mà yếu tố chúng ta muốn thay đổi, kích chuột phải vào "Style" bảng điều khiển và chọn "Thêm quy tắc" lựa chọn:

add CSS rule in firebug

Điều này sẽ cung cấp cho các lớp học hoặc id của phần tử được đánh dấu - trong trường hợp của chúng tôi, tiêu đề của Blog (# BlogArchive1> h2). Để chỉnh sửa quy định này mà chúng ta chỉ cần thêm, bấm vào bất cứ nơi nào gần khung nhọn bên trái sẽ mở một hộp văn bản, để chúng ta có thể gõ một tuyên bố CSS mới:

firebug css declaration

Và đây là một phần thú vị. Hãy nói rằng chúng tôi muốn làm tiêu đề màu đỏ. Chúng tôi sẽ loại màu sắc và nhấn Enter, sau đó chúng tôi sẽ nhập giá trị màu hoặc văn bản màu đỏ và nhấn Enter. Chúng tôi cũng sẽ thiết lập các thiết lập kích thước phông chữ 20px, liên kết văn bản đến trung tâm (text-align: center) và làm cho văn bản nhấn mạnh (text-decoration: gạch dưới):

modify blogger css with firebug

Điều thú vị về Firebug là khi thay đổi bất kỳ tài sản CSS, bạn có thể xem kết quả áp dụng trực tiếp trên trang. Vì vậy, sau khi thêm các tờ khai này, chúng ta sẽ thấy một màu đỏ gạch dưới tiêu đề lớn cho Blog tiện ích của chúng tôi (xem trong hình trên). 
Để áp dụng quy tắc CSS này trên một mẫu Blogger, chỉ cần chọn nó bắt đầu từ khung nhọn phải và # (id) hoặc. (Lớp) biểu tượng, sau đó kích chuột phải vào nó và Sao chép mã CSS.

copy firebug css rule

Trước khi thực hiện bất kỳ thay đổi, nó rất khuyến khích để tạo bản sao lưu của mẫu hiện tại của bạn. Tới "mẫu" và nhấn vào "Backup / Restore" nút ở phía trên bên phải. Trên cùng một "mẫu" vị trí, bấm vào "Customize" nút và điều hướng đến "Nâng cao"> "Thêm CSS". Dán các quy tắc CSS mà bạn vừa sao chép vào hộp CSS:

add firebug css to blogger template

Nhấp vào nút "Áp dụng cho blog" ở góc trên bên phải để lưu các thay đổi và xem blog của bạn.

Firebug cũng mang đến cho bạn một lợi thế riêng biệt ...

Một trong những lý do tốt nhất để cài đặt Firebug vào Chrome hoặc Firefox là nó cho phép bạn cạnh tranh với một số mẫu thiết kế trang web yêu thích của bạn một cách nhanh chóng và dễ dàng. Thay vì thuê một nhà thiết kế web để làm việc, có thể chi phí bạn hàng ngàn, bạn chỉ có thể bắt đầu Firebug và xem những gì phong cách CSS cho trang web yêu thích của bạn. Điều này cho phép bạn tạo ra một tiện ích tương tự. 

Từ đó, tất cả các bạn phải làm là thay đổi mã hóa để làm cho các yếu tố thiết kế làm việc theo quy định của custom.css của riêng bạn. Điều này có nghĩa bạn có thể làm thay đổi thiết kế dễ dàng để blog Blogger của bạn mà không cần phải đi qua tất cả các menu và chức năng chỉnh sửa sao cho mẫu của bạn có thể thực sự là của riêng bạn. Bạn có một số việc phải làm? Chắc chắn - nhưng Firebug hiện tất cả các công việc chính cho bạn. 

Tất cả các bạn đã làm là có một tâm trí sáng tạo và một vài phút để thay đổi các thiết kế mã hóa. Cho dù bạn đã được mã hóa trong nhiều năm hay chỉ là bắt đầu blog đầu tiên của bạn, điều này chắc chắn là cách tốt nhất để đảm bảo rằng khách truy cập của bạn có những trải nghiệm tốt nhất có thể!

No comments: