Cách thêm biểu tượng cây bút chì vào lại bài viết trong widget Blog version 2

Nếu như trong widget Blog version 1 thì đây là tính năng mặc định có sẵn chỉ là bạn có chọn hiển thị trong bài viết hay không thôi, nhưng đã sử dụng widget Blog version 2 thì tính năng này không còn khả dụng nữa vì Blogger đã bỏ không sử dụng thẻ data của tính năng này, buồn 😌

Giới thiệu qua đôi chút về biểu tượng cây bút chì cho các bạn mới chưa biết, đó là tính năng chỉnh sửa nhanh bài viết post quick edit và nó chỉ hiển thị trong bài viết. Khi bạn là người quản trị Blog, bạn có thể nhấp vào biểu tượng cây bút truy cập nhanh liên kết chỉnh sửa lại bài viết thay vì bạn phải truy cập Blogger vào Bài đăng tìm bài viết đó để chỉnh sửa. Tóm lại đây là tính năng rất hay lại tiện dụng.

Cái hay ở đây biểu tượng này sẽ chỉ hiển thị với người quản trị Blog nhưng lại không hiển thị với người khác, đó là do tệp css có tên "authorization.css" quản lý nhưng rất nhiều template hiện nay đều chặn css mặc định này thông thường template version 3 sẽ chặn bằng cách thay thẻ đóng </head> thành &lt;!--</head>--&gt;&lt;/head&gt;

Để thêm lại tính năng này vào lại trong bài viết thì các bạn làm như sau:

Bước 1: Thêm mã xml vào vị trí thích hợp của bài viết trong widget Blog1

<b:if cond='data:view.isPost'>

  <span expr:class='&quot;item-control &quot; + data:post.adminClass'>

    <a expr:href='&quot;https://draft.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=post;postID=&quot; + data:post.id + &quot;;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=0;src=postname&quot;' rel='nofollow' title='Chỉnh sửa bài viết'>

      <img alt='Chỉnh sửa bài viết' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZZkpMJz7oesu1qeWs-2flFlhfqs7H8eMcqKpzTKoid1ShYhsN1-Veot1R3-lYF2_p9rU5ShvP-WuQyD4vr3DmWfTZbC78vytBOZ-_BSBQHvr92jxj78D2RShKQiFHhHkJl38_z6TQWew/s1600/quick-edit.gif' width='18'/>

    </a>

  </span>

</b:if>

Bước 2: Thêm css trong <b:skin> để ẩn biểu tượng với khách truy cập

span.blog-admin{display: none;}

Bước 3: Kiểm tra

Bạn mở một liên kết bài viết bất kỳ trên hai trình duyệt khác nhau, một trình duyệt đã đăng nhập tài khoản Google mà tài khoản đó đang quản trị Blog và một trình duyệt đã đăng nhập tài khoản Google nhưng không phải là tài khoản quản trị hoặc chưa đăng nhập.

Nếu sau khi kiểm tra mà bạn đều thấy biểu tượng không hiển thị đó là do tệp css quản lý authorization.css đã bị chặn. Lúc này bạn cần thêm lại tệp trước thẻ đóng </head> hoặc trước thẻ đóng </body>

<b:if cond='data:view.isPost'>

  <link expr:href='&quot;https://www.blogger.com/dyn-css/authorization.css?targetBlogID=&quot; + data:blog.blogId' rel='stylesheet'/>

</b:if>

Nếu các bạn không muốn sử dụng link css mặc định thì chỉ có cách thay lại css thành như sau:

span.blog-admin{opacity: 0;}

Lúc này biểu tượng sẽ trong suốt với bất kỳ ai nhưng bạn nhớ vị trí của biểu tượng nằm đâu trong bài viết và có thể nhấp vào vì nó không giống như display:none là ẩn luôn không nhấp được.

Mở rộng: Nếu bạn muốn thay link ảnh của biểu tượng cây bút chì

<img alt='Chỉnh sửa bài viết' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZZkpMJz7oesu1qeWs-2flFlhfqs7H8eMcqKpzTKoid1ShYhsN1-Veot1R3-lYF2_p9rU5ShvP-WuQyD4vr3DmWfTZbC78vytBOZ-_BSBQHvr92jxj78D2RShKQiFHhHkJl38_z6TQWew/s1600/quick-edit.gif' width='18'/>

Bạn có thể thay bằng biểu tượng bằng link ảnh khác hoặc bằng biểu tượng của font khác đều được. Tóm lại nó là một tính năng hay và hữu ích đó các bạn, theo mình nghĩ các bạn nên thêm lại tính năng này vào.