Follow là gì?
Follow là một từ rất quen thuộc trên cộng đồng mạng, và không mấy xa lạ với người sử dụng Facebook, Instagram, ... Có nghĩa là theo dõi một ai đó, hay một vấn đề gì đó. Riêng đối với website/blogspot của bạn được một ai đó Follow , đồng nghĩa với việc người đó muốn cập nhật những thông tin mới nhất từ trang web của bạn, và bày tỏ sự quan tâm của họ đến trang web của bạn.
Bật nút Follow mặc định trên Blogspot
Để bật nút Follow trên Blogspot, trước tiên các bạn truy cập vào phần quản lý Blogger. Tiếp theo chọn Layout (Bố cục), rồi chọn Add a Gadget (Thêm tiện ích).
Tiếp theo các bạn nhấp chọn Follower (Người theo dõi), lưu lại thay đổi trên giao diện.
Kéo thả tiện ích đế vị trí cần hiển thị, và lưu lại. Sau đó các bạn tải lại trang web để xem có hiển thị chưa nhé.
Tạo khung Follower Popup cực đẹp trên Blogspot
Nếu bạn không hài lòng với giao diện mặc định của tiện ích Follower trên Blogger, thì mời bạn xem tiếp cách tạo một Follower Popup giao diện cực đẹp và bắt mắt. Bây giờ chúng ta bắt đâu tiến hành nhé.
1. Thiết kết giao diện Followe Popup
Đầu tiên các bạn vào phần quản lý Blogger, thêm mới tiện ích, rồi tiếp theo chọn HTML/JavaScript. Dán vào đoạn code giao diện dưới đây:
<div class="banner-noti-browser">
<div class="avatar">
<a href="https://www.blogger.com/follow.g?blogID=YOUR_BLOG_ID" target="_blank">
<img id="img_avatar" class="img-avatar" style="max-width:auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOWM2Ok-UymwcFWjuKMFQrrXNPKaZWIwAnIVlD68e_SW271yhLaa8uKUbf613uYsojc1iSXoHJOXe-Vma9zY3W4jDuj_Fk3GbkX2NJDakZ9HtT1bxsHOF_KAiNBikNXZF22mUYzTbaqX7N/s320/ezgif-2-38f89deffbfa.gif" />
</a>
</div>
<div class="banner-noti-browser__group">
<span class="banner-noti-browser__title">Đừng bỏ lỡ bài viết mới. Hãy bật ngay thông báo tin nhắn nhé!</span>
</div>
<div class="flx flx-al-c banner-noti-browser__group-btn">
<button class="button button-default button-medium clickable banner-noti-browser__group-btn__turn-on">
<span><a href="https://www.blogger.com/follow.g?blogID=3815708448939314607" style="color: white;" id="tipsvn_ok" target="_blank">Bật thông báo</a></span>
</button>
<button class="button button-default button-medium clickable banner-noti-browser__group-btn__cancel" id="tipsvn_cancel">
<span>Để sau</span>
</button>
</div>
</div>
Trong đó, YOUR_BLOG_ID là blogID trang Blogspot của bạn. Để xác định được blogID, bạn truy cập vào thẻ Posts (Bài đăng). Đoạn mã số trên thanh địa chỉ chính là blogID đấy nhé.
ví dụ: https://www.blogger.com/blog/posts/3815708xxx939314607
2. Thêm thư viện CSS và jQuery vào Blogger
Việc tiếp theo là các bạn truy vào thẻ Theme (Chủ đề), sau đó chọn Edit HTML (Chỉnh sửa HTML).
Chèn thêm thư viện CSS sau đây vào vị trí như ở hình phía trên.
<link href='//demo.tips.vn/css/follow-blogspot.css' rel='stylesheet'/>
Tiếp theo các bạn tìm kiếm thẻ </head> trong phần chỉnh sửa HTML, và dán tiếp thư viện jQuery sau đây vào phía trên thẻ </head>.
<script src='//demo.tips.vn/js/follow-blogspot.js' type='text/javascript'/>
Cuối cùng các bạn lưu lại, tải lại trang web để xem thế nào nhé. Còn đây là kết quả của tôi:
