Labels

How to Add a Quick Edit Button in Blogger Posts


Nút chỉnh sửa nhanh (Quick Edit Button) là một tính năng nhỏ blogger cung cấp để tiện cho quản trị viên có thể chỉnh sửa bài viết mà không cần thiết phải truy cập vào trang quản trị. Trong bài viết này tôi sẽ hướng dẫn bạn cách tích hợp nó.

Như đã trình bày, đây là tính năng dành cho nhà quản trị, vì vậy nó sẽ không được hiển thị cho khách truy cập thấy. File authorization.css blogger sinh ra sẽ chịu trách nhiệm làm điều đó. Để file này hoạt động bạn cần giữ nguyên cặp thẻ

<head>
...
</head>

chứ không được đổi thành

&lt;head&gt;
...
&lt;/head&gt;&lt;!--<head/>--&gt;

I. Trường hợp bật css mặc định


Bước 1: Bật chức năng chỉnh sửa nhanh


Bước 2: Quay sang chỉnh sửa HTML và chuyển đến tiện ích Blog1


Tại đây bạn tiến hành ấn vào hàng số bên trái để thu nhỏ các thẻ b:includable lại.

Bước 3: Thêm thẻ định nghĩa

Bạn kiểm tra xem template đã có <b:includable id='postQuickEdit' var='post'> hay chưa

Nếu chưa có thêm toàn bộ nội dung sau (chèn vào sau 1 thẻ </b:includable> bất kì)

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='edit' class='icon-action' height='18' src='https://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>

Nếu có rồi thì sửa nội dung của nó thành

<b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='edit' class='icon-action' height='18' src='https://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
</b:if>

Đến đây bạn đã định nghĩa xong, nhiệm vụ tiếp theo là chèn nó vào bố cục bài đăng

Bước 4: Tìm <b:include data='post' name='postQuickEdit'/> và xóa nó đi để đặt ở vị trí thích hợp, nếu không thấy kết quả thì coi như đã qua bước này

Bước 5: Đặt icon chỉnh sửa ở vị trí thích hợp

Không biết sở thích các bạn thế nào, còn tôi thì thường đặt nó ở cạnh tiêu đề bài viết. Tiêu đề bài viết thường là thẻ h1 và nằm trong class <div class='post-head'>

Code đặt

<b:if cond='data:view.isPost'> 
 <b:include data='post' name='postQuickEdit'/>
</b:if>

Vị trí đặt


Khi đó bạn sẽ thu được kết quả sau


Khi ấn vào biểu tượng bút chì sẽ chuyển đến giao diện viết bài

II. Trường hợp tắt css mặc định


Các bước hoàn toàn như trên chỉ khác là bạn cần thêm 1 dòng css trích xuất từ css bundle

.item-control{display:none}

Để biểu tượng edit không hiển thị với khách xem blog

III. Trường hợp muốn tắt authorization.css

Như đã trình bày file authorization.css sinh ra để check quyền admin từ đó quyết định có cho hiển thị icon edit hay không. Trên thực tế file này cũng chiếm kha khá thời gian load trang của bạn, nếu bạn muốn tắt nó nhưng vẫn muốn có chức năng quick edit thì hãy theo thủ thuật hơi lầy này của tôi như sau

Thay cặp thẻ

<head>
...
</head>

thành

&lt;head&gt;
...
&lt;/head&gt;&lt;!--<head/>--&gt;

Các bước tương tự phần I chỉ khác: sửa nội dung thẻ <b:includable id='postQuickEdit' var='post'> thành

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl'>Edit</a>
    </span>
  </b:if>
</b:includable>

Sử dụng opacity hoặc color trùng với màu nền của body để ẩn biểu tượng edit đi


Như vậy ta vẫn có nút chỉnh sửa nhanh bài viết dù đã tắt authorization.css, còn về phía guest, nếu có vô tình ấn vào họ cũng chẳng làm gì được vì tài khoản của họ không có quyền chỉnh sửa bài đăng

OK tôi nghĩ đã trình bày rất chi tiết và các trường hợp có thể xảy ra với cái nút quick edit này rồi. Nếu có khó khăn gì hãy để lại bình luận để được trợ giúp nhé

Good Luck