Thêm button Bookmark vào cho blog

Trước khi thêm chức năng này vào blog/website chúng ta cần tìm hiểu trước một số khái niệm

Bookmark là gì?

Bookmark là một vật sử dụng đế đánh dấu vị trí trong một cuốn sách mà ta đang đọc dở.

Vậy khái niệm của Bookmark đối với trình duyệt trên máy tính cũng vậy. Chức năng của nó là để đánh dấu địa chỉ web mà bạn muốn ghi nhớ lại và dễ dàng hơn trong việc truy cập lần sau mà không cần phải mất công tìm kiếm lại.
Và ở bài viết này sẽ hướng dẫn anh em thêm 1 chức năng hướng dẫn độc giả cách thức để thêm blog/website vào bookmark trên trình duyệt của họ

Thêm button Bookmark vào blog/website

Anh em chỉ cần chèn đoạn code bên dưới vào vị trí muốn hiển thị chức năng này là được

<script>
    $(function() {
    $('#bookmarkme').click(function() {
      if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
        window.sidebar.addPanel(document.title, window.location.href, '');
      } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite
        window.external.AddFavorite(location.href, document.title);
      } else if (window.opera && window.print) { // Opera Hotlist
        this.title = document.title;
        return true;
      } else { // webkit - safari/chrome
        alert('Bấm ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D để lưu website này.');
      }
    });
  });
</script>
<a href="#" id="bookmarkme" rel="sidebar" title="bookmark this page">Bookmark This Page</a>

Sử dụng đoạn css bên dưới để tạo hình cho button, anh em tự tùy chỉnh cho phù hợp với blog/website của mình

#bookmarkme{padding:5px 10px;background-color:#005b53;border:1px solid #004a44;border-radius:4px;font-size:12px;color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0,0,0,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
#bookmarkme:hover{background-color:#000;border:1px solid #000;text-decoration:none}
#bookmarkme:active{background-color:#000;border:1px solid #000;-webkit-box-shadow:inset 0 1px 4px rgba(0,0,0,0.2);box-shadow:inset 0 1px 4px rgba(0,0,0,0.2)}

Để hiểu rõ về chức năng này anh em xem demo bên dưới

Bookmark This Page